做项目中经常遇到选择已有数据,移动到选择好数据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);
}
}