项目中遇到跨页选择(项目使用easyui):有多页数据,在当前页面选择后,下一页继续选择,返回之前页面时,仍然能记住之前选中的行。最后对多页选中的数据统一提交。
翻看easyui文档,官方并没有提供相应方法,easyui当前最新版本1.3.2也没有找到,最后使用了一个比较传统的方式,各位看官如果有更好的方式,劳烦告知,感激不尽。
声明全局数组变量
var ids = new Array();
使用easyui datagrid的四个方法处理
onSelect:function(index,row){
addItem(row.assetsId);
},
onUnselect:function(index,row){
removeItem(row.assetsId)
},
onSelectAll:function(rows){
addAll(rows);
},
onUnselectAll:function(rows){
removeAll(rows);
},
对应处理函数
//add onSelect
function addItem(assetsId){
var arrs = ids.join();
console.info("arrs="+arrs);
if(arrs.indexOf(assetsId) == -1){
ids.push(assetsId);
}
console.info("ids="+ids);
}
//add current page
function addAll(rows){
for(var i=0; i<rows.length; i++){
var arrs = ids.join();
if(arrs.indexOf(rows[i].assetsId) == -1){
ids.push(rows[i].assetsId);
}
}
console.info("addAll-ids="+ids);
}
//remove unSelect
function removeItem(assetsId){
var arrs = ids.join();
console.info("arrs="+arrs);
var indexTmp = arrs.indexOf(assetsId);
console.info("index="+indexTmp);
if(indexTmp != -1){
for(var i=0; i<ids.length; i++){
if(ids[i] == assetsId){
ids.splice(i,1);
}
}
}
console.info("ids="+ids);
}
//remove current page
function removeAll(rows){
for(var i=0; i<rows.length; i++){
var arrs = ids.join();
var indexTmp = arrs.indexOf(rows[i].assetsId);
if(indexTmp != -1){
for(var j=0; j<ids.length; j++){
if(ids[j] == rows[i].assetsId){
ids.splice(j,1);
}
}
}
}
console.info("removeAll-ids="+ids);
}
返回之前页面后,显示已经选中的数据
onLoadSuccess: function(){
if(!ids){
return;
}
var myrows = $('#assetsTable').datagrid('getRows');
for(var i=0; i<myrows.length; i++){
for(var j=0; j<ids.length; j++){
if(myrows[i].assetsId == ids[j]){
var index = $('#assetsTable').datagrid('getRowIndex',myrows[i]);
$('#assetsTable').datagrid('selectRow',index);
}
}
}
},
数据提交时,直接提交ids即可,无需调用 datagrid 的 getSelections 方法,就算调用获取的数据也不完整。
分享到:
相关推荐
在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能...
在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...
标题中的“easyui datagrid 右冻结”是指在使用EasyUI框架开发Web应用程序时,针对datagrid组件实现右侧列固定的功能。EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括datagrid,它是一个用于展示表格数据的...
EasyUI 是一个基于 jQuery 的 UI 框架,它提供了丰富的组件,包括表格(DataGrid)等,使得 Web 应用程序的界面开发更加便捷。在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid ...
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
easyUI datagrid 自动调整行号大小
如果选择修改EasyUI的源码,你需要找到处理行事件的部分,然后插入上述逻辑。这种方式可能需要对EasyUI的源码有一定的熟悉度,且修改后的库可能不再符合EasyUI的官方更新和支持。 7. **扩展实现**: 更推荐的方式...
这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档,帮助我们理解和应用 Datagrid。 首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
在使用EasyUI框架开发Web应用时,Datagrid组件是一个非常重要的元素,它提供了一种方便的方式来展示和操作数据。在标题“easyui datagrid在编辑状态下更新列的值”中,我们关注的是如何在Datagrid的编辑模式下动态地...
EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的功能,如表格布局、数据分页、排序、过滤等,常用于Web应用的数据展示。在本项目中,"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与...
### EasyUI Datagrid 中文排序解决方案 #### 一、前言 在开发Web应用程序时,经常需要处理中文数据的排序问题。特别是在使用如EasyUI Datagrid这样的前端组件时,中文排序成为了开发者面临的一个常见挑战。本文将...
在IT领域,尤其是在Web开发中,EasyUI是一个广泛使用的JavaScript框架,它基于jQuery,提供了丰富的UI组件,如Datagrid,用于构建数据展示和管理的表格。在本篇中,我们将深入探讨如何在EasyUI的Datagrid中实现行...
在IT领域,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如datagrid,用于构建用户界面。本文将深入探讨如何使用EasyUI datagrid实现多条件筛选功能,特别是支持可复选的筛选条件,类似于淘宝网站上的...
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
Datagrid提供了一个灵活的表格布局,可以轻松地处理大量数据,并支持多种自定义选项,如列宽调整、行选择、复选框选择等。 2. 导出数据需求: 在实际工作中,用户可能需要将网页上的数据导出为Excel格式,以便于...
### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细...
easyUI datagrid 行上移,下移,置顶,置底的方法