easyUI:JS实现从一个datagrid选中的多行数据添加到另一个datagrid

这两天刚开始接触easyUI,因为工作原因,我一个后台开发被前端折磨够呛~~~

html

<div style="float:right;69%;height:400px;margin-bottom: 150px;">
<div id="ps" class="easyui-panel" title="缴费项目" style="100%;overflow:scroll;overflow-x: hidden; height: 700px;">
<div id="tb"style="float: left; 100%" >
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:false" onclick="rmtManager.project_add()">添加项目</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:false" onclick="accept()">确认修改</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:false" onclick="removeit()">移除项目</a>

</div>
<table id="glGrid" style="display:none; 100%;overflow:scroll;overflow-x: hidden;"
data-options="
fit:true,
nowrap:false,
rownumbers:true,
idField:'id',
method:'post',
striped: true,
pagination: true,
toolbar: '#tb',
singleSelect: true,
onClickRow: onClickRow,
">
<thead>
<tr>
<th data-options="field:'projectNo',sortable:true,150,align:'center'">项目编号</th>
<th data-options="field:'projectName',sortable:true,150,align:'center'">项目名称</th>
<th data-options="field:'projectAmt',sortable:true,150,align:'center',editor:{type:'numberbox',options:{precision:1}}">缴费金额</th>
</tr>
</thead>
</table>
</div>
</div>
<div id="seleteProject" >
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'center'" style="padding:10px;">
<div style="margin-bottom:20px">
<table id="project"></table>
</div>
</div>
<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
<a id="selecte" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick=" selectPro()">确定</a>
</div>
</div>
</div>

<script type="text/javascript">
    var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#glGrid').datagrid('validateRow', editIndex)){
var ed = $('#glGrid').datagrid('getEditor', {index:editIndex,field:'projectAmt'});
var projectAmt = $(ed.target).combobox('getText');
$('#glGrid').datagrid('getRows')[editIndex]['projectAmt'] = projectAmt;
$('#glGrid').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#glGrid').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#glGrid').datagrid('selectRow', editIndex);
}
}
}
function removeit(){
if (editIndex == undefined){return}
$('#glGrid').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}

function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function getChanges(){
var rows = $('#glGrid').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}
</script>

js
(function($) {
var busMng = rmtCMHelper.createBusMngInst({
busMngOptions: {

project_add: function () {
$('#seleteProject').window({
600,
height: 450,
title: '选择...',
minimizable: false,
maximizable: false,
collapsible: false,
modal: true
});
$('#seleteProject').window('open');
var ctx = $("#ctx").val();
var accountId = $("#accountId").val();
$('#project').datagrid({
url: ctx + '/wisdom/paymentProject/getProData.html',
"100%",
height: '400px',
striped: true,
loadMsg: '正在加载学生的信息...',
pagination: true,
pageSize: 10,
pageNumber: 1,
pageList: [10, 20, 30],
queryParams: {"wxSchoolWisdomPaymentProject.accountId": accountId},
columns: [[
{field: 'ck', checkbox: true, align: 'center', 50},
{field: 'projectNo', 150,align: 'center', title: '项目编号'},
{field: 'projectName', 150,align: 'center', title: '项目名称'},
{field: 'projectAmt', 150,align: 'center', title: '项目金额'},
]]
});
},
}
});
}
//实现添加入新的datagrid
function selectPro() {
var rows = $('#project').datagrid('getSelections');
for(var i=0; i<rows.length; i++){
$("#glGrid").datagrid('appendRow',
{projectNo:rows[i].projectNo,
projectName:rows[i].projectName,
projectAmt:rows[i].projectAmt,
});
}







What do you want to be?
原文地址:https://www.cnblogs.com/CatsBlog/p/9294649.html