• 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);
      }
    }

  • 相关阅读:
    字符输入流 FileReader
    字符输出流 FileWriter
    字节流复制文件
    字节输入流 FileInputStream
    彻底弄懂jsonp原理及实现方法
    这三个月,我如何一点点地成长(海康前端实习)
    前端chrome浏览器调试总结
    前端常见的布局方案大全
    总结4种常用排序(快排、选择排序、冒泡排序、插入排序)
    详解JS中DOM 元素的 attribute 和 property 属性
  • 原文地址:https://www.cnblogs.com/DylanZ/p/6362624.html
Copyright © 2020-2023  润新知