Question

我的应用程序中有一个jquery kendo网格，我希望如果搜索文本框有值，那么它只应加载网格而不是页面加载。但我不知道我应该把我的网格放在document.ready函数内部还是在函数之外。

下面是我的jquery网格代码：

$("#grid").kendoGrid({
            autoBind:false,
            dataSource: {
                transport: {
                    read: {
                        url: "/Home/GetSearchData",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: { searchTerm: firstSearchVal }
                    },
                    parameterMap: function (data, operation) {
                        return kendo.stringify(data);
                    }
                },
                pageSize: 10,
                schema: {
                    data: "data",
                    total: "total"
                },

            },
            dataBound: function () {
                DisplayNoResultFound($("#grid"));
            },
            serverPaging: true,

            pageable: {
                refresh: true,
                pageSizes: true
            },
            rowTemplate: kendo.template($("#rowTemplate").html()),
        });
    });

如果将手动数据放入该代码并将此网格放入document.ready函数中，则此代码将加载数据。但我想在这里它不应该加热document.ready函数只有当文本框将有数据然后只有kendo网格被调用时，对于每个不同的数据，它应该根据数据刷新网格。

Answer 1

您可以执行以下操作

$(document).ready(function(){
   $('#firstSearchVal').on('change',function(e){
      var value = $(this).val();
      if(value.length>=3) // search when the user provide at least 3 characters
      {
         // only refresh the datasource of the grid by passing the user search text entered.
         $('#grid').dataSource.read({searchTerm: value});
      }
   })
})

希望它会帮助你

Answer 2

您应该在document.ready中创建网格，但不要包含dataSource（或dataBound-function）。相反，当您想要加载网格时（当有搜索文本时），则使用网格上的setDataSource函数和搜索结果。
有关setDataSource的信息，请参阅http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setDataSource。

以上是上述链接的完整摘录：

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 }
  ]
});
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
</script>

在您的情况下，您将根据搜索文本创建一个DataSource，然后调用setDataSource。

基于搜索文本框加载jquery kendo网格而不是页面加载

2 个答案: