使用自定義過濾器重新生成WijGrid故障

Question

我在使用從ajax調用返回的json結果更新wijgrid時遇到了一些麻煩。 wijgrid似乎沒有重繪。這裏是培訓相關的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

嘗試設置wijgrid的ensureControl選項wijdatasource的負載情況下，或將其設置初始化時wijgrid：

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

作爲替代方案，而不是使用$ Ajax調用，我會建議你使用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(); 
    }