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