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

青旅半醒 2022-07-14 11:09 599阅读 0赞

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" %>