频道导航

jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码

2019-01-05 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1、先给出问题解决后的代码

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> 添加优惠券步骤2 <Meta http-equiv="pragma" content="no-cache"> <Meta http-equiv="cache-control" content="no-cache"> <Meta http-equiv="expires" content="0"> <Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

1：填写优惠券基本信息 —————————— 2：选择优惠券中的商品 —————————— 3：保存并生成优惠券

添加优惠券步骤2">

2、页面大概的样子

3、问题及解答，问题层层递进，每一个问题的前提是前一个问题已经解决。

已知：一个普通的datagrid表格。

问题1：如何实现翻页。

前台：pagination:true，表示显示分页toolbar。

goods = new ArrayList(); Long total = new Long(); if(userRight.equals(ConstantsUtil.USER_RIGHTS_ADMIN)){ goods = goodsService.getGoodsOnSale(page,rows); total = goodsService.getGoodsOnSaleCount(); }else{ List brands = (List)(LoginController.getFromSession(request,ConstantsUtil.SESSION_USER_BRANDS)); goods = goodsService.getGoodsOnSale(brands,page,rows); total = goodsService.getGoodsOnSaleCount(brands); } GridModel gridModel = getGoods(goods,request); gridModel.setTotal(total); return gridModel; }

说明：后台从request.getParameter里取两个参数，page和rows，分别代表当前的页数及每页显示几行数据。total是总数据数。

GridModel类：

问题2：如何在datagrid表格里第一列显示checkBox，并且让行选中和checkBox选中等同?

答：

1、singleSelect：false，设置表格为复选模式

2、{field:'ck',checkBox:true}，这里面的checkBox:true表示该列显示复选按钮。

2、查看easyUI的文档：可以得知两个属性——checkOnSelect和selectOnCheck。

checkOnSelect:如果设置为 true，当用户点击某一行时，则会选中/取消选中复选框。如果设置为 false 时，只有当用户点击了复选框时，才会选中/取消选中复选框。

selectOnCheck:如果设置为 true，点击复选框将会选中该行。如果设置为 false，选中该行将不会选中复选框。

所以，将这两个属性置为true。

问题3：如何在执行翻页以前将被选中的行的主键保存起来

答：此问题可分解为以下两个问题：

1、如何将勾选中的行保存起来

因为翻页是重新到后台取下一页数据，也就是数据重新加载的过程，所以可以考虑在onBeforeLoad时做相关处理。

先定义好一个数组idsArray用来保存选中行的主键，再用$dg.datagrid('getSelections')取得选中的行。也就是105行的方法addSelectedGoodsIdToArray做的事情。

下面看上边发的大概样子图片，点击“下一步”是将当前datagrid中被选中的内容提交到后台处理，即页面中的function nextStep()要做的事，所以在netStep()中需要首先执行

一下addSelectedGoodsIdToArray，将选中的内容保存起来，否则当数据提交后台时，当前这一页选中的行并没有存起来，因为当前这一页的addSelectedGoodsIdToArray并未触发执行。

2、如何将选中以后又取消选中的行从保存的记录中删除

经过测试，在我将checkOnSelect和selectOnCheck都设为true以后， onClickRow在被调用时会自动调用onCheck或onUncheck(请注意此处的拼写，后一个check的首字母是小写，如果误

写成大写就会失效)，而onCheck和onUncheck在执行时并不会自动调用onClickRow。所以，如果我们想要在用户取消勾选一行以后做点事，只要在onUncheck里做就行了。这就是52行做的事。

问题4：如何在datagrid数据加载完之后自动将被选中的行选中？

答：因为翻页是重新到后台取下一页数据，也就是数据重新加载的过程。所以只要在onLoadSuccess中解决这个勾选的问题，那么当向前翻页的时候，之前选中的行也会实现自动勾选。

1、onLoadSuccess方法中传进来的data参数，它的data.rows()表示当前datagrid中的数据。

2、$dg.datagrid('selectRow',index);将第index行的数据选中。这里的index从零开始，index不等于当前行的数据的主键，而是表格的自然行号。

3、data.rows().goodsId:取得当前行数据的goodsId属性的值

知道了以上三点，大概就清楚了，遍历idsArray，将当前行的主键与之匹配，匹配上了就勾选。

注意第三点，我们选择一列值的前提是该列被显示在表格中，如果想隐藏它，只需hidden:true。

以上所述是小编给大家介绍的jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码，希望对大家有所帮助,如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程之家网站的支持！

datagrid datagrid easyui easyui jquery 后翻页翻页选中选中

上一篇：jQuery Easyui Datagrid实现单行的下一篇：jQuery Easyui DataGrid点击某个单

猜你在找的jQuery相关文章

《锋利的jQuery》笔记：插件的使用和写法

jQuery插件的种类 1、封装对象方法这种插件是将对象方法封装起来，用于对通过选择器获取的...

作者：前端之家时间：2020-12-28

jQuery插件开发入门

扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。入门编写一个jQuery...

作者：前端之家时间：2020-12-28

jquery.roundabout.js实现3D图片层叠旋转木马切换

最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。兼容...

作者：前端之家时间：2020-12-28

jQuery效果之jQuery实现图片的依次加载图片

css代码： js代码：

作者：前端之家时间：2020-12-28

jQuery之deferred对象详解

一、什么是deferred对象？开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...

作者：前端之家时间：2020-12-28

jQuery插件开发进阶

jQuery插件开发模式软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...

作者：前端之家时间：2020-12-28

jQuery 实现邮箱输入自动提示功能：（一）

记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...

作者：前端之家时间：2020-12-28

jQuery插件之上传文件ajaxfileupload.js源码与使用

在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...

作者：前端之家时间：2020-12-28

jQuery效果之封装一个文章图片弹出放大效果

首先先搭写一个基本的格式：然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...

作者：前端之家时间：2020-12-28

《从零开始学习jQuery》：用jQuery操作元素的属性与样式

元素属性和Dom属性简介对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...

作者：前端之家时间：2020-12-28