kendo listview 的 DataBound 事件从 dataSource 加载以前的参数

Question

我正在研究这个搜索功能，它通过搜索框获取输入，然后传递给 kendo 数据源，它会访问服务器并获取结果并呈现我的列表视图。这是代码：

 function searchClick(searchTerm) {

    var searchText = searchTerm;
    if (!searchTerm) {
        return;
    }

    var listView = $("#listView").data("kendoListView");
    if (!listView)
        createUI(searchText);
    else {
        listView.dataSource.read({
            searchTerm: searchText
        });
    }
}

> `function createUI(searchText) {`

    var tmpl = kendo.template($("#template").html());
    var dataSource = new kendo.data.DataSource({
        serverPaging: true,
        schema: {
            data: "ListMedia",
            total: "RowCount",
        },
        transport: {
            read: {
                url: gAppBaseURL + "Search/SearchData",
                type: "GET",
                dataType: "json",
                data: {
                    searchTerm: searchText,
                    pageSize: 25,
                    page: 1
                }
            }
        }

    });

    $("#listView").kendoListView({
        dataSource: dataSource,
        autoBind: false,
        template: tmpl,
        dataBound: function () {
            var ds = $("#listView").data("kendoListView").dataSource;
            if (ds.total() == 0) {
                return;
            }
        }
    });

    var pager = $("#pager").kendoPager({
        dataSource: dataSource,
        autoBind: false,
    }).data("kendoPager");

    return dataSource.read();
}

然后它将数据加载到我的 listView 和 Pager 中：

现在的问题是，当我进行分页时，它会将我之前输入的搜索值传递给服务器。例如，我首先输入 'Cat' 然后它会正确加载 cat 记录的结果（在第一次搜索时），但是当我搜索 dog 时第一页的结果是正确的，但是当我切换到第二页时它通过 'Cat'作为参数传给服务器其中returns结果猫。以下是我的 HTML:

<div class="SearchResultPage">
<input type="text" name="searchTextbox" id="searchTextbox" class="k-textbox" style="width:400px"/>
<button type="submit" id="btn_submitQry" onclick="onClickSearch()"></button>

<script>

    function onClickSearch() {
        var searchTerm = $('#searchTextbox').val();
        if (!searchTerm) {
            searchTerm = "@ViewBag.SearchText";
            $('#searchTextbox').val(searchTerm);
        }

        searchClick(searchTerm); //defined in universalSearch.js file
    }
</script>

每次我切换到另一个页面（我第二次搜索某物）时，它都会将上一个搜索词传递给服务器。

Answer 1

您的函数 createUI 将读取数据定义为来自 parameter 的常量值而不是函数。数据源中的分页将触发read方法，因此您的分页仍然使用以前的搜索词。

您可以创建这样的函数来使 read 数据获得新值（搜索词）。

function getSearchTerm() {
   return { searchTerm: $("#searchTextbox").val() };
}

然后将你的 createUI 函数改成这样

function createUI() {
    var tmpl = kendo.template($("#template").html()),
        dataSource = new kendo.data.DataSource({
        serverPaging: true,
        pageSize: 25
        schema: {
            data: "ListMedia",
            total: "RowCount",
        },
        transport: {
            read: {
                url: gAppBaseURL + "Search/SearchData",
                type: "GET",
                dataType: "json",
                data: {
                    searchTerm: getSearchTerm
                }
            }
        }
    });
}

然后每次读取时，它都会运行这个函数来获取新的值。你的搜索点击应该是这样的

function searchClick(searchTerm) {
    var searchText = searchTerm,
        listView = $("#listView").getKendoListView();

    if (!searchTerm) return;

    if (!listView)
        createUI();
    else {
        listView.dataSource.page(1); // reset paging and do read automatically
    }
}

kendo listview 的 DataBound 事件从 dataSource 加载以前的参数

DataBound Event of kendo listview loading previous parameters from dataSource

kendo-ui

kendo-datasource

kendo-listview