如何在剑道网格中进行搜索输入?

时间:2019-03-04 07:15:00

标签: javascript jquery search kendo-ui kendo-grid

我是新的软件开发人员。在我的新公司中,我使用他们的框架进行编码。及其使用剑道。我试图在Kendo Grid上搜索一个字段,以便可以在该网格中找到特定的信息。我尝试了this method,但没有用。老实说,我不明白如何使用“运输”的东西。我调用API来获取网格的数据,然后在网格的代码行中调用它。

{
    type: 'panel',
    fields: [{
        type: 'panel',
        text: 'Payment List',
        name: 'payment',
        fields: [{
            type: 'grid',
            name: 'paymentGrid',
            data: [],
            toolbar: function(){
                return `<div class="toolbar" style="width:370px">
                            <label class="search-label" for="search-reservation" style="color:white"> Cari berdasarkan No. Pesanan: </label>
                            <input type="search" id="search-reservation" class="search-class">
                        </div>`
                 },
                 sourceOptions: {
                     pageSize: 10
                 },
                 options: {
                     selectable: true,
                     autoheight: true,
                     allowCopy: true,
                     altrows: true,
                     pageable: {
                         refresh: true,
                         buttonCount: 5,
                         pageSizes: [10, 20, 50, 100]
                     },
                     dataBinding: function(){
                         record = (this.dataSource.page() -1) * this.dataSource.pageSize();
                     }
                 },
                 url: function(option){
                      var arg = option.data
                      $.ajax({
                         method: 'POST',
                         url: APILink ,
                         data: JSON.stringify(arg),
                         dataType: 'json',
                         contentType: 'application/json',
                       }).done(function (resp){
                           if(resp.data != null){
                               var nameMap = [];
                               $.each(resp.data,function(key,val){
                                   nameMap.push({
                                       id: val.id,
                                       supplier: val.supplier,
                                       reservation_id: val.reservation_id,
                                       currentPayment: val.state
                                   });
                               });
                               option.success({
                                   data: nameArray,
                                   total: resp.total
                               });
                           }      
                       }).fail(function(jqXHR, status, err){
                           option.error(err);
                       });
                 },
                 fields: [{
                     name: 'number',
                     text: 'No. ',
                         template: "#= ++record #",
                         width: 70,
                     }, {
                         name: 'supplier',
                         text: 'Supplier',
                     }, {
                         name: 'reservation_id',
                         text: 'No. Reservation',
                     }, {
                         name: 'currentPayment',
                         text: 'status',
                     }, {
                         name: 'checked',
                         text: 'choose',
                         width: 100,
                         template: function (item) {
                             return !!item.checked 
                                  ? `<input id="${item.id}" name='ceklis-boks[]' class="check" checked value="${item.id}" type=\'checkbox\' />`
                                  : `<input id="${item.id}" name='ceklis-boks[]' class="check" value="${item.id}" type=\'checkbox\' />`
                            }
                        }],
                        onDataBound: 'dataBound',
                    }]
  }

然后,我使用与in previous link之前提到的相同的代码,并将该代码中的ID(#)替换为我的代码。但是,它不起作用。我来到his fiddle,我想那是因为他的PlainDs变量和$(“#category”)。kendoAutoComplete({...})或serverPaging,serverSorting或serverFiltering。因此,我对所有here都进行了评论,并且仍然可以正常工作。因此,基本上,我可以像第in his post一样从第49-81行编写代码。但是为什么它不起作用?为了给您提供信息,我用其名称调用网格,有时也给它一个类。但这是行不通的。如果我使用类或名称而不是ID,是否有问题?

1 个答案:

答案 0 :(得分:0)

此处的“不起作用” 范围太广,如果您可以更具体地说明不起作用的地方,我们可能会更好地指出。但是,我假设您知道如何显示网格等。因此基本上来说,为了使搜索正常工作,我通常在“搜索”按钮的click事件中包含以下内容:

var grid = $("#myGrid").data("kendoGrid");
var ds = grid.dataSource;
var searchVal = $("#search-reservation").val();

if ( searchVal ) {
    ds.filter({ 
        field: "reservation_id", operator: "eq", value: searchVal 
    });
} 
else {
    ds.filter({});
}