做项目中经常遇到选择已有数据,移动到选择好数据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表格数据左移右移代码的更多相关文章

  1. ExtJS4.2学习(三)Grid表格(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/172.html --------------- ...

  2. Oracle批量删除表格数据

    在开发阶段往Oracle数据库中多个表格中导入了许多测试数据,倘若一张张表执行"truncate table tablename"语句显得十分繁琐.在PL/SQL中可以用代码进行批 ...

  3. Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  4. EASYUI- EASYUI左移右移 GRID中值

    EASYUI左移右移 GRID中值 $("#addAll").click(function(){ var ids = []; var names = []; var srcrows ...

  5. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  6. 用easyui从servlet传递json数据到前端页面的两种方法

    用easyui从servlet传递json数据到前端页面的两种方法 两种方法获取的数据在servlet层传递的方法相同,下面为Servlet中代码,以查询表中所有信息为例. //重写doGet方法 p ...

  7. 【转载】c语言数据的左移右移

    原文地址:http://www.cnblogs.com/myblesh/articles/2431806.html 由于在飞控程序中执行效率对程序的影响相当大,所以一个好的运算效率很重要.左移右移比单 ...

  8. easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮

    1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...

  9. EasyUI笔记(六)数据表格

    前言用asp.net结合easyui做个一个数据网格的页面,包括对数据的增删改查,界面如下:  一.UI界面 先写UI界面,代码如下,记得引入相关js和css文件 <body> <t ...

随机推荐

  1. JDK 12 & JAVA

    JDK 12 & JAVA js style https://github.com/winterbe https://winterbe.com/posts/2018/09/24/java-11 ...

  2. Visual Studio 2017 and Swagger: Building and Documenting Web APIs

    Swagger是一种与技术无关的标准,允许发现REST API,为任何软件提供了一种识别REST API功能的方法. 这比看起来更重要:这是一个改变游戏技术的方式,就像Web服务描述语言一样WSDL( ...

  3. hdu-1686(kmp)

    题意:前面的都是废话...其实直接看输入要求和输出要求就可以了,就是给你两个字符串,问你第一个字符串在第二个字符串中出现几次: 解题思路:kmp... 代码: #include<iostream ...

  4. JarvisOJ Basic veryeasyRSA

    已知RSA公钥生成参数: p = 3487583947589437589237958723892346254777 q = 8767867843568934765983476584376578389 ...

  5. 趣味网站5个,小鸡词典/中国配色/名著地图/海洋之音/LOGO设计

    一.小鸡词典 很多流行的词语还没有收录到各大词典,却可以在小鸡词典搜索到,小鸡词典是最全的网络流行词语词典. 不少词条搞笑无厘头,撰写词条还会获得红包. 访问地址:https://jikipedia. ...

  6. Go指针相关

    结合这个例子分析一下 结果: 结合以往C语言的基础,画了一张图来解释为什么会有上面这些值的出现.先查看下Go中的这两个运算符是啥吧. ①对于所有带a的结果 var a int = 1 定义了一个变量a ...

  7. [洛谷P1730] 最小密度路径

    类型:Floyd 传送门:>Here< 题意:定义一条路径密度 = 该路径长度 / 边数.给出一张$DAG$,现有$Q$次询问,每次给出$X,Y$,问$X,Y$的最小密度路径($N \le ...

  8. MySQL 练习题 附答案,未完

    综合练习题 表结构 整合一下方便查看 teacher  student  course scors 练习题 1.自行创建测试数据 create table student( sid int prima ...

  9. MT【293】拐点处切线

    (2018浙江高考压轴题)已知函数$f(x)=\sqrt{x}-\ln x.$(2)若$a\le 3-4\ln 2,$证明:对于任意$k>0$,直线$y=kx+a$ 与曲线$y=f(x)$有唯一 ...

  10. 「CodeForces - 598B」Queries on a String

    BUPT 2017 summer training (for 16) #1I 题意 字符串s(1 ≤ |s| ≤ 10 000),有m(1 ≤ m ≤ 300)次操作,每次给l,r,k,代表将r位置插 ...