javascript - 如果不卸载网格，JqGrid 重新加载将无法正常工作

Question

我正在使用 jqgrid 版本 4.5.2。我在网格外有一个 Angular 色列表组合框，更改选项后我需要重新加载网格。下面是我的网格的定义。

var finalUrl='';

 var queueStatus=jQuery('#queueStatus option:selected').val();

finalUrl= "http://localhost:8080/ui/paw/loadworkflowqueuedata.raws?selRole= "+ selectedRole+"&"+queueStatus;

 var queueStatus=jQuery('#queueStatus option:selected').val();
 finalUrl= "http://localhost:8080/ui/paw/loadworkflowqueuedata.raws?timezone="+&selRole="+ selectedRole+"&"+queueStatus;
 jq("#grid").jqGrid('GridUnload');

 jq("#grid").jqGrid({       
 url:finalUrl,   
 ajaxGridOptions: {cache: false},//added the option to always reload the grid and not to cache the result.
 datatype: 'json',    
 mtype: 'GET', 
 colNames:[ 'Requestor Name'],       
 colModel:[
  {name:'requestor',index:'requestor',sortable: true, width:100,editable:false, editrules:{required:true}, editoptions:{size:10}}
  ],
   postData: {     
   },    
   height: 'auto',       
   autowidth: true,    
   rownumbers: true,       
   pager: '#pager',       
   viewrecords: true,       
   sortorder: "asc",       
   emptyrecords: "Empty records",      
   loadonce: true,
   rowNum:20,
   ignoreCase: true,
   prmNames: {
       nd: null
   },   
   loadComplete: function() {
    },

   jsonReader : {    
       root: "rows",           
       repeatitems: false,
       page:"page",           
       total: "total",           
       records: "records", 
       cell: "cell",           
       id: "id"      
       }   
   });

 jQuery("#grid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search: false, refresh:true})
   .navButtonAdd('#pager',{caption:"Export All",buttonicon:"ui-icon-document",onClickButton: function(){window.open(excelUrl,'_self');},position:"last"});
 jQuery("#grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn",ignoreCase: true });

只有当我保留以下语句时，上面的网格才能正常工作(在更改 Angular 色列表组合框时正确刷新)。

 jq("#grid").jqGrid('GridUnload');

如果我删除上面的语句并重新加载页面，那么第一次网格加载正确但之后如果我更改我的 Angular 色列表组合框中的选项，它无法刷新网格数据，也不会抛出任何错误.

我可以知道为什么我需要卸载网格进行刷新吗？有没有一种方法可以在不卸载网格的情况下刷新网格？我是否遗漏了网格定义中的任何选项，这就是网格重新加载不起作用的原因？如果需要解决上述问题的更多详细信息，请告诉我。

Answer 1

您使用 loadonce: true 选项，这非常有助于一次将所有服务器数据加载到客户端，然后在客户端处理数据(分页、过滤等) 不与服务器进行任何通信。为此，jqGrid 在第一次加载数据后将网格的 datatype 参数更改为 "local"。因此，您需要将 datatype 参数的值重置回 "json" before 触发 reloadGrid 事件。

对应的代码会是这样

// create the initial grid
jQuery("#grid").jqGrid({
    ...
    url: finalUrl,   
    datatype: 'json',
    loadonce: true,
    ...
 });

 jQuery('#queueStatus').change(function () {
     jQuery("#grid").jqGrid("setGridParam", {
         datatype: "json",
         url: "basePartOfUrl?" + jQuery.param({
             timezone: "blabla",
             selRole: jQuery('#queueStatus').val();
         })
     }).trigger("reloadGrid");
 });

我在上面使用 jQuery.param而不是直接在字符串中构造参数，使代码更正确。或者，应该使用 encodeURIComponent 构造附加到 URL 的参数值。很明显queueStatus如果没有空格，没有特殊字符等可以直接使用，但是encodeURIComponent或者jQuery.param的用法> 仍然被推荐并使代码独立于字符串参数的值工作。