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


    
    

        
票据池额度分配
        

            
    
                

                    

                    
集团客户名称：
                    
${draftGroupPool.client.name}
                    

                    
集团票据池名称：
                    
${draftGroupPool.group_pool_name}
                
                
                

                    

                    
集团池余额合计：
                    

                        
                        
                        
                    
                    
                    

                    
集团池已使用余额合计：
                    

                        
                        
                        
                    
                
                
                

                    

                    
其中：在池票据余额合计：
                    

                        
                    
                    

                    
其中：电票已使用合计：
                    

                        
                    
                
                

                    

                    
            保证金余额合计：
                    

                        
                    
                    
                    

                    
            纸票已使用合计：
                    

                        
                    
                
                

                    

                    
            池调节余额合计：
                    

                        
                    
                    

                    

                    

                    
                
                
                

                    

                    
集团调配后余额合计：
                    

                        

                    
                    

                    

                    

                        
                    
                
                

                    
    
                        
                        
                    
                
            

                    
        
    

    

    
    


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