Фильтрация столбцов jqxGrid с jQuery - PullRequest
Новая
       22

Фильтрация столбцов jqxGrid с jQuery

0 голосов
/ 19 июня 2020

У меня есть jqxGrid, и я хочу динамически фильтровать столбец, когда я выбираю ключевое слово в списке и нажимаю кнопку.

HTML страница, например: 

<select id="currsel">
  <option value=""> </option>
  <option value="USD">USD</option>
  <option value="EUR">EUR</option>
</select>

<input type="button" id="btn" value="OK"><br>
<div id="invoicing" style="display:none;"></div>

JS страница выглядит так: 

$(document).ready(function () { 
 $("#btn").click(function(){
    display();
    filterTable();
 });

var filterTable = function()
{
    var curr = $("#currsel").val();
    if(curr!="") {
        var filtergroup = new $.jqx.filter();
        var filter1 = filtergroup.createfilter('stringfilter', curr, 'contains');
        filtergroup.addfilter(1, filter1);
        $("#invoicing").jqxGrid('addfilter', 'currency', filtergroup);
        $("#invoicing").jqxGrid('applyfilters');
    }
}
});

function display() 
{

  var sample = '[{"number":"00125", "date":"14/02/2019", "amount":"30000", "currency":"EUR", 
   "status":"Open"},{"number":"00126", "date":"18/02/2019", "amount":"50000", "currency":"USD", 
   "status":"Locked"}]';

  var source = { 
     datatype: "json",
     datafields: [
          { name: 'number' },
          { name: 'date'},
          { name: 'amount' },
          { name: 'currency' },
          { name: 'status' }
      ],
      localdata: sample
   };

   var dataAdapter = new $.jqx.dataAdapter(source);

   var columns = [
      { text: 'Invoice', datafield: 'number', width: '6%', cellsalign: 'center', align: 'center' },
      { text: 'Date', datafield: 'date', width: '6%', cellsalign: 'center', align: 'center' },
      { text: 'Amount', datafield: 'amount', width: '10%', cellsalign: 'center', align: 'center' },
      { text: 'Curr', datafield: 'currency', width: '3%', cellsalign: 'center', align: 'center' },
      { text: 'Status', datafield: 'status', width: '7%', cellsalign: 'center', align: 'center' }
    ];

    $("#invoicing").jqxGrid({
       altrows: true,
       columns: columns,
       columnsheight: 40,
       filterable: true,
       pageable: true,
       pagesize: 10,
       autoheight: true,
       sortable: true,
       source: dataAdapter,
       width: '100%'
    });

     $("#invoicing").show();
  }

Когда я выбираю ключевое слово в списке и нажимаю кнопку, отображается сетка, но без фильтрации столбца. В консоли браузера появляется следующее сообщение: 

 Unable to set property 'filter' of undefined or null reference

Но когда я снова нажимаю кнопку (без перезагрузки страницы), применяется фильтр. Вы можете помочь мне ?

...