EasyUi DataGrid中資料編輯方式及編輯後資料獲取，校驗處理
阿新 • • 發佈：2019-01-23
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" %>