easyui datagrid数据互传
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2><input id="getdatas" type="button" value="getdatas"></h2>
<div style="float:left;margin-top:20px;overflow-y:scroll">
<table id="select1" class="easyui-datagrid" title="Basic DataGrid" style="width:400px;height:300px"
data-options="singleSelect:false,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</div>
<div style="float:left;margin-right:20px;margin-left:20px;">
<div> <input id="add" type="button" name="button" value="" style="cursor:pointer;margin-top:50px;background-image:url(./images/green-arr-r.png);background-repeat:no-repeat;"></div>
<div> <input id="jian" class='btn-sq-remove' type="button" name="button" value="" style="cursor:pointer;margin-top:50px;background-image:url(./images/gray-arr-l.png);background-repeat:no-repeat;"></div>
<div> <input id="adds" class='btn-sq-all' type="button" name="button" value="" style="cursor:pointer;margin-top:50px;background-image:url(./images/blue-dbarr-r.png);background-repeat:no-repeat;"></div>
<div> <input id="jians" class='btn-sq-empty' type="button" name="button" value="" style="cursor:pointer;margin-top:50px;background-image:url(./images/blue-dbarr-l.png);background-repeat:no-repeat;"></div>
</div>
<div style="float:left;margin-top:20px;overflow-y:scroll">
<table id="select2" class="easyui-datagrid" title="Basic DataGrid" style="width:400px;height:300px"
data-options="singleSelect:false,collapsible:true,url:'',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</div>
<input type="hidden" id="iddata" name='iddata'>
</body>
<script type="text/javascript">
//在左边选择一条添加到右边
$('#add').click(function(){
var iddata='';
var row=$('#select1').datagrid('getSelected'); //返回第一个选中的行没有就Null
if(row)
$('#select2').datagrid('appendRow',row); //追加一个新行。
var rowindex=$('#select1').datagrid('getRowIndex',row); //得到选中行的索引以便删除
$('#select1').datagrid('deleteRow',rowindex); //删除指定索引的行
var newdatas=$('#select2').datagrid('getRows'); //返回当前页的行(是个二维数组)。用于获取右边数据的id以便后台保存数据库
$.each(newdatas,function(key,value){
iddata=iddata+value.itemid+',';
});
$('#iddata').val(iddata);
});
//在右到左
$('#jian').click(function(){
var iddata='';
var row=$('#select2').datagrid('getSelected'); //返回第一个选中的行没有就Null
if(row)
$('#select1').datagrid('appendRow',row); //追加一个新行。
var rowindex=$('#select2').datagrid('getRowIndex',row); //得到选中行的索引以便删除
$('#select2').datagrid('deleteRow',rowindex); //删除指定索引的行
var newdatas=$('#select2').datagrid('getRows'); //返回当前页的行(是个二维数组)。用于获取右边数据的id以便后台保存数据库
$.each(newdatas,function(key,value){
iddata=iddata+value.itemid+',';
});
$('#iddata').val(iddata);
});
$('#adds').click(function(){
var iddata='';
var rows=$('#select1').datagrid('getSelections'); //返回所有选中的行,当没有选中的记录时,将返回空数组。
$.each(rows,function(key,row){
$('#select2').datagrid('appendRow',row);
var rowindex=$('#select1').datagrid('getRowIndex',row);
$('#select1').datagrid('deleteRow',rowindex);
});
var newdatas=$('#select2').datagrid('getRows'); //返回当前页的行(是个二维数组)。用于获取右边数据的id以便后台保存数据库
$.each(newdatas,function(key,value){
iddata=iddata+value.itemid+',';
});
$('#iddata').val(iddata);
});
$('#jians').click(function(){
var iddata='';
var rows=$('#select2').datagrid('getSelections'); //返回所有选中的行,当没有选中的记录时,将返回空数组。
$.each(rows,function(key,row){
$('#select1').datagrid('appendRow',row);
var rowindex=$('#select2').datagrid('getRowIndex',row);
$('#select2').datagrid('deleteRow',rowindex);
});
var newdatas=$('#select2').datagrid('getRows'); //返回当前页的行(是个二维数组)。用于获取右边数据的id以便后台保存数据库
$.each(newdatas,function(key,value){
iddata=iddata+value.itemid+',';
});
$('#iddata').val(iddata);
});
$('#getdatas').click(function(){
$('#getdatas').val($('#iddata').val());
});
</script>
</html>
把代码保存为html文件放在easyui包的demo/datagrid文件夹下就能用了。不过按钮图片需要自己找
datagrid_data1.json数据
{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}