EasyUi DataGrid中数据编辑方式及编辑后数据获取，校验处理




EasyUi中的DataGrid提供前台编辑的相关函数。

实现客户选中DataGrid中一列后，对选中列中的一个字段进行编辑，并对数据进行实时校验后，传递至后台保存的需求，

主要涉及到DataGrid中设置编辑单元格，获取编辑单元格，编辑单元格的onchange事件处理，通过当前光标所在编辑单元格获取所在行。

1. 设置编辑单元格

　　在列定义中增加editor属性，参数为type，options

　　eg:

{title:'上级分配额度',field:'assigned_amount_temp',width:150,sortable:true,align:'right',editor:{type:'numberbox',options:{precision:2,groupSeparator:','}}}

　　通过beginEdit方法设置行开始编辑，参数为行号（index），设置后，列会变成可输入状态

　　eg：

$('#datagrid').datagrid('beginEdit', index);

2. 获取编辑单元格，

　　通过getEditor方法获取单元格，参数为options，使用行号和列名可以唯一定位cell

　　eg：

var ed = $('#datagrid').datagrid('getEditor', {index:index,field:'assigned_amount_temp'});

 

3. 为编辑单元格增加onChange事件

　　获取到编辑单元格后，可以为其增加onChange事件

　　eg：　　　　

$(ed.target).numberbox({ onChange: function () {

                      // 获取编辑对象的value

$(ed.target).numberbox('getValue'); 4                     // 设置编辑对的value 5                    

$(ed.target).numberbox('setValue',removeAmountFormat(rowData['assigned_amount_temp'])); 6             });

4. 通过当前光标所在编辑单元格获取所在行

　　在编辑单元格的onChange方法中，获取当前行

　　eg：

$(ed.target).numberbox({ onChange: function (newValue,oldValue) {

　　// 获取光标所在行的行号 通过当前对象往上获取第一个datagrid-row的tr，然后那它的datagrid-row-index属性值

　　var rowIndex = $(this).closest("tr.datagrid-row").attr("datagrid-row-index");

   

　　var rows = $("#datagrid").datagrid('getRows');

   

 });

此次功能核心的jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<%-- 引入页面头 --%>
<%@ include file="/pageHead.jsp" %>

<form name="queryform" id="queryform" action="" method="post">
<input type="hidden" id="draftGroupPoolId" name="draftGroupPoolId" value="${draftGroupPool.id}" />
<div class="pageMain">
<div class="pageTitle">票据池额度分配</div>
<div class="pageBody">
<table class="tableFrom">
<tr>
<td class="td01"></td>
<td class="td02">集团客户名称：</td>
<td class="td04">${draftGroupPool.client.name}</td>
<td class="td01"></td>
<td class="td02">集团票据池名称：</td>
<td class="td04">${draftGroupPool.group_pool_name}</td>
</tr>

<tr>
<td class="td01"></td>
<td class="td02" ><b>集团池余额合计：</b></td>
<td class="td04">
<b>
<script type="text/javascript">document.write(new Number('${draft_amount}').add(new Number('${bond_amount}')).add(new Number('${pool_adjust_amount}')).formatMoney(2,"",",","."));</script>
</b>
</td>

<td class="td01"></td>
<td class="td02" ><b>集团池已使用余额合计：</b></td>
<td class="td04">
<b>
<script type="text/javascript">document.write(new Number('${ebill_used_amount}').add(new Number('${used_amount}')).formatMoney(2,"",",","."));</script>
</b>
</td>
</tr>

<tr>
<td class="td01"></td>
<td class="td02" >其中：在池票据余额合计：</td>
<td class="td04">
<script type="text/javascript">document.write(new Number('${draft_amount}').formatMoney(2,"",",","."));</script>
</td>
<td class="td01"></td>
<td class="td02" >其中：电票已使用合计：</td>
<td class="td04">
<script type="text/javascript">document.write(new Number('${ebill_used_amount}').formatMoney(2,"",",","."));</script>
</td>
</tr>
<tr>
<td class="td01"></td>
<td class="td02" > 保证金余额合计：</td>
<td class="td04">
<script type="text/javascript">document.write(new Number('${bond_amount}').formatMoney(2,"",",","."));</script>
</td>

<td class="td01"></td>
<td class="td02" > 纸票已使用合计：</td>
<td class="td04">
<script type="text/javascript">document.write(new Number('${used_amount}').formatMoney(2,"",",","."));</script>
</td>
</tr>
<tr>
<td class="td01"></td>
<td class="td02" > 池调节余额合计：</td>
<td class="td04">
<script type="text/javascript">document.write(new Number('${pool_adjust_amount}').formatMoney(2,"",",","."));</script>
</td>
<td class="td01"></td>
<td class="td02" ></td>
<td class="td04">
</td>
</tr>

<tr>
<td class="td01"></td>
<td class="td02" ><b>集团调配后余额合计：</b></td>
<td class="td04" >
<b><div id="after_assign_amount"><script type="text/javascript">document.write(new Number('${after_assign_amount}').formatMoney(2,"",",","."));</script></div></b>
</td>
<td class="td01"></td>
<td class="td02" ></td>
<td class="td04">

</td>
</tr>
<tr>
<td class="td03" colspan="6" align="right">
<input type="button" class="button" value="保 存" id="butSave"/>
<input type="button" class="button" value="返 回" id="butBack"/>
</td>
</tr>
</table>

<table width="100%">
<tr>
<td>
<table id="datagrid"></table>
</td>
</tr>
</table>
</div>
</div>

<div id="dialog" >
</div>

</form>
<script type="text/javascript">
var url = "";
var after_assign_amount = new Number('${after_assign_amount}');
var rowIndex = 0;
var tableTitle = $(".pageTitle").html();
$(document).ready(function(){
//客户放大镜
$("#manage_clientname").magnifier({
url:'${systemctx}/commonmagnifier/queryClientMagnifier.json',
columns:[[
{title:'序号',field:'id',hidden:true, formel:'manage_clientid'},
{title:'管理单位名称',field:'name',width:180,sortable:true, formel:'manage_clientname'},
{title:'管理单位编号',field:'code',width:180}
]],
sortName:'code',
sortOrder:'asc',
formid:'queryform',
linkName:'name',
link:'http://www.pan8.net/',
onBeforeOpen:function(p){//打开放大镜前
var queryParams = {//放大镜查询SQL所需的参数
agency_type:'1002',
clientcode:$("input[name='manage_clientname']").val()
};
return queryParams;
}
});

$('#datagrid').datagrid({
width:document.documentElement.clientWidth - 50,
height:'400',
nowrap:true,
formid:'queryform',
autoRowHeight:false,
striped:true,
url:'${systemctx}/draft/draftPool/queryDraftPoolAssignInfo4DataGrid.json?draftGroupPoolId=${draftGroupPool.id}',
sortName:'pool_name',
sortOrder:'desc',
remoteSort:false,
pagination:true,
rownumbers:true,
showFooter:true,
columns:[[
{field:'ck', checkbox:true},
{title:'id',field:'id',hidden:true},
{title:'票据池名称',field:'pool_name',width:135,sortable:true,align:'center'},
{title:'在池票据余额',field:'draft_amount',width:150,sortable:true,align:'right'},
{title:'保证金帐户余额',field:'bond_amount',width:150,align:'right'},
// {title:'电票质押金额',field:'ebill_pledge_amount',width:100,align:'right'},
{title:'池调节额度',field:'pool_adjust_amount',width:100,align:'right'},
{title:'纸票已用额度',field:'used_amount',width:150,sortable:true,align:'right'},
{title:'电票已用额度',field:'ebill_used_amount',width:150,sortable:true,align:'right'},
// {title:'剩余额度',field:'surplus_amount',width:130,sortable:true,align:'right'},
{title:'上级分配额度',field:'assigned_amount_temp',width:150,sortable:true,align:'right',editor:{type:'numberbox',options:{precision:2,groupSeparator:','}}}
]],
toolbar:[
{
text:'导出当前列表',iconCls:'icon-export',handler:function(){
datagridExcelExport('datagrid','queryform',tableTitle,0);
}
},
{
text:'导出所有列表',iconCls:'icon-export',handler:function(){
datagridExcelExport('datagrid','queryform',tableTitle,1);
}
}
],
onUncheck:function(index, rowData){
after_assign_amount = totalAssignAmount();
var ed = $('#datagrid').datagrid('getEditor', {index:index,field:'assigned_amount_temp'});
// 加上数据库中存储的上级分配金额减去输入的金额
after_assign_amount = after_assign_amount.sub(new Number(removeAmountFormat($(ed.target).numberbox('getValue')))).add(new Number(removeAmountFormat(rowData['assigned_amount_temp'])));
document.getElementById("after_assign_amount").innerHTML=after_assign_amount.formatMoney(2,"",",",".");
// 更新集团调配后余额合计
$('#datagrid').datagrid('cancelEdit', index);

},
onCheck:function(index, rowData){
$('#datagrid').datagrid('beginEdit', index);
var ed = $('#datagrid').datagrid('getEditor', {index:index,field:'assigned_amount_temp'});
$(ed.target).numberbox({ onChange: function () {
// 校验下级分配的额度不能小于单位已使用的额度
if(new Number(removeAmountFormat($(ed.target).numberbox('getValue')))<new Number(removeAmountFormat(rowData['used_amount'])).add(new Number(removeAmountFormat(rowData['ebill_used_amount'])))){
alert("上级给下级分配的票据池额度，不能小于当前已使用的余额");
$(ed.target).numberbox('setValue',removeAmountFormat(rowData['assigned_amount_temp']));
}
after_assign_amount = totalAssignAmount();
// 更新集团调配后余额合计
document.getElementById("after_assign_amount").innerHTML=after_assign_amount.formatMoney(2,"",",",".");
}
});
$(ed.target).focus();
},
onCheckAll:function(rows){
for(var i=0;i<rows.length;i++){
// 上级分配金额列置为编辑状态
$('#datagrid').datagrid('beginEdit', i);
var ed = $('#datagrid').datagrid('getEditor', {index:i,field:'assigned_amount_temp'});
// 为编辑对象设置onChange事件
$(ed.target).numberbox({onChange: function (newValue,oldValue) {
// 获取光标所在行的行号
var rowIndex = $(this).closest("tr.datagrid-row").attr("datagrid-row-index");
var rows = $("#datagrid").datagrid('getRows');
// 校验下级分配的额度不能小于单位已使用的额度
if(new Number(removeAmountFormat(newValue))<new Number(removeAmountFormat(rows[rowIndex]['used_amount'])).add(new Number(removeAmountFormat(rows[rowIndex]['ebill_used_amount'])))){
alert("上级给下级分配的票据池额度，不能小于当前已使用的余额");
$(this).numberbox('setValue',removeAmountFormat(oldValue));
$(this).focus();
}
after_assign_amount = totalAssignAmount();
// 更新集团调配后余额合计
document.getElementById("after_assign_amount").innerHTML=after_assign_amount.formatMoney(2,"",",",".");
}
});
}
},
onUncheckAll:function(rows){
for(var index=0;index<rows.length;index++){
$('#datagrid').datagrid('cancelEdit', index);
}
after_assign_amount = new Number('${after_assign_amount}');
// 更新集团调配后余额合计
document.getElementById("after_assign_amount").innerHTML=after_assign_amount.formatMoney(2,"",",",".");
},
onClickRow:function(index,row){
rowIndex = index;
alert(rowIndex);
}
});
$("#butBack").click(function(){
window.location.href="${systemctx}/draft/draftPool/grouppool/groupPoolAssignQuery.jsp";
});
$("#butSave").click(function(){
$.messager.confirm('选择', '是否保存选中票据池分配额度', function(r){
if(r){
var selected_rows = $("#datagrid").datagrid('getSelections');
if(selected_rows==""||selected_rows.length==0) {
alert("列表中没有选中的数据");
return;
}else {
// 下级分配的金额不能大于调配前的票据池余额
if(after_assign_amount>new Number('${draft_amount}').add(new Number('${bond_amount}')).add(new Number('${pool_adjust_amount}'))){
alert("集团调配后的余额合计不能大于调配前的池余额合计");
return;
}
// 选中的id,分配金额收集
var ids="";
var assignAmounts ="";
var rows = $("#datagrid").datagrid('getRows');
for(var i=0; i<rows.length; i++){
var ed = $('#datagrid').datagrid('getEditor', {index:i,field:'assigned_amount_temp'});
if(ed!=null){
ids = rows[i]["id"] + "," + ids;
assignAmounts = $(ed.target).numberbox('getValue') + "," + assignAmounts;
}
}
ids = ids.substring(0, ids.length-1);
assignAmounts = assignAmounts.substring(0, assignAmounts.length-1);
showSending();
$.ajax({
type:'POST',
url:"${systemctx}/draft/draftPool/saveDraftPoolAssign.json",
data:{draftPoolAssignIds:ids,assignAmounts:assignAmounts},
dataType:'json',
success:function(data){
closeSending();
if(data.messagetype==1){
$.messager.alert("操作提示",data.message , "info", function (){
window.location.href="${systemctx}/draft/draftPool/grouppool/groupPoolAssignQuery.jsp";
});
}else if(data.messagetype==2){
$.messager.alert("操作提示",data.message , "error");
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
try{
}catch (e){}
}
});
}
}
});
});

});

function fnPoolDetail(id,canRevMargin){
window.location.href="${systemctx}/draft/query/draftpoolinfoquery/draftPoolMarginQuery.jsp?poolId="+id+"&canRevMargin="+canRevMargin;
}
// 循环合计金额
function totalAssignAmount(){
var after_assign_amount = 0.00;
var rows = $("#datagrid").datagrid('getRows');
for(var i=0;i<rows.length;i++){
var ed = $('#datagrid').datagrid('getEditor', {index:i,field:'assigned_amount_temp'});
if(ed!=null){
after_assign_amount = after_assign_amount.add(new Number(removeAmountFormat($(ed.target).numberbox('getValue'))));
}else{
after_assign_amount = after_assign_amount.add(new Number(removeAmountFormat(rows[i]['assigned_amount_temp'])));
}
}
return after_assign_amount;
}

</script>
<%-- 引入页面尾 --%>
<%@ include file="/pageFloor.jsp" %>