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

Question

我是一名新的软件开发人员。在我的新公司，我使用他们的框架进行编码。并且它使用剑道。我尝试为 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 会不会有问题？

Answer 1

“不工作”这个词在这里太宽泛了，如果你能更具体地说明什么是不工作，我们可能会更好地指出。但是我假设你知道如何让网格显示等等。所以基本上为了让搜索工作我通常在我的“搜索”按钮的点击事件中有这个：

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