EasyUiDataGrid中数据编辑⽅式及编辑后数据获取，校验处理
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('tValue',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).clost("tr.datagrid-row").attr("datagrid-row-index");
var rows = $("#datagrid").datagrid('getRows');
});
此次功能核⼼的jsp代码：
<%@ page language="java" contentType="text/html; chart=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">${up_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_adju </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_ud_amount}').add(new Number('${ud_amount}')).formatMoney(2,"",",",".")) </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_ud_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('${ud_amount}').formatMoney(2,"",",","."));</script>
<script type="text/javascript">document.write(new Number('${ud_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,"",",",".")) </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',
formid:'queryform',
linkName:'name',
link:'www.pan8/',
yy申诉
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:fal,
striped:true,
url:'${systemctx}/draft/draftPool/queryDraftPoolAssignInfo4DataGrid.json?draftGroupPoolId=${draftGroupPool.id}',
sortName:'pool_name',
sortOrder:'desc',
remoteSort:fal,
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:'ud_amount',width:150,sortable:true,align:'right'},
{title:'电票已⽤额度',field:'ebill_ud_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(removeA ElementById("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['ud_amount'])).add(new alert("上级给下级分配的票据池额度，不能⼩于当前已使⽤的余额");
$(ed.target).numberbox('tValue',removeAmountFormat(rowData['assigned_amount_temp']));
}
after_assign_amount = totalAssignAmount();
// 更新集团调配后余额合计
}
});
$(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).clost("tr.datagrid-row").attr("datagrid-row-index");
var rows = $("#datagrid").datagrid('getRows');
// 校验下级分配的额度不能⼩于单位已使⽤的额度
if(new Number(removeAmountFormat(newValue))<new Number(removeAmountFormat(rows[rowIndex]['ud_amount'])).add(new Number(removeA alert("上级给下级分配的票据池额度，不能⼩于当前已使⽤的余额");
$(this).numberbox('tValue',removeAmountFormat(oldValue));
在上午英语
$(this).focus();
}
after_assign_amount = totalAssignAmount();
// 更新集团调配后余额合计
}
});
}
},
onUncheckAll:function(rows){
for(var index=0;index<rows.length;index++){
$('#datagrid').datagrid('cancelEdit', index);
}
版籍after_assign_amount = new Number('${after_assign_amount}');
// 更新集团调配后余额合计
},
onClickRow:function(index,row){
rowIndex = index;
alert(rowIndex);
}
});
$("#butBack").click(function(){
window.location.href="${systemctx}/draft/draftPool/grouppool/groupPoolAssignQuery.jsp";
});
$("#butSave").click(function(){
$.firm('选择', '是否保存选中票据池分配额度', function(r){
if(r){
var lected_rows = $("#datagrid").datagrid('getSelections');
if(lected_rows==""||lected_rows.length==0) {
alert("列表中没有选中的数据");
return;
}el {
/
/ 下级分配的⾦额不能⼤于调配前的票据池余额
if(after_assign_amount>new Number('${draft_amount}').add(new Number('${bond_amount}')).add(new Number('${pool_adjust_amount}'))){
alert("集团调配后的余额合计不能⼤于调配前的池余额合计");
return;
}
// 选中的id，分配⾦额收集
var ids="";
