Как сделать поисковый ввод в сетке кендо? - PullRequest
Новая
       17

Как сделать поисковый ввод в сетке кендо?

0 голосов
/ 04 марта 2019

Я новый разработчик программного обеспечения.В моей новой компании я использую их фреймворк для написания кода.И это с помощью кендо.Я попытался создать поле поиска для Kendo Grid, чтобы найти конкретную информацию в этой сетке.Я попробовал этот метод , но он не работает.Честно говоря, я не понимаю, как использовать «транспортные» вещи.Я вызываю 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',
                    }]
  }

Затем я использовал тот же код, который упоминал ранее в предыдущей ссылке ,и замените идентификатор (#) в этом коде на мой.Но это не сработает.Я пришел к его скрипке и подумал, что это из-за его переменной PlainDs и $ ("# category"). KendoAutoComplete ({...}) или serverPaging, serverSorting или serverFiltering.Итак, я комментирую все это здесь и все еще работает должным образом.В общем, я могу просто написать код из строки 49 - 81, как в его посте .Но почему это не работает?Для вашей информации я называю сетку с ее названием или иногда даю ей класс.Но это не сработает.Это проблема, если я использую класс или имя вместо ID?

1 Ответ

0 голосов
/ 05 марта 2019

Термин «Не работает» здесь слишком широк, если вы можете быть более точным в отношении того, что не работает, мы можем определить лучше.Однако я предполагаю, что вы знаете, как заставить сетку отображаться и так далее.так что, в основном, чтобы поиск работал, у меня обычно это происходит в событии нажатия моей кнопки «Поиск»: 

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