easyUI 两个grid表格数据左移右移代码
做项目中经常遇到选择已有数据,移动到选择好数据grid的场景,比如为项目添加员工,左侧grid是待选择员工,选好后移动到右侧grid,这里我用的jquery-easyui-1.4.2,整理出一份grid数据移动的代码,可以直接使用。
1、jsp代码:(创建两个easyui-datagrid,左右横向排列)
<table>
<tr><td><table id="leftGrid" class="easyui-datagrid" style="width: 330px; height: 230px"></table></td>
<td><img src="../image/toRight.png" alt="全部右移" title="全部向右" onclick="onclick_leftToRight()" style="cursor: pointer;" />
<br /> <br /> <br />
<img src="../image/toLeft.png" alt="全部左移" title="全部向左" onclick="onclick_rightToLeft()" style="cursor: pointer;" />
</td>
<td><table id="rightGrid" class="easyui-datagrid selectedGrid" title="已选择员工列表" style="width: 330px; height: 230px" data-options="rownumbers:true"></table></td>
</tr>
</table>
2、js代码:实现数据左右grid移动
//员工信息从左往右移
function onclick_leftToRight() {
var slected = $('#leftGrid').datagrid("getSelections");
for (var i = 0; i < slected.length; i++) {
$('#rightGrid').datagrid('appendRow', slected[i]);//把选择的数据添加到右侧grid
var rowIdex = $('#leftGrid').datagrid("getRowIndex",slected[i]);//得到索引
$('#leftGrid').datagrid("deleteRow", rowIdex);//删除左侧grid中被移动的数据
}
}
//员工信息从右往左移
function onclick_rightToLeft() {
var slected = $('#rightGrid').datagrid("getSelections");
for (var i = 0; i < slected.length; i++) {
$('#leftGrid').datagrid('appendRow', slected[i]);
//得到索引
var rowIdex = $('#rightGrid').datagrid("getRowIndex",slected[i]);
$('#rightGrid').datagrid("deleteRow", rowIdex);
}
}
easyUI 两个grid表格数据左移右移代码的更多相关文章
- ExtJS4.2学习(三)Grid表格(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/172.html --------------- ...
- Oracle批量删除表格数据
在开发阶段往Oracle数据库中多个表格中导入了许多测试数据,倘若一张张表执行"truncate table tablename"语句显得十分繁琐.在PL/SQL中可以用代码进行批 ...
- Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- EASYUI- EASYUI左移右移 GRID中值
EASYUI左移右移 GRID中值 $("#addAll").click(function(){ var ids = []; var names = []; var srcrows ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
- 用easyui从servlet传递json数据到前端页面的两种方法
用easyui从servlet传递json数据到前端页面的两种方法 两种方法获取的数据在servlet层传递的方法相同,下面为Servlet中代码,以查询表中所有信息为例. //重写doGet方法 p ...
- 【转载】c语言数据的左移右移
原文地址:http://www.cnblogs.com/myblesh/articles/2431806.html 由于在飞控程序中执行效率对程序的影响相当大,所以一个好的运算效率很重要.左移右移比单 ...
- easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮
1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...
- EasyUI笔记(六)数据表格
前言用asp.net结合easyui做个一个数据网格的页面,包括对数据的增删改查,界面如下: 一.UI界面 先写UI界面,代码如下,记得引入相关js和css文件 <body> <t ...
随机推荐
- JMeter 连接 sql server
1.安装驱动 http://www.microsoft.com/zh-CN/download/details.aspx?id=11774 下载后解压后复制sqljdbc.jar到 “jmeter的安装 ...
- CSS 的三种样式 内联 内部 外部
CSS:层叠样式表的缩写 就是 Cascading Style Sheets Cascading Style Sheets : 层叠样式表 优先级问题 :遵守就近原则 内联> 内部>外部 ...
- Lodop打印设计矩形重合预览线条变粗
LODOP中的打印设计是辅助进行开发的,实际打印效果应以预览为准,很多效果都是在设计界面显示不出来,或设计和预览界面有差异.例如add_print_text文本的字间距.行间距,旋转,还有允许标点溢出 ...
- Vue生产环境部署
前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue ...
- hdu-3068(最长回文子串-manacher)
题意:求一个字符串#include<iostream>#include<algorithm>#include<cstring>using namespace std ...
- Hibernate中的Entity类之间的继承关系之一MappedSuperclass
在hibernate中,Entity类可以继承Entity类或非Entity类.但是,关系数据库表之间不存在继承的关系.那么在Entity类之间的继承关系,在数据库表中如何表示呢? Hibernate ...
- BZOJ3787 gty的文艺妹子序列 【树状数组】【分块】
题目分析: 首先这种乱七八糟的题目就分块.然后考虑逆序对的统计. 一是块内的,二是块之间的,三是一个块内一个块外,四是都在块外. 令分块大小为$S$. 块内的容易维护,单次维护时间是$O(S)$. 块 ...
- STL的一些基本操作
STL是一个神奇的东西,在NOIP考试中非常重要. 什么是STL? STL(Standard Template Library),即标准模板库,是一个具有工业强度的,高效的C++程序库.它被容纳于C+ ...
- [BJWC2010] 严格次小生成树
[BJWC2010]严格次小生成树算法及模板 所谓次小生成树,即边权之和第二小的生成树,但所谓严格,就是不能和最小的那个相等. 求解严格次小生成树的方法一般有倍增和LCT两种.当然LCT那么高级的我当 ...
- 【XSY2470】lcm 数学
题目大意 \(t\)组询问, 每组询问给定\(n\),求\(\sum_{k=1}^n[n,k]\),其中\([a,b]\)表示\(a\)和\(b\)的最小公倍数 . \(t\leq 300000,n\ ...