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;" onclick="moveIn()">《 移入</a>
		<a href="javascript:void(0)" class="easyui-linkbutton c5" style="width:60px" onclick="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>

easyui 两个datagrid 数据左移右移