zoukankan      html  css  js  c++  java
  • 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=" 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=" 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);
      }
    }

  • 相关阅读:
    windows10的子系统linux(wsl)
    关于js的比较
    关于parseInt,很神奇
    vue修改数组元素通过arr[0]=val的方式不生效
    wps表格 VLookUp 函数
    青年大学习_收集截图方案
    个人记录_uwsgi,nginx与django之间的关系以及各自的作用
    Ubuntu16.04系统中创建新用户
    idea 启动或debug springboot web项目特别慢的解决方案
    利用Aop实现动态分库分表
  • 原文地址:https://www.cnblogs.com/DylanZ/p/6362624.html
Copyright © 2011-2022 走看看