easyui 代码
<div class="easyui-layout" data-options="fit:true,border:false" >
<div data-options="region:'north'" style="height:40px">
<h1>类别 : ${goodscatModel.text }</h1>
</div>
<div data-options="region:'west',split:true,title:'拥有的属性',collapsible:false" style="width:240px;">
<table id="hasAttrDataGrid" data-options="fit:true,border:false"></table>
</div>
<div data-options="region:'center'" style="padding-top:182px; padding-left:12px;">
<a href="javascript:void(0)" class="easyui-linkbutton c1" style="width:60px; margin-bottom:20px;" οnclick="moveIn()">《 移入</a>
<a href="javascript:void(0)" class="easyui-linkbutton c5" style="width:60px" οnclick="moveOut()">移出 》</a>
</div>
<div data-options="region:'east',split:true,title:'未拥有的属性',collapsible:false" style="width:240px;">
<table id="noAttrDataGrid" data-options="fit:true,border:false"></table>
</div>
</div>
js
<script type="text/javascript">
var hasAttrDataGrid;
var noAttrDataGrid;
$(function() {
hasAttrDataGrid = $('#hasAttrDataGrid').datagrid({
url : '${ctx}' + '/goodscat/hasAttrDataGrid?catId=' + ${goodscatModel.id},
striped : true,
rownumbers : true,
idField : 'id',
sortName : 'id',
sortOrder : 'asc',
frozenColumns : [ [ {
field : 'checkbox',
checkbox:true
},{
width : '50',
title : 'id',
field : 'id',
sortable : true
}, {
width : '200',
title : '名称',
field : 'name',
sortable : true
} ] ]
});
noAttrDataGrid = $('#noAttrDataGrid').datagrid({
url : '${ctx}' + '/goodscat/noAttrDataGrid?catId=' + ${goodscatModel.id},
striped : true,
rownumbers : true,
idField : 'id',
sortName : 'id',
sortOrder : 'asc',
frozenColumns : [ [ {
field : 'checkbox',
checkbox:true
},{
width : '50',
title : 'id',
field : 'id',
sortable : true
}, {
width : '200',
title : '名称',
field : 'name',
sortable : true
} ] ]
});
});
function moveIn(){
var checkeds = $('#noAttrDataGrid').datagrid('getChecked');
var idStr = '';
for(var i = 0; i < checkeds.length; i++){
idStr += checkeds[i].id + ",";
}
if(idStr.length == 0){
alert("请选择要移入的属性");
return;
}
parent.$.messager.confirm('询问', '您是否要执行该操作?', function(b) {
if (b) {
progressLoad();
$.post('${ctx}/goodscat/addCatAttr', {
catId : ${goodscatModel.id},
attrIds : idStr
}, function(result) {
if (result.success) {
hasAttrDataGrid.datagrid('reload');
noAttrDataGrid.datagrid('reload');
} else{
parent.$.messager.alert('提示', result.msg, 'info');
}
progressClose();
}, 'JSON');
}
});
}
function moveOut(){
var checkeds = $('#hasAttrDataGrid').datagrid('getChecked');
var idStr = '';
for(var i = 0; i < checkeds.length; i++){
idStr += checkeds[i].id + ",";
}
if(idStr.length == 0){
alert("请选择要移出的属性");
return;
}
parent.$.messager.confirm('询问', '您是否要执行该操作?', function(b) {
if (b) {
progressLoad();
$.post('${ctx}/goodscat/removeCatAttr', {
catId : ${goodscatModel.id},
attrIds : idStr
}, function(result) {
if (result.success) {
hasAttrDataGrid.datagrid('reload');
noAttrDataGrid.datagrid('reload');
} else{
parent.$.messager.alert('提示', result.msg, 'info');
}
progressClose();
}, 'JSON');
}
});
}
</script>
后台,就根据传过去的ID做处理 略...