首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 15, 2016

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>添加优惠券步骤2</title>
<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">
<jsp:include page="../layout/script.jsp"></jsp:include>
<c:set var="getDataUrl" value="${pageContext.request.contextPath}/goods/getGoodsOnSale" scope="request" />
<script type="text/javascript">
var $dg;
var $grid;
var ids = '';
var idsArray = new Array();
$(function() {
$dg = $("#dg");
$grid=$dg.datagrid({
url : "${getDataUrl}",
width : 'auto',
height : $(this).height()-85,
pagination:true,
rownumbers:true,
border:true,
striped:true,
singleSelect:false,
checkOnSelect:true,
selectOnCheck:true,
onBeforeLoad:function(data){
addSelectedGoodsIdToArray();
},
onLoadSuccess:function(data){
var rowsData = data.rows;
if(idsArray.length!=0){
$.each(idsArray,function(i,e){
for(var index=0;index<rowsData.length;index++){
if(rowsData[index].goodsId==e){
$dg.datagrid('selectRow',index);
}
}
});
}
},
onUncheck:function(rowIndex,rowData){
if(idsArray.length == 0){
}else{
for(var index=0;index<idsArray.length;index++){
if(idsArray[index] == rowData.goodsId){
removeArrayValue(idsArray,rowData.goodsId);
break;
}
}
}
},
columns : [ [ {field:'ck',checkbox:true},
{field : 'goodsId',hidden:true},
{field : 'goodsName',title : '商品标题',width : parseInt($(this).width()*0.3)},
{field : 'img1',title : '图片',width : parseInt($(this).width()*0.1),align : 'left',
formatter:function(value,row){
if(row.img1 != '')
return "<img src = '"+row.img1+"'/>";
else
return "<img src = '"+row.img1+"'/>"; 
}
},
{field : 'categoryId',title : '分类',width : parseInt($(this).width()*0.1),align : 'left',
formatter:function(value,row){
var cates = row.categorys;
for(var i=0;i<cates.length;i++){
if(cates[i].categoryId === row.categoryId){
return cates[i].categoryName;
}
} 
}
},
{field : 'goodsNumber',title : '库存',width : parseInt($(this).width()*0.1)},
{field : 'isOnSale',title : '上架',width :parseInt($(this).width()*0.1),align : 'left',
formatter:function(value,row){
if(row.isOnSale){
return "<font color=green>是<font>";
} else{
return "<font color=red>否<font>"; 
}
}
},
{field : 'lastUpdate',title : '上架时间',width : parseInt($(this).width()*0.1),align : 'left',
formatter:function(value,row){
var thisDate = new Date(row.lastUpdate);
return formatterDate(thisDate);
}
}
] ],toolbar:'#tb'
});
//搜索框
/* $("#searchbox").searchbox({ 
menu:"#mm", 
prompt :'模糊查询',
searcher:function(value,name){ 
var str="{\"searchName\":\""+name+"\",\"searchValue\":\""+value+"\"}";
var obj = eval('('+str+')');
$dg.datagrid('reload',obj); 
}
}); */
});
function addCheckedGoodIdToArray(rowIndex,rowData){
console.log("_________________________");
var idsArrayLength = idsArray.length;
if(idsArray.length == 0){
console.log("push:"+rowData.goodsId);
idsArray.push(rowData.goodsId);
}else{
for(var index=0;index<idsArrayLength;index++){
if(idsArray[index] == rowData.goodsId){
console.log("remove:"+rowData.goodsId);
removeArrayValue(idsArray,rowData.goodsId);
break;
}
if(index == idsArrayLength-1){
console.log("push:"+rowData.goodsId);
idsArray.push(rowData.goodsId);
}
}
}
console.log("---------------");
for(var index=0;index<idsArray.length;index++){
console.log(idsArray[index]);
}
console.log("---------------");
}
function addSelectedGoodsIdToArray(){
var rows = $dg.datagrid('getSelections');
if(rows.length>0){
$.each(rows,function(i,row){
if(idsArray.length == 0){
idsArray.push(row.goodsId);
}else{
for(var index=0;index<idsArray.length;index++){
if(idsArray[index] == row.goodsId){
break;
}
if(index == idsArray.length-1){
idsArray.push(row.goodsId);
break;
}
}
}
});
}
}
function removeSelectedGoodsIdToArray(rows){
//var rows = $dg.datagrid('getSelections');
if(rows.length>0){
$.each(rows,function(i,row){
if(idsArray.length > 0){
for(var index=0;index<idsArray.length;index++){
removeArrayValue(idsArray,row.goodsId);
}
}
});
}
}
function nextStep() {
addSelectedGoodsIdToArray();
console.log("ids length"+idsArray.length);
if(idsArray.length>0){
ids = '';
for(var index=0;index<idsArray.length;index++){
ids += idsArray[index];
if(index != idsArray.length-1){
ids += ',';
}
}
}else{
}
parent.$.modalDialog({
title : '商品排序',
width : 1632,
height : 830,
href : "${pageContext.request.contextPath}/coupons/showAddStep3?goodsId="+ids,
onLoad:function(){
},
buttons : [ {
text : '下一步',
iconCls : 'icon-ok',
handler : function() {
parent.$.modalDialog.openner= $grid;//因为添加成功之后，需要刷新这个dataGrid，所以先预定义好
var f = parent.$.modalDialog.handler.find("#form");
f.submit();
}
}, {
text : '取消',
iconCls : 'icon-cancel',
handler : function() {
parent.$.modalDialog.handler.dialog('destroy');
parent.$.modalDialog.handler = undefined;
}
}
]
});
}
//编辑
function editOneGood() {
//console.log("run edit");
var row = $dg.datagrid('getSelected');
if (row) {
window.location.href="${pageContext.request.contextPath}/goods/showEditGoods?goodsId="+row.goodsId;
}else{
parent.$.messager.show({
title :"提示",
msg :"请选择一行记录!",
timeout : 1000 * 2
});
}
}
function addOneGood() {
//console.log("run edit");
window.location.href="${pageContext.request.contextPath}/goods/showAddGood";
}
//高级搜索 删除 row
function tbCompanySearchRemove(curr) {
$(curr).closest('tr').remove();
}
//高级查询
function tbsCompanySearch() {
jqueryUtil.gradeSearch($dg,"#tbCompanySearchFm","jsp/company/companySearchDlg.jsp");
}
/**
* 格式化日期（含时间）
*/
function formatterDate(date) {
var datetime = date.getFullYear()
+ "-"// "年"
+ ((date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : "0"
+ (date.getMonth() + 1))
+ "-"// "月"
+ (date.getDate() < 10 ? "0" + date.getDate() : date
.getDate())
+ " "
+ (date.getHours() < 10 ? "0" + date.getHours() : date
.getHours())
+ ":"
+ (date.getMinutes() < 10 ? "0" + date.getMinutes() : date
.getMinutes())
+ ":"
+ (date.getSeconds() < 10 ? "0" + date.getSeconds() : date
.getSeconds());
return datetime;
}
function removeArrayValue(arr, val) {
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}
</script>
</head>
<body>
<div data-options="region:'center',border : false">
<div class="well well-small" style="margin-left: 5px;margin-top: 5px">
<span class="badge">添加优惠券步骤</span>
<p>
1：填写优惠券基本信息 —————————— <span class="label-info"><strong>2：选择优惠券中的商品</strong></span> —————————— 3：保存并生成优惠券
</p>
</div>
<div id="tb" style="padding:2px 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="padding-left:2px">
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="nextStep()">下一步</a>
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="">取消</a>
</td>
<!-- <td style="padding-left:2px">
<input id="searchbox" type="text"/>
</td> -->
<!-- <td style="padding-left:2px">
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="tbsCompanySearch();">高级查询</a>
</td>-->
</tr>
</table>
</div>
<table id="dg" title="添加优惠券步骤2"></table>
</div> 
</body>
</html>

2、页面大概的样子

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

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

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

问题1：如何实现翻页。

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

后台：

@RequestMapping("/getGoodsOnSale")
@ResponseBody
public GridModel getGoodsOnSale(HttpServletRequest request, @RequestParam("page") Integer page,
@RequestParam("rows") Integer rows) {
Integer userRight = (Integer)(LoginController.getFromSession(request, ConstantsUtil.SESSION_USER_RIGHT));
List<Goods> goods = new ArrayList<Goods>();
Long total = new Long();
if(userRight.equals(ConstantsUtil.USER_RIGHTS_ADMIN)){
goods = goodsService.getGoodsOnSale(page, rows);
total = goodsService.getGoodsOnSaleCount();
}else{
List<Brand> brands = (List<Brand>)(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类：

public class GridModel {
private List rows= new ArrayList();
private Long total=0L;
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
public Long getTotal() {
return total;
}
public void setTotal(Long total) {
this.total = total;
}
}

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

答：

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

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

2、查看easyUI的文档：http://www.jeasyui.net/plugins/183.html可以得知两个属性——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在翻页以后仍能记录被选中行的实现代码，希望对大家有所帮助,如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

izumi

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 #Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 #Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 #Javascript
对js eval()函数的一些见解
Aug 15 #Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 #Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 #Javascript
jQuery学习笔记之回调函数
Aug 15 #Javascript
表结构(1) 控制流(1) 字段分割(1) delete in(1) 分布式追踪(1) GPU(1) group by(1) REGEXP(1) 查询效率(1) Express(1)
You might like
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
原生js轮播特效
2017/05/18 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
进一步理解Python中的函数编程
2015/04/13 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
python调用自定义函数的实例操作
2019/06/26 Python
python word转pdf代码实例
2019/08/16 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
python实现简单猜单词游戏
2020/12/24 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
python元组拆包实现方法
2021/02/28 Python
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
html实现弹窗的实例
2021/06/09 HTML / CSS
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫