关于翻页之后表格重新加载，之前选中的项丢失的问题处理

项目中使用jqGrid制作表格，当添加用户，欲添加用户分布在不同页，翻页选择所有欲添加用户，点击确定按钮，只有翻页后当前页已选择用户被添加到自定义用户列表，之前页已选择用户未添加到自定义用户列表，添加丢失。

问题解决需要：所有已选择用户（包括之前页选择的用户）均被添加到自定义用户列表。

问题原因是：翻页之后表格重新加载，所以导致之前选择的数据丢失。

问题优化：1、所有已选择用户（包括之前页选择的用户）均被添加到自定义用户列表。

　　　　　2、当来回切换页面时，所有选中的用户依然保持选中状态。

解决方案：

1、由于是由于reload导致数据丢失，所以创建全局变量将选中的项先存储起来：

var rowsObj = {},//声明一个全局变量——hash表，用于存储选中的用户信息对象
    rowsId = [];//声明一个全局变量——数组，用于存储选中的用户信息对象的id

如果选中，就将该用户id push到数组里，用户信息存入hash表里。

其中，$("#gridTable").getRowData(id)，这个方法用来获得某行的数据。它具有一个rowid参数，Jqgrid会根据这个rowid返回对应行的数据，返回的是name:value类型的数组。如果rowid未能被找到，则返回一个空数组；如果未设置rowid参数，则以数组的形式返回Grid的所有行数据。

var rowsObj = {},
    rowsId = [];
function getCheckedId(id) {
    rowsId.push(id);
    rowsObj[id] = $("#gridTable").getRowData(id);
}

function unCheckedId(id) {
    removeRowId(id,rowsId);
    rowsObj[id] = null;
}
/*选中用户之后再取消时，从存入的数组和hash表里删除对应的id和用户信息*/
function removeRowId(id,rowsId){
    for(var i = 0, l = rowsId.length; i < l; i++){
        if(id == rowsId[i]){
            rowsId.splice(i,1);
            break;
        }
    }
}

2、当来回切换页面时，所有选中的用户依然保持选中状态的处理：

其中，$("#gridTable").jqGrid("getRowData")方法以数组的形式返回Grid的所有行数据，与$("#gridTable").getRowData()方法不要参数时返回值一致。

先获取页面所有行数据，取其id循环与rowsId（之前选中的用户的id保存在里面）里的id比较，如果有就选中，没有就不选：解决切换页面保持选中的问题。

/*切换翻页之后仍然让之前选中的用户切回来的时候依然保持选中状态*/
function setCheckBox(){
    var checkBox = $("#gridTable").jqGrid("getRowData"),
        length = $("#gridTable").jqGrid("getRowData").length;
    for(var i = 0; i < length; i++){
        for(var j = 0, l = rowsId.length; j < l; j++){
            if(checkBox[i]["id"] == rowsId[j]){
                $("#jqg_gridTable_" + checkBox[i]["id"]).attr("checked","checked");
            }
        }
    }
}

3、最后，是上述方法该放哪里的问题：

getCheckedId(id)当然是选中用户时调用

unCheckedId(id)当然是取消选中用户时调用

setCheckBox()就需要在表格加载完成时就触发调用啦（这里就需要判断表格加载完成的问题，jqGrid有自己判断方法就是：gridComplete 或 loadComplete）

//加载表格
function GetGrid() {
    var $gridTable = $('#gridTable');
    $gridTable.jqGrid({
        url: "${basePath}/user/userAction_getUserJson.do",
        datatype: "json",
           height:500,
         561,
        shrinkToFit:true,
        multiselect:true, 
        colModel: [
            {index:'id',name:"id",label:'id',hidden :true} 
            ,{index:'userOnlyId',name:"userOnlyId",label:'userOnlyId',hidden :true} 
            <s:iterator value="#application.vrvSysTablesAttr['User'].columns">
                <s:if test='isList.name =="Y" '>
                   <s:if test='key == "name"  '>
              ,{index:'name',name:"name",label:'<s:text name="%{name}"></s:text>',align:'left',sortable:true,getPerWidth(0.2),
                  formatter:function(value,rec,index){
                      return "<a  href="javascript:void(0);" onclick="showUI(this,'"+index.id+"')" title='<s:text name="cems.public.details"></s:text>' >"+value+"</a>";
                } }    
              </s:if>
              <s:if test='key == "organizationName"  '>
              ,{index:'organizationName',name:"organizationName",label:'<s:text name="%{name}"></s:text>',align:'left',sortable:false,getPerWidth(0.2)}
              </s:if>
              <s:if test='key == "account"  '>
              ,{index:'account',name:"account",label:'<s:text name="%{name}"></s:text>',align:'left',sortable:true,getPerWidth(0.2)}
              </s:if>
              <s:if test='key == "registeTime"  '>
              ,{index:'registeTime',name:"registeTime",label:'<s:text name="%{name}"></s:text>',align:'left',sortable:true,getPerWidth(0.26)}
              </s:if>
              </s:if>
          </s:iterator>
        ],
        viewrecords: true,
        rowNum:30,
        pager: "#gridPager",
        sortname: 'registeTime',
        rownumbers: true,
        shrinkToFit: false,
        gridview: true,
        onSelectRow: function (rowid,status) {      //onSelectRow，选中表格某项时触发的方法
            if (status) {
                getCheckedId(rowid);
            } else {
                unCheckedId(rowid);
            }
        },
        gridComplete: function () {                 //gridComplete，表格加载完成时触发的方法
            $("[data-toggle='popover']").popover(); 
            setCheckBox();
        }
    });
    //查询事件
    $("#btn_Search").click(function () {
        var keyword= $("#txt_Keyword").val();
        if(keyword == ""){
            $gridTable.trigger("reloadGrid");
            return;
        } 
        $.doAjax({ 
             url:'${basePath}/user/userAction_getUserJson.do',
             data:{"keyword":keyword},
             success:function(responseText){
                var obj=eval('(' + responseText+ ')').rows;
                $gridTable.clearGridData();
                for ( var i = 0; i < obj.length; i++){  
                    $gridTable.jqGrid('addRowData', obj[i].id, obj[i]);
                }
             }
        });
    });


    //清空
    $("#btn_Reset").bind("click",function(){
       $("#hForm").find("input[type='text']").val("");
       $("#hForm .ui-select-text").text("");
    });

    //查询回车
    $('#txt_Keyword').bind('keypress', function (event) {
        if (event.keyCode == "13") {
            $('#btn_Search').trigger("click");
        }
    });
}

4、还有提交选中用户数据时需要注意一点：要将保存在hash表里的选中用户的信息添加，而不要用id获取其行数据的方式（这种方式如果翻页之后获取的之前页id行的数据仍是空）

//数据提交
function add() {
    var ids = rowsId;
    var keyValue = rowsId.join();
    var rows = [];
    if (keyValue) {
        for (var i = 0; i < ids.length; i++) {
            var rows = rowsObj[ids[i]];     //关键是这里要将保存在hash表里的选中用户的信息添加，而不要用id获取其行数据的方式（这种方式如果翻页之后获取的之前页id行的数据仍是空）
            var type=request("type");
            switch (type) {
            case "execute":
                 var allid= top.$.currentIframe().$('#target_userIn_table').jqGrid('getDataIDs');
                   if($.inArray(ids[i],allid)!=-1){ 
                       dialogMsg("添加的数据已存在！",0);
                       return false;
                   }else{
                top.$.currentIframe().$('#target_userIn_table').jqGrid('addRowData',ids[i], rows);}
                break;
            case "out":
                 var allid= top.$.currentIframe().$('#target_userOut_table').jqGrid('getDataIDs');
                   if($.inArray(ids[i],allid)!=-1){ 
                       dialogMsg("添加的数据已存在！",0);
                       return false;
                   }else{
                top.$.currentIframe().$('#target_userOut_table').jqGrid('addRowData',ids[i], rows);}
                break;
    
            default:
                break;
            };
        } 
        dialogClose();
    } else {
        dialogMsg('请选择用户！', 0);
    }
}

原提交处理方法，可以和我上面修改的对比下看差别在哪里：

/*
function add() {
  var ids = $("#gridTable").jqGridRowValue("id").split(",");
  var keyValue = $("#gridTable").jqGridRowValue("id");
  var rows = [];
  if (keyValue) {
    for (var i = 0; i < ids.length; i++) {
      var rows = $("#gridTable").getRowData(ids[i]);  //差别就在这里获取选中用户信息的方式
      var type=request("type");
      switch (type) {
      case "execute":
         var allid= top.$.currentIframe().$('#target_userIn_table').jqGrid('getDataIDs');
           if($.inArray(ids[i],allid)!=-1){ 
             dialogMsg("添加的数据已存在！",0);
             return false;
           }else{
        top.$.currentIframe().$('#target_userIn_table').jqGrid('addRowData',ids[i], rows);}
        break;
      case "out":
         var allid= top.$.currentIframe().$('#target_userOut_table').jqGrid('getDataIDs');
           if($.inArray(ids[i],allid)!=-1){ 
             dialogMsg("添加的数据已存在！",0);
             return false;
           }else{
        top.$.currentIframe().$('#target_userOut_table').jqGrid('addRowData',ids[i], rows);}
        break;
  
      default:
        break;
      };
    } 
    dialogClose();
  } else {
        dialogMsg('请选择用户！', 0);
    }
}
*/

5、至此问题解决啦。关于jqGrid制作表格插件的使用方法，后期有时间再记录，下面是处理页面全代码，后期可参考下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html><head>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${systemName}</title>
 <%@ include file="/WEB-INF/pages/public/commonNew.jspf"%>
<script>
var checkData = {};

$(function () {
    GetGrid();
    setHeight();
});


function setHeight(){
    //设置表格数据行区域的高度
    var _h=document.documentElement.clientHeight
    var _h1=_h-$("#top").outerHeight()-$("#bottom").outerHeight()-$("#gridPager").outerHeight()-50;
    $('#gridTable').jqGrid('setGridHeight',_h1); //设置表格数据行区域的高度，不包括分页区域和表头的高度
}

//加载表格
function GetGrid() {
    var $gridTable = $('#gridTable');
    $gridTable.jqGrid({
        url: "${basePath}/user/userAction_getUserJson.do",
        datatype: "json",
           height:500,
         561,
        shrinkToFit:true,
        multiselect:true, 
        colModel: [
            {index:'id',name:"id",label:'id',hidden :true} 
            ,{index:'userOnlyId',name:"userOnlyId",label:'userOnlyId',hidden :true} 
            <s:iterator value="#application.vrvSysTablesAttr['User'].columns">
                <s:if test='isList.name =="Y" '>
                   <s:if test='key == "name"  '>
              ,{index:'name',name:"name",label:'<s:text name="%{name}"></s:text>',align:'left',sortable:true,getPerWidth(0.2),
                  formatter:function(value,rec,index){
                      return "<a  href="javascript:void(0);" onclick="showUI(this,'"+index.id+"')" title='<s:text name="cems.public.details"></s:text>' >"+value+"</a>";
                } }    
              </s:if>
              <s:if test='key == "organizationName"  '>
              ,{index:'organizationName',name:"organizationName",label:'<s:text name="%{name}"></s:text>',align:'left',sortable:false,getPerWidth(0.2)}
              </s:if>
              <s:if test='key == "account"  '>
              ,{index:'account',name:"account",label:'<s:text name="%{name}"></s:text>',align:'left',sortable:true,getPerWidth(0.2)}
              </s:if>
              <s:if test='key == "registeTime"  '>
              ,{index:'registeTime',name:"registeTime",label:'<s:text name="%{name}"></s:text>',align:'left',sortable:true,getPerWidth(0.26)}
              </s:if>
              </s:if>
          </s:iterator>
        ],
        viewrecords: true,
        rowNum:30,
        pager: "#gridPager",
        sortname: 'registeTime',
        rownumbers: true,
        shrinkToFit: false,
        gridview: true,
        onSelectRow: function (rowid,status) {
            if (status) {
                getCheckedId(rowid);
            } else {
                unCheckedId(rowid);
            }
        },
        gridComplete: function () {
            $("[data-toggle='popover']").popover(); 
            setCheckBox();
        }
    });

    //查询事件
    $("#btn_Search").click(function () {
        var keyword= $("#txt_Keyword").val();
        if(keyword == ""){
            $gridTable.trigger("reloadGrid");
            return;
        } 
        $.doAjax({ 
             url:'${basePath}/user/userAction_getUserJson.do',
               data:{"keyword":keyword},
             success:function(responseText){
                var obj=eval('(' + responseText+ ')').rows;
                $gridTable.clearGridData();
                for ( var i = 0; i < obj.length; i++){    
                    $gridTable.jqGrid('addRowData', obj[i].id, obj[i]);
                }
             }
          });
    });
    
   
/*     清空 */
   $("#btn_Reset").bind("click",function(){
       $("#hForm").find("input[type='text']").val("");
       $("#hForm .ui-select-text").text("");
   });
    
    //查询回车
    $('#txt_Keyword').bind('keypress', function (event) {
        if (event.keyCode == "13") {
            $('#btn_Search').trigger("click");
        }
    });
}
var rowsObj = {},
    rowsId = [];
function getCheckedId(id) {
    rowsId.push(id);
    rowsObj[id] = $("#gridTable").getRowData(id);
}

function unCheckedId(id) {
    removeRowId(id,rowsId);
    rowsObj[id] = null;
}

function removeRowId(id,rowsId){
    for(var i = 0, l = rowsId.length; i < l; i++){
        if(id == rowsId[i]){
            rowsId.splice(i,1);
            break;
        }
    }
}
/*切换翻页之后仍然让之前选中的用户切回来的时候依然保持选中状态*/
function setCheckBox(){
    var checkBox = $("#gridTable").jqGrid("getRowData"),
        length = $("#gridTable").jqGrid("getRowData").length;
    for(var i = 0; i < length; i++){
        for(var j = 0, l = rowsId.length; j < l; j++){
            if(checkBox[i]["id"] == rowsId[j]){
                $("#jqg_gridTable_" + checkBox[i]["id"]).attr("checked","checked");
            }
        }
    }
}

function showUI(obj ,id){
     dialogOpen({
         id: "details",
         title: $(obj).attr("title"),
         url: "/user/userAction_showUI.do?userId="+id,
          "520px",
         height: "630px",
         btn: null
     });
}
function getcellTitle(value){
    var objE = document.createElement("div"); 
    objE.innerHTML = value; 
    return objE.childNodes[0].innerHTML; 
}
//数据提交
function add() {
    var ids = rowsId;
    var keyValue = rowsId.join();
    var rows = [];
    if (keyValue) {
        for (var i = 0; i < ids.length; i++) {
            var rows = rowsObj[ids[i]];        //关键是这里要将保存在hash表里的选中用户的信息添加，而不要用id获取其行数据的方式（这种方式如果翻页之后获取的之前页id行的数据仍是空）
            var type=request("type");
            switch (type) {
            case "execute":
                 var allid= top.$.currentIframe().$('#target_userIn_table').jqGrid('getDataIDs');
                   if($.inArray(ids[i],allid)!=-1){ 
                       dialogMsg("添加的数据已存在！",0);
                       return false;
                   }else{
                top.$.currentIframe().$('#target_userIn_table').jqGrid('addRowData',ids[i], rows);}
                break;
            case "out":
                 var allid= top.$.currentIframe().$('#target_userOut_table').jqGrid('getDataIDs');
                   if($.inArray(ids[i],allid)!=-1){ 
                       dialogMsg("添加的数据已存在！",0);
                       return false;
                   }else{
                top.$.currentIframe().$('#target_userOut_table').jqGrid('addRowData',ids[i], rows);}
                break;
    
            default:
                break;
            };
        } 
        dialogClose();
    } else {
        dialogMsg('请选择用户！', 0);
    }
}
/*
function add() {
    var ids = $("#gridTable").jqGridRowValue("id").split(",");
    var keyValue = $("#gridTable").jqGridRowValue("id");
    var rows = [];
    if (keyValue) {
        for (var i = 0; i < ids.length; i++) {
            var rows = $("#gridTable").getRowData(ids[i]);
            var type=request("type");
            switch (type) {
            case "execute":
                 var allid= top.$.currentIframe().$('#target_userIn_table').jqGrid('getDataIDs');
                   if($.inArray(ids[i],allid)!=-1){ 
                       dialogMsg("添加的数据已存在！",0);
                       return false;
                   }else{
                top.$.currentIframe().$('#target_userIn_table').jqGrid('addRowData',ids[i], rows);}
                break;
            case "out":
                 var allid= top.$.currentIframe().$('#target_userOut_table').jqGrid('getDataIDs');
                   if($.inArray(ids[i],allid)!=-1){ 
                       dialogMsg("添加的数据已存在！",0);
                       return false;
                   }else{
                top.$.currentIframe().$('#target_userOut_table').jqGrid('addRowData',ids[i], rows);}
                break;
    
            default:
                break;
            };
        } 
        dialogClose();
    } else {
        dialogMsg('请选择用户！', 0);
    }
}
*/
</script>
<style type="text/css">
 .mSearchdiv{  height: 30px;
     250px;
    border: 1px solid #D4D4D4;
    border-radius: 50px;
    background: #EEEEEE;
    margin: 5px;
    }
      #txt_Keyword{
        200px;
    height: 28px;
    position: absolute;
    border: 0;
    left: 40px;
    outline: none;
    background-color: #EEEEEE;
    }
    .mSearchdiv_btn{
       position: absolute;
    left: 240px;
    top: 10px;
    color: #999;
    font-size: 14px;
    }
     #btnRow{float:left;margin:5px 0 0 20px;}
</style>
</head>
<body>
<center>

<div id="top" class="row ">
    <div class="col-md-3 pull-left">
       <div class="mSearchdiv">
            <input id="txt_Keyword" type="text" class="" placeholder="请输入关键字">
            <span class="mSearchdiv_btn" id="btn_Search"><i class="fa fa-search"></i></span>
        </div>
       </div>
   </div>

<div class=" row gridPanel">
    <table id="gridTable" tabindex="0" cellspacing="0" cellpadding="0" border="0" role="grid" aria-multiselectable="false" aria-labelledby="gbox_gridTable" class="ui-jqgrid-btable" style=" 1558px;"></table>
</div>
<div id="gridPager"></div>
<input name="__RequestVerificationToken" type="hidden" value="hZA3j2NR-pwjIg7pEovoH9K50JoL8SFtAva8emZtCGZuoCGlnXg8GOHtl0C-xZN-Ac54EKDECT0eGZO2t8s3_3I7vHMufx9dAasiN4ujXpE1">
<div id="bottom" class="row" >
<div id="btnRow">
    <a class="btn btn-primary" onclick="add()" style="margin-top: 7px">确定</a>
    <a class="btn btn-primary" onclick="dialogClose()" style="margin-top: 7px">取消</a>
    </div>
</div> 
</center>
</body>
</html>