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

快来打我* 2022-07-29 11:53 147阅读 0赞

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

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

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

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

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

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="/images/20220724/206c687c2a7e48c9bd6fb37876c76406.png" />
    	            }
    	        }
    	    }
    	});
    }

后台代码:

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);

[despise.gif]: /images/20220724/206c687c2a7e48c9bd6fb37876c76406.png

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3+element-plus实现表格多选功能（可以清除选项或分页保留选项）

![在这里插入图片描述][f0ac22ebff664a4f853e243fa8243248.png] 如图所示，在实际开发中，数据量大的表格基本都添加上了分页功能，每个页面请

「爱情、让人受尽委屈。」/ 2024年03月26日 17:07/ 0 赞/ 52 阅读

相关【Vue】多选框保留勾选数据

> 目录 > > 一、前言 > > 二、reserve-selection > > 三、清除某些选中项 > > 四、细节 > > ------------------

Love The Way You Lie/ 2024年03月25日 21:02/ 0 赞/ 85 阅读

相关 ssm结合easyui做分页查询

本文仅以记录开发时所使用的ssm结合easyui方法实现分页效果，亲测成功。因本人才疏学浅，尚存在不少不足之处，如对你产生误导，还望见谅。 Controller层： /\\

阳光穿透心脏的1/2处/ 2024年02月18日 15:52/ 0 赞/ 95 阅读

相关 element-ui Pagination分页只保留上一页下一页

有时数据量太大，比如日志数据没必要查看很久之前的，所以把页数屏蔽，不给系统造成卡顿，最简单的方式就是隐藏总条数、页数。具体做法来看一下吧 <pagination

傷城~/ 2023年10月04日 19:41/ 0 赞/ 66 阅读

相关 Github清除历史提交，保留最新提交

简介有时我们为了本地的代码可回滚等各种原因，我们可能会在本地进行多次提交，但当我们提交到Github或者局内网的Gitlab时，Git会把我们本地所有的提交记录全部提交

淩亂°似流年/ 2023年06月25日 06:19/ 0 赞/ 47 阅读

相关 Gitlab/GitHub：迁移代码，并保留历史记录

文章目录 1. 需求 2. 实现第1步：从原地址克隆一份裸版本库 git clone --bare 解释第2步:

刺骨的言语ヽ痛彻心扉/ 2022年12月31日 15:20/ 0 赞/ 208 阅读

相关 Gitlab/GitHub：迁移代码，并保留历史记录

目录 1. 需求 2. 实现第1步：从原地址克隆一份裸版本库 git clone --bare 解释第2步: 以镜像推送的方式上传代码 git push -

秒速五厘米/ 2022年12月01日 01:18/ 0 赞/ 453 阅读

相关 easyui的datagrid使用以及分页

easyui对于开发桌面级的WEB应用界面确实十分方便，而且美观。这里着重记录一下datagrid的使用，以及通过前后端配合实现的超简单的数据分页查询方式。 easyui支持

怼烎@/ 2022年08月03日 13:55/ 0 赞/ 342 阅读

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

在EasyUI的使用中,我们经常碰到这样的情况,在查询某个信息的列表后,我们要从中选取多条记录.然后把这些记录拿来干啥干啥的..这里就不详细了, 问题一:由于分页是多次请求局

快来打我*/ 2022年07月29日 11:53/ 0 赞/ 148 阅读

相关 laravel5.7分页保留搜索条件

$articles = Article::with('category')->where($where)->orderBy('view', 'desc')->pagin

以你之姓@/ 2022年03月16日 06:26/ 0 赞/ 261 阅读