加載jquery劍道網格基於搜索文本框不在頁面加載

我有一個jquery kendo網格在我的應用程序中，我希望如果搜索文本框有值，那麼只有它應該加載網格不在頁面加載。但我不知道我應該把我的網格放在document.ready函數裏面還是在這個函數之外。加載jquery劍道網格基於搜索文本框不在頁面加載

下面是我的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網格被調用，併爲每個不同的數據，它應該刷新基於數據的網格。

來源

2016-03-15 Vikash

，你可以做以下

$(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}); 
     } 
    }) 
})

希望它會幫助你

來源

2016-03-15 10:38:07 Monah

哇哈迪，感謝的人你救了我的一天。它的工作原理與我預期的一樣，我將其標記爲答案。 – Vikash

您應該在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>

在你的情況，你會創建一個基於搜索文本數據源，然後調用的setDataSource。

來源

2016-03-15 10:18:11

加載jquery劍道網格基於搜索文本框不在頁面加載

回答

相關問題