EasyUI体验-分页多选,选项保留,以及历史记录相结合的保留

在EasyUI的使用中,我们经常碰到这样的情况,在查询某个信息的列表后,我们要从中选取多条记录.然后把这些记录拿来干啥干啥的..这里就不详细了,

问题一:由于分页是多次请求局部刷新,导致在上一页或下一页选的记录,在跳转了一个页面后就不起作用了

问题二:我操作完一次后,我又再次来操作,我根本不知道,原本哪些数据已经操作了.最好能够显示出来..

带着上面两个问题,我上网上搜索了一翻,答案很多,可是很多朋友的答案不知道是copy来的?还是自己改装后,连测都没测,就直接分享了,导致花了好久才找出问题...

好了,不多说了,上代码,做个记录也方便下次自己使用,和有该需求的同道:

jsp页面代码:(有些方法可以提取出来,我暂时就直接放这了)

var proIds =[];    <span style="font-family:SimHei;">//设置全局数组,用来存储选择的记录值</span>var proIdsStr="<%=request.getAttribute("proIds")%>";     //后台查出的,已经操作的记录if(proIdsStr){         var proIdsArray=proIdsStr.split(","); for (var i = 0; i < proIdsArray.length-1; i++){     proIds.push(proIdsArray[i]);              }}//翻页后如何给checkbox赋值呢？关键就在这里，datagrid重写了$.fn.datagrid.defaults.view的onAfterRender事件//因此在datagrid的view事件里绑定这个函数就OK了。onAfterRender事件是当easyui的元素渲染完毕后执行的事件，//在这里会调用onAfterRender函数来实现对checkbox的赋值 var fileview = $.extend($.fn.datagrid.defaults.view, { onAfterRender: function (target) { for (var i = 0; i < proIds.length; i++) {        $('#checkProductDataList').datagrid('selectRecord', proIds[i]); //根据id选中行     }}});//检测选中的记录,或者要删除的记录在原数组中是否存在function checkExist(proId) {    for (var i = 0; i < proIds.length; i++) {        if (proIds[i] == proId) return i;    }    return -1;}//初始化表格数据function datagridInit(){$('#checkProductDataList').datagrid({idField:'proId',    //这个地方一定要写,会影响到,已经选取的记录的翻页过程中的显示url:'${frontPath}/product/getPageList.action?proStatus=1&clfId=<%=request.getAttribute("clfId")%>',method:'get', rownumbers:true,//显示编号pagination:true,//显示分页  pageSize:20,//分页大小  pageList:[20,30,50,100],//每页的个数fitColumns:true,  //True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。        onCheck:function(rowIndex, rowData){      //单个复选框被选中时触发    var rows = $('#checkProductDataList').datagrid('getChecked');    for (var i = 0; i < rows.length; i++) {            if (checkExist(rows[i].proId) == -1) {        //这里-1,因为后台传输的数据最后多带了个逗号,在这里-1可以少循环一次,可以根据自己情况优化                proIds.push(rows[i].proId);            }        }    },    onCheckAll:function(){                        //批量复选框选中时触发    var rows = $('#checkProductDataList').datagrid('getChecked');    for (var i = 0; i < rows.length; i++) {            if (checkExist(rows[i].proId) == -1) {                proIds.push(rows[i].proId);            }        }    },    onUncheck:function(rowIndex, rowData){       //单记录复选框取消时触发    var k = checkExist(rowData.proId);        if (k != -1) {        proIds.splice(k, 1);        }    },    onUncheckAll:function(rows){                //批量复选框取消选中时触发    for (var i = 0; i < rows.length; i++) {            var k = checkExist(rows[i].proId);            if (k != -1) {            proIds.splice(k, 1);      //这个地方一定注意,网上很多都是写的splice(i,1)<img alt="鄙视" src="http://static.blog.csdn.net/xheditor/xheditor_emot/default/despise.gif" />            }        }    }});}

后台代码:

Product tempProduct=new Product();tempProduct.setProClassification(clfId);tempProduct.setProIstopselect("1");List<Product> productList=iProductService.selectList(tempProduct);StringBuilder proIds=new StringBuilder();for (Product product : productList) {proIds.append(product.getProId()+",");}request.setAttribute("proIds", proIds);