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'); // 设置编辑对的value $(ed.target).numberbox('setValue',removeAmountFormat(rowData['assigned_amount_temp'])); });
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');
});
附录：
EasyUi 官方API文档 http://www.jeasyui.com/documentation/#
功能页面展示：
此次功能核心的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',
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" %>
EasyUi DataGrid中数据编辑方式及编辑后数据获取，校验处理的更多相关文章
- easyui datagrid 中序列化后的日期格式化
1.在easyui datagrid 中序列化后的日期显示为:/Date(1433377800000)/ 2.格式化后的显示为: 2015-06-04 08:30:00 3.使用代码如下: 3.1. ...
- EasyUI DataGrid 实现单行/多行编辑功能
要实现 EasyUI DataGrid 的可编辑很简单,在需要编辑的列添加 editor [编辑器]就可以了. 单行编辑 // 初始化数据列表 function initDatagrid() { $( ...
- JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列
转自 http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...
- easyui datagrid中 多表头方法总结
easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...
- easyui datagrid中datetime字段的显示和增删改查问题
datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...
- JQuery easyUi datagrid 中 editor 动态设置最大值最小值
前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考. 问题 JQuery easyUi datagri ...
- EasyUI DataGrid 中字段 formatter 格式化不起作用
今天用 EasyUI datagrid 来做列表,要对一些数据进行格式化,推断某字段状态时,发现 formatter 格式化相应的函数不起作用. <table id="list_dat ...
- easyui datagrid中关联combox
datagrid中列上关联combobox{ field: 'SysCode', title: '系统代码', width: 150, align: 'left', editor: { type: ' ...
- 在easyui datagrid中formatter数据后使用linkbutton
http://ntzrj513.blog.163.com/blog/static/2794561220139245411997/ formatter:function(value,rowData,ro ...
随机推荐
- smarty 练习： 分页查询
对查出的数据进行分页,并添加查询 在main.php和main.html两个页面操作: 后台:main.php <?php include("../init.inc.php" ...
- phpcms v9 表单向导里添加图片字段，提示会话过期,请重新登陆
用 phpcms v9 制作前端用户提交信息时,有个图片上传的栏目. 如果注释 /phpcms/modules/attachment/attachment.php 20//判断是否登录 21 if(e ...
- Java泛型的基本应用
一.泛型概述 jdk1.5版本以后出现的新特性,用于解决安全问题,是一个安全机制. 好处: 1,将运行时期的问题ClassCastException转到了编译时期. 2,避免了强制转换的麻烦. 什么时 ...
- 一个读取propeties配置文件的工具类，线程安全的
public class ConfigUtil { private static Map<String,Properties> map = new HashMap<String,Pr ...
- 如何获取网站icon
获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon(<link rel="shortcut ico ...
- PHP中的常量
常量与变量不一样,一旦被定义就可以全局访问. 例如: <?php define('CONST_NAME','shiyingyan'); define('RESULT_OK',1); define ...
- assets文件夹资源的访问
访问assets文件夹中的文件,分为以下几个步骤:1.在Activity里面调用getAssets(),获取AssetManager引用2.调用AssetManager.open(String fil ...
- Gridview中的数据导出到excel中
protected void btnExport_Click(object sender, EventArgs e) { //导出全部数据,取消分页 ...
- 51单片机C语言学习笔记8：单片机C51编程规范
1.单片机C51编程规范- 前言 为了提高源程序的质量和可维护性,从而最终提高软件产品生产力,特编写此规范. 2.单片机C51编程规范-范围 本标准规定了程序设计人员进行程序设计时必须遵循的规范.本 ...
- alias, bg, bind, break, builtin, caller, cd, command,
bash, :, ., [, alias, bg, bind, break, builtin, caller, cd, command, compgen, complete, com ...