jqGrid 翻页行保持选中

最新推荐文章于 2019-11-23 19:07:50 发布

置顶 jasonlfy

最新推荐文章于 2019-11-23 19:07:50 发布

阅读量1.4k

点赞数 1

文章标签： jqgrid 分页

本文链接：https://blog.csdn.net/jasonlfy/article/details/78849368

版权

jgGrid表格插件按照正常情况下，设置multiselect:true,，就可以实现多选。但是当数据分页显示时，翻页后，之前已经选择的就会失效。

这里通过设置一个全局变量(checkBox),缓存已经选中的数据项，来实现翻页后保持选中。再定义一个全局全局变量(cPage),重新加载的时候清空checkBox,在翻页事件中运用这个cPage变量;

<html>
  <head>
    <title>jqGrid 实例</title>
  </head>
  <body>
    ···代码省略···
    <table id="list1"></table>
    <div id="pager1"></div>
    ···代码省略···
  </body>
</html

function pageInit(){  
  jQuery("#list1").jqGrid({  
        url : ctx+'/JSONData',  
        datatype : "json",  
        colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],  
        colModel : [   
                     {name : 'id',index : 'id',width : 55},   
                     {name : 'invdate',  index : 'invdate',width : 90},   
                     {name : 'name',index : 'name',width : 100},   
                     {name : 'amount',index : 'amount',  width : 80,  align : "right"},   
                     {name : 'tax',index : 'tax',width : 80,align : "right"},   
                     {name : 'total',index : 'total',width : 80,align : "right"},   
                     {name : 'note',index : 'note',width : 150,sortable : false}   
                   ],  
        rowNum : 10,  
        rowList : [ 10, 20, 30 ],  
        pager : '#pager13',  
        sortname : 'id',  
        viewrecords : true,  
        sortorder : "desc",  
        multiselect : true,  
        multikey : "ctrlKey",  
        caption : "翻页行保持选中状态",  
        editurl : "xxxxxx.php"  ,

onPaging:function (pgButton) {  
                  cPage++; //翻页事件  
                },

loadComplete : function(data) {  
              if (cPage == 0) {  
                  checkBox = [];//每次加载清空选中状态  
              }  
              cPage = 0;  
              var rowArr = data.rows;  
              if (checkBox.length > 0) {  
                  for (var i = 0; i < rowArr.length; i++) {  
                      for (var j = 0; j < checkBox.length; j++) {  
                          if (rowArr[i].id == checkBox[j].id) {  
                              $("#list1").jqGrid('setSelection', rowArr[i].id);  
                              break;  
                          }  
                      }  
                  }  
              }  
          },

onSelectRow:function(rowId,status){  
                    if(status){  
                      if (checkBox.indexOf(rowId) == -1){  
                            checkBox.push(rowId);  
                        }  
                    }else{  
                            deleteCheckBox(rowId);  
                    }  
                  }

function deleteCheckBox(rowId){  
        for(var i = 0; i < checkBox.length; i++){  
            if (checkBox[i].rfqNo == rowId){  
                //根据索引值删除checkBox中的数据  
                checkBox.splice(i,1);  
            }  
        }  
    }

jasonlfy

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jqGrid 翻页行保持选中

jgGrid表格插件按照正常情况下，设置multiselect:true,，就可以实现多选。但是当数据分页显示时，翻页后，之前已经选择的就会失效。这里通过设置一个全局变量(checkBox),缓存已经选中的数据项，来实现翻页后保持选中。再定义一个全局全局变量(page),重新加载的时候清空checkBox,在翻页事件中运用这个page变量; jqGrid 实例
复制链接

扫一扫