SlickグリッドがAjaxコールでリフレッシュされない

Question

ページロードでロードされるこのスクリックグリッドがあります。今私は、（私は新しいデータを取得するためには、ajax呼び出しを使用しています）チェックボックスのクリック上の新しいデータに置き換えられるように滑らかなグリッド上のデータとチェックボックスは、その値を保持する必要があります。私はサーバーが新しいデータを与えるが、滑らかなグリッドは更新されず、チェックボックスはページの読み込み時に状態（つまりチェック済み）を保持しないことがわかります。

JSPの：

<c:if test="${info == null or empty info}"> 
        <div id="result" class="ui-widget" style="float:center"> 
        <strong>No results found !</strong> 
        </div> 
       </c:if> 

スリックグリッド：

var dataView; 
     var grid; 
     var data = []; 
     var options = { 
     enableCellNavigation: true, 
     showHeaderRow: true, 
     headerRowHeight: 40, 
     explicitInitialization: true, 
     enableColumnReorder: false, 
     multiColumnSort: true, 
     defaultSortAsc:false, 

     }; 
     var columns = []; 
     var columnFilters = {}; 
     { 
     .... 
     ... 

     } 


      $(function() { 

       var holder=new Array(); 
       var i=0; 
       var d = (data[i] = {}); 
       <c:forEach var="message" items="${info}" > 
       holder[i]={ 
          id: i, 
          remove: '<c:out value="${message.id}"/>' , 
          name: '<c:out value="${message.name}"/>', 
          status: '<c:out value="${message.status}"/>' 
          } 
         i++; 
        </c:forEach> 

      dataView = new Slick.Data.DataView(); 
      grid = new Slick.Grid("#rulesGrid", dataView, columns, options); 
      var pager = new Slick.Controls.Pager(dataView, grid, $("#rulesPager")); 

      grid.onSort.subscribe(function (e, args){ 
      dataView.fastSort(args.sortCol.field, args.sortAsc); 
      grid.render(); 
      }); 


      dataView.onRowCountChanged.subscribe(function (e, args) { 
       grid.updateRowCount(); 
       grid.invalidateRows(args.rows);//new change 
       grid.render(); 
      }); 



      grid.init(); 
      dataView.beginUpdate(); 
      dataView.setItems(holder); 
      dataView.setFilter(filter); 
      dataView.endUpdate(); 
      dataView.refresh(); 
      grid.invalidate(); 
      grid.updateRowCount(); 
      grid.render(); 
      }); 

Ajaxのコール：あなたのAJAX呼び出しで

function PopulateGrids(){ 
    var showInactive,showSubmitted; 
    if($("#showInactive").is(':checked')){ 
     showInactive=true; 
    } 
    else if($("#showSubmitted").is(':checked')){ 
     showSubmitted=true; 
    } 
    else if($("#showSubmitted").is(':checked') && $("#showInactive").is(':checked')) 
     { 
     showInactive=true; 
     showSubmitted=true; 
     } 


    jQuery.ajax({ 
     async : false, 
     cache : false, 
     url : "/application/createNewResult/details?showInactive="+encodeURI(showInactive)+"&showSubmitted="+encodeURI(showSubmitted) , 
     type : 'GET', 
     contentType: "application/json; charset=utf-8", 
     dataType : 'json', 
     success : function() { 
      alert("showInactive: "+showInactive+" show submitted: "+showSubmitted); 
      console.log("info:",'<c:out value="${info}"/>'); 
      if(showInactive) 
       $("#showInactive").prop('checked', true); 
      else if(showSubmitted) 
       $("#showSubmitted").prop('checked', true);   
     }, 
     complete : function(request, status) { 
      if (status == undefined || status == "error" || status == "parsererror") { 
       alert('error in searching Invalid or submitted records: '+status); 
       window.location.href="/application/createNewResult/"; 
      } else if (status != 'success'){ 
       alert('error in searching Invalid or submitted records: '+status); 

      } 

     } 
    }); 
} 

Answer 1

、あなたの大成功サーバーから

success: function(result) {... 

、あなたは、データがその「結果」パラメータ（グリッド用の新しいデータ）に戻って来るべきかを定義し、使用します。■コールバック関数は次のように、「結果」パラメータを含めることができますjavascriptを使用すると、元のデータを新しいデータで置き換えることができます。

Answer 2

私は、サーバーからすべてのデータを取得し、チェックボックスのイベントに新しいデータ（意図したデータ）を表示することで、これを行う別の方法を見つけました。

$("#showInactive").change(function(e,args) { 

      if(this.checked) { 

         var holder=new Array(); 
          var i=0; 
          var d = (data[i] = {}); 
          <c:forEach var="message" items="${info}"> 
           holder[i]={ 
             id: i, 
             remove: '<c:out value="${message.Id}"/>' , 
             rule: '<c:out value="${message.Name}"/>', 
             status: '<c:out value="${message.status}"/>' 
             } 
            i++; 
           </c:forEach> 
          grid.init(); 
           dataView.beginUpdate(); 
           dataView.setItems(holder); 
           dataView.endUpdate(); 
           dataView.refresh(); 
           grid.invalidate(); 
           grid.updateRowCount(); 
           grid.render(); 
          grid.render(); 
        });