使用自定义过滤器重新生成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(); 
    }