Устранение неполадок WijGrid с помощью пользовательского фильтра

Question

У меня возникли проблемы с обновлением wijgrid с использованием результата json, полученного от вызова ajax. Виджрид, похоже, не перерисовывается. Вот Релевент JavaScript/JQuery:

$(function() { 
    var datasource = new wijdatasource({ 
     data: [{"Id":1,"Name":"Sidney","Type":"Engineer"},{"Id":4,"Name":"Mavis","Type":"Student"},{"Id":5,"Name":"Betty","Type":"Student"},{"Id":80,"Name":"Taylor","Type":"Student"},{"Id":92,"Name":"Graham","Type":"Student"},{"Id":94,"Name":"Belle","Type":"Student"},{"Id":100,"Name":"Terrence","Type":"Student"},{"Id":106,"Name":"William","Type":"Student"},{"Id":108,"Name":"Synthia","Type":"Student"},{"Id":109,"Name":"Lucious","Type":"Customer"},{"Id":116,"Name":"Leonard","Type":"Student"},{"Id":119,"Name":"Katy","Type":"Student"},{"Id":122,"Name":"Sarah","Type":"Student"},{"Id":127,"Name":"Amy","Type":"Student"},{"Id":178,"Name":"Carl","Type":"Student"}], 
     reader: new wijarrayreader([ 
      { name: 'Id', mapping: 'Id' }, 
      { name: 'Name', mapping: 'Name' }, 
      { name: 'Type', mapping: 'Type' } 
     ]) 
    }); 

    $('#ClientTable').wijgrid({ 
     allowSorting: true, 
     allowPaging: true, 
     pageSize: 10, 
     data: datasource, 
     columns: [ 
      { visible: false }, 
      { 
       cellFormatter: function (args) { 
        var wg = $.wijmo.wijgrid, 
        row = args.row; 

        if ((row.type & wg.rowType.data) && (row.state === wg.renderState.rendering)) { 
         args.$container.append($('<a href="/Client/Update/' + row.data.Id + '">' + row.data.Name + '</a>')); 
         return true; 
        } 
       } 
      }, 
      {} 
     ] 
    }); 

    $('#pageSize').bind('change', function (e) { 
     $('#ClientTable').wijgrid('option', 'pageSize', parseInt($(e.target).val())); 
    }); 

    $('#filterBy').keyup(function (e) { 
     var filter = $('#filterBy').val(); 
     if (typeof filter == 'string' && filter.length > 1) { 
      $.ajax({ 
       url: '/Home/MemberAsyncResults', 
       async: true, 
       traditional: true, 
       type: 'GET', 
       data: 
       { 
        filter: filter 
       }, 
       success: function (response) { 
        //       datasource.data = response; 
        //       datasource.read(); 
        datasource.load(response, false); 
        $('#ClientTable').wijgrid('ensureControl', true); 
        $('#ClientTable').wijgrid('doRefresh'); 
       }, 
       error: function (e) { 
        var breakOnThisLine = 1; 
       } 
      }); 
     } 
    }); 
}); 

Кроме того, здесь Релевент HTML:

<label for="pageSize">Page Size</label> 
<select id="pageSize"> 
    <option>10</option> 
    <option>25</option> 
    <option>50</option> 
    <option>100</option> 
</select> 
<label for="pageSize">Filter By</label> 
<input type="text" id="filterBy" /> 
<table id="ClientTable"></table> 

Когда точка останова устанавливается внутри метода успеха вызова AJAX, возвращается правильные данные с сервера. Тем не менее, код для повторного заполнения источника данных элемента управления wijgrid или для реиндексации элемента управления не должен быть прав ...

В соответствующей заметке я не был уверен, что имя или свойства отображения wijarrayreader для. Я думаю, что wijarrayreader настроен правильно, но я только сделал образованное предположение, основанное на некоторых примерах.

Большое спасибо заранее!

Answer 1

Попробуйте установить опцию ensureControl из wijgrid в загруженном случае wijdatasource, или установить его при инициализации wijgrid:

$(‘#ClientTable’).wijgrid({ 
    allowSorting: true, 
    allowPaging: true, 
    pageSize: 10, 
    ensureControl : true 
}); 

В качестве альтернативы, вместо того, чтобы с помощью вызова $ АЯКС, я хотел бы предложить вам использовать wijhttpproxy виджет, который полезен в этих сценариях. Пожалуйста, обратитесь к следующей ссылке для получения дополнительной информации: http://wijmo.com/wiki/index.php/Datasource#proxy

Пожалуйста, обратите внимание на код ниже:

$(document).ready(function() { 

     var superPanelRefreshed = false; 
     var proxy = new wijhttpproxy({ 
      url: "http://ws.geonames.org/searchJSON", 
      dataType: "jsonp", 
      data: { 
       featureClass: "P", 
       style: "full", 
       maxRows: 12, 
       name_startsWith: 'ab' 
      }, 
      key: 'geonames' 
     }); 
     var myReader = new wijarrayreader([{ 
      name: 'label', 
      mapping: function (item) { 
       return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName 
      } 
     }, { 
      name: 'value', 
      mapping: 'name' 
     }, { 
      name: 'selected', 
      defaultValue: false 
     }]); 

     var input = $('#testinput'); 

     datasource = new wijdatasource({ 
      reader: myReader, 
      proxy: proxy, 
      loading: function() { 

      }, 
      loaded: function (data) { 

      } 
     }); 

     $("#grid").wijgrid({ 
      data: datasource, 
      ensureControl: true 
     }); 

     datasource.load(); 
    }); 

    function loadRemoteData() { 
     datasource.proxy.options.data.name_startsWith = $('#testinput').val(); 
     datasource.load(); 
    }