easyUI 两个grid表格数据左移右移代码

标签：click   index   tle   cli   jquer   pen   代码   int   img   

      做项目中经常遇到选择已有数据，移动到选择好数据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表格数据左移右移代码

标签：click   index   tle   cli   jquer   pen   代码   int   img   

原文地址：http://www.cnblogs.com/DylanZ/p/6362624.html