easyui datagrid editor 编辑器的简单活用以及自定义校验

本文介绍easyui的datagrid如何使用编辑器的功能并且完成自定义的校验

 

1、定义dategrid列表，这里editor主要是设置该字段可以编辑，并且指定自定义编辑类型

editor="{type:'Wdate',options:{required:true}}"

<e:datagrid url=''
                        id="order_detail_data_grid" pagination="true" style="height: 400px" pageSize="15" rownumbers="true"   toolbar="#order_detail_button"  singleSelect="false">
                <thead frozen="true">
                <tr>
                    <th field="ckdelete" width="10%" align="center"  checkbox="true"  halign="center"></th>
                   
                    <th field="month_id" width="10%" align="left" halign="center" resizable="true" editor="{type:'Wdate',options:{required:true}}">账期</th>
                    <th field="prvnce_id" width="10%" align="left" halign="center" resizable="true" editor="{type:'textValue',options:{required:true}}">省分</th>
                    <th field="model_attribution" width="10%" align="left" halign="center" resizable="true" formatter="orderdetail_final_modelFormatter" editor="{type:'combobox', options:{required:true,validType:'isBlankCombobox',url:'<e:url value="/pages/audit/reportOrder/order_result_action.jsp?eaction=model_attr_code"></e:url> ',valueField:'value', textField:'text' }}">模型类型</th><!---->

                </tr>
                </thead>
                <thead>
                <tr>
                    <th field="model_id" width="10%" align="left" halign="center" resizable="true" editor="{type:'textValue',options:{required:true}}">模型</th>
                    <th field="dispatch_id" width="10%" align="left" halign="center" resizable="true" editor="{type:'dispatchid'}">编号</th>
                    <th field="dispatch_nm" width="10%" align="left" halign="center" resizable="true" editor="{type:'textValue',options:{required:true}}">名称</th>
                    <th field="dispatch_substance" width="10%" align="left" halign="center" resizable="true" editor="{type:'textValue',options:{required:true}}">描述</th>
                    <th field="dispatch_time" width="10%" align="left" halign="center" resizable="true" editor="{type:'WdateDate',options:{required:true}}">abx</th>
                    <th field="issue_num" width="10%" align="left" halign="center" resizable="true" editor="{type:'numberbox',options:{required:true,min:0,precision:0,validType:['length[1,12]']}}">记录数</th>
                    <th field="issue_sum" width="20%" align="left" halign="center" editor="{type:'textDecimal',options:{required:true,validType:['isBlank','intOrFloat','length[1,16]']}}">金额</th>
                    <th field="extend_latn_num" width="15%" align="left" halign="center" resizable="true" formatter="orderdetail_final_extand_latn_num" editor="{type:'combobox', options:{required:true,validType:'isBlankCombobox',url:'<e:url value="/pages/audit/reportOrder/order_result_action.jsp?eaction=model_extand_latn_num"></e:url> ',valueField:'value', textField:'text' }}">核查</th>
                    <th field="dispatch_state" width="10%" align="left" halign="center" resizable="true" formatter="orderDetail_final_dispatch_state"  editor="{type:'combobox', options:{onSelect:order_detail_dispatch_state_change,required:true,validType:'isBlankCombobox',url:'',valueField:'value', textField:'text' }}">状态</th>
                    <th field="dispatch_state_time" width="10%" align="left" halign="center" resizable="true" editor="{type:'WdateDate',options:{required:true}}">变更时间</th>
                    <th field="verify_num" width="10%" align="left" halign="center" resizable="true" editor="{type:'validatebox',options:{required:true,validType:['intOrFloat','length[1,12]']}}">记录数(条)</th>
                    <th field="verify_risk_sum" width="12%" align="left" halign="center" resizable="true" editor="{type:'validatebox',options:{required:true,validType:['intOrFloat','length[1,12]']}}">风险金额(分)</th>
                    <th field="risk_verify_sum" width="10%" align="left" halign="center" resizable="true" editor="{type:'textDecimal',options:{required:true,validType:['isBlank','intOrFloat','length[1,16]']}}">金额</th>
                    <th field="ck" width="10%" align="left" halign="center" resizable="true" formatter="problemSure_final_ck">操作</th>
                </tr>
                </thead>
            </e:datagrid>

 

2、自定义编辑类型设置

这里的editors有五种重写的方法，这里init在定义好input框之后，要做一个input.validatebox(options)操作，否则不产生自动

方法	参数	描述
init	container, options	初始化编辑器并返回目标对象。
destroy	target	如果有必要销毁编辑器。
getValue	target	从编辑器中获取值。
setValue	target , value	向编辑器中写入值。
resize	target , width	如果有必要调整编辑器的大小。

$.extend($.fn.datagrid.defaults.editors, {
        numberspinner: {
            init: function(container, options){
                var input = $('<input type="text">').appendTo(container);
                return input.numberspinner(options);
            },
            destroy: function(target){
                $(target).numberspinner('destroy');
            },
            getValue: function(target){
                return $(target).numberspinner('getValue');
            },
            setValue: function(target, value){
                $(target).numberspinner('setValue',value);
            },
            resize: function(target, width){
                $(target).numberspinner('resize',width);
            }
        },
        Wdate:{
            init: function(container, options){
                var input = $('<input type="text" class="datagrid-editable-input easyui-validatebox" onclick=\'WdatePicker({dateFmt:"yyyyMM",readOnly:true})\'>').appendTo(container);
                return input.validatebox(options);
            },
            getValue: function(target){
                return $(target).val()
            },
            setValue: function(target, value){
                $(target).val(value)
            }
        },
        WdateDate:{
            init: function(container, options){
                var input = $('<input type="text" class="datagrid-editable-input easyui-validatebox" onclick=\'WdatePicker({dateFmt:"yyyy-MM-dd HH:mm:ss ",readOnly:true})\'>').appendTo(container);
                return input.validatebox(options);
            },
            getValue: function(target){
                return $(target).val()
            },
            setValue: function(target, value){
                $(target).val(value)
            }
        },
        textValue:{
            init: function(container, options){
                var input = $('<input type="text"  class="datagrid-editable-input easyui-validatebox" >').appendTo(container);
                return input.validatebox(options);
            },
            getValue: function(target){
                return $(target).val()
            },
            setValue: function(target, value){
                $(target).val(value)
            }
        },
        textDecimal:{
            init: function(container, options){
                var input = $('<input type="text" >').appendTo(container);
                return input.validatebox(options);
            },
            getValue: function(target){
                return $(target).val()
            },
            setValue: function(target, value){
                if(value!=null&value!=""){
                    $(target).val(value)
                }else {
                    $(target).val(0)
                }

            }
        },
        dispatchid:{
            init: function(container, options){
                var input = $('<input type="text" >').appendTo(container);
                return input;
            },
            getValue: function(target){
                return $(target).val()
            },
            setValue: function(target, value){
                if(value!=null&&value!=""){//editor赋值的时候判断，如果有值，就直接赋值，如果没有值，那就去接口查询，然后取到的值赋值给input框
                    $(target).val(value)
                }else {
                    $.post("<e:url value="getDispatch_id.e"></e:url>",null, function(rsp) {
                        if(rsp.dispatchId){
                            $(target).val(rsp.dispatchId)
                        }
                    }, "JSON").error(function() {

                    });
                }

            }
        }
    });

 

 

 

3、datagrid 定义，需要完成如下功能

 

功能点	方法
单击一行时，改变此行的编辑状态，改为input框	onClickRow_order_detail
分页之前，提示用户，此页面还有未被保存的东西	onBeforeLoad_order_detail

 

$('#order_detail_data_grid').datagrid({
            onClickRow: onClickRow_order_detail,
            onBeforeLoad:onBeforeLoad_order_detail

        });

 

3.1 首先看第一个，onClickRow_order_detail

 

    

	var editIndex = undefined;
    function endEditing_order_detail(){
        if (editIndex == undefined){return true}
        //alert($('#order_detail_data_grid').datagrid('validateRow', editIndex))
		//校验此行数据是否合乎规范
        if ($('#order_detail_data_grid').datagrid('validateRow', editIndex)){
            $('#order_detail_data_grid').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            $.messager.alert('提示','请您填写完整本行数据','info',function (){
                return false;
            })
        }
    }
	//点击事件 点击一行时，编辑一行
    function onClickRow_order_detail(index){
        if (editIndex != index){
            if (endEditing_order_detail()){
                $('#order_detail_data_grid').datagrid('selectRow', index).datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#order_detail_data_grid').datagrid('selectRow', editIndex);
            }
        }
     }
	 //添加一行
    function append_order_detail() {
        if (endEditing_order_detail()) {
            $('#order_detail_data_grid').datagrid('appendRow', {  });
            editIndex = $('#order_detail_data_grid').datagrid('getRows').length - 1;
            $('#order_detail_data_grid').datagrid('selectRow', editIndex)
                .datagrid('beginEdit', editIndex);
        }
    }
	//批量删除
    function delete_order_detail() {
        var selectObj=$("#order_detail_data_grid").datagrid("getSelections");
        if(selectObj.length==0){
            $.messager.alert("提示","请选择需要删除的数据。");
            return;
        }
        $.messager.confirm('确认框', '您确定要删除这些数据吗？', function(r) {
            if(r){
                var ids="";
                for(var x=0;x<selectObj.length;x++){
                    var data=selectObj[x];
                    var deleteIndex=$('#order_detail_data_grid').datagrid('getRowIndex',data);
                    $('#order_detail_data_grid').datagrid('cancelEdit', deleteIndex)
                        .datagrid('deleteRow', deleteIndex);
                }
            }
        });

    }

    //暂存
    function accept_order_detail(){
        if (endEditing_order_detail()){
            $.messager.progress();
            var rows = $('#order_detail_data_grid').datagrid('getChanges');
            var $dg=$('#order_detail_data_grid');
            if ($dg.datagrid('getChanges').length) {
                var updated = $dg.datagrid('getChanges', "updated");
                var inserted = $dg.datagrid('getChanges', "inserted");
                var deleted = $dg.datagrid('getChanges', "deleted");
                var effectRow = new Object();
                if (updated.length) {
                    effectRow["updated"] = JSON.stringify(updated);

                }
                if(inserted.length){
                    effectRow["inserted"] = JSON.stringify(inserted);

                }
                if(deleted.length){
                    effectRow["deleted"] = JSON.stringify(deleted);

                }
                effectRow['report_month']='${param.report_month}'
                effectRow['user_id']='${sessionScope.UserInfo.DATA_USER_ID}'
                effectRow['user_name']='${sessionScope.UserInfo.USER_NAME}'
                //$.messager.progress('close');
                $.post("<e:url value="zancunOrderDetail1.e"></e:url>",effectRow, function(rsp) {
                    if(rsp.status){
                        $.messager.progress('close');
                        $.messager.alert("提示", "暂存本页成功！");
                        editIndex = undefined;
                        $dg.datagrid('acceptChanges');
                    }
                }, "JSON").error(function() {
                    $.messager.progress('close');
                     $.messager.alert("提示", "暂存本页错误了！");
                });
                //$dg.datagrid('acceptChanges');
            }else {
                $.messager.progress('close');
                $.messager.alert("提示", "暂存本页成功！");
                $dg.datagrid('acceptChanges');
            }

        }
    }

3.2 在分页之前提示，有未保存数据

 function confirm_is_next_page_order_detail(pager,page){
        var msg="您尚未暂存本页数据，此操作会放弃本页修改，是否继续？";
        if (confirm(msg)==true){
            editIndex = undefined
            return true;
        }else {
            $(pager).pagination('refresh',{	// 改变选项并刷新分页栏信息
                pageNumber: page-1
            });
            return false;
        }

    }
    function onBeforeLoad_order_detail(param){
        var $dg = $(this);
        var page =param.page
        //var rows=param.rows;
        var pager = $dg.datagrid('getPager');
        if($dg.datagrid('getChanges').length) {
            return confirm_is_next_page_order_detail(pager,page)
        }else {
            editIndex = undefined
            $dg.datagrid('acceptChanges');
        }
    }

4.根据某个字段，处理这个字段相关联字段的校验，赋值

 function deal_rep_change_situation_change(record){
        var value=record.value;
        //var text=record.text;
        var $dg=$("#deal_rep_data_grid")
        var index =$(this).parents("tr.datagrid-row").attr("datagrid-row-index")//获取当前编辑行的行号
        var editor_unchange_reason=$dg.datagrid('getEditor', {index:index,field:'unchange_reason'});//获取改字段的editor参数
        var tagrget=editor_unchange_reason.target;
        if(value=='10'){
            tagrget.validatebox({required:false})//改变该字段的validate参数
        }else {
            tagrget.validatebox({required:true})
        }
    }
    function deal_rep_change_situation_load(){
        var value=$(this).combobox('getValue');
        var index =$(this).parents("tr.datagrid-row").attr("datagrid-row-index")
        var $dg=$("#deal_rep_data_grid")
        var editor_unchange_reason=$dg.datagrid('getEditor', {index:index,field:'unchange_reason'});
        var tagrget=editor_unchange_reason.target;
        if(value=='10'){
            tagrget.validatebox({required:false})
        }else {
            tagrget.validatebox({required:true})
        }

    }
    function order_detail_dispatch_state_change(record){
        var value=record.value;
        var $dg=$("#order_detail_data_grid")
        var index =$(this).parents("tr.datagrid-row").attr("datagrid-row-index")
        var editor_verify_num=$dg.datagrid('getEditor', {index:index,field:'verify_num'});
        var editor_verify_risk_sum=$dg.datagrid('getEditor', {index:index,field:'verify_risk_sum'});
        var editor_risk_verify_sum=$dg.datagrid('getEditor', {index:index,field:'risk_verify_sum'});
        var editor_verify_num_target=editor_verify_num.target;
        var editor_verify_risk_sum_target=editor_verify_risk_sum.target;
        var editor_risk_verify_sum_target=editor_risk_verify_sum.target;
        if(value=='10'){
            $(editor_verify_num_target).val(0)//赋值
            $(editor_verify_risk_sum_target).val(0)
            $(editor_risk_verify_sum_target).val(0)
        }else if (value=='20'){
            $(editor_risk_verify_sum_target).val(0)
        }
    }

4.1 自定义校验方法

$.extend($.fn.validatebox.defaults.rules, {
            isBlank: {
                validator: function (value, param) {
                    return $.trim(value) != ''
                },
                message: '不能为空，全空格也不行'
            },
            isBlankCombobox: {
                validator: function (value, param) {
                    return $.trim(value) != '请选择'
                },
                message: '请选择选框内容'
            },
            checkFloat: {
                validator: function(value, param) {
                    return /^[+|-]?([0-9]+\.[0-9]+)|[0-9]+$/.test(value);
                },
                message: '请输入合法数字'
            },
            intOrFloat: {// 验证整数或小数
                validator: function (value) {
                    return /^\d+(\.\d+)?$/i.test(value);
                },
                message: '请输入数字，并确保格式正确'
            },
            integer: {// 验证整数 可正负数
                validator: function (value) {
                    //return /^[+]?[1-9]+\d*$/i.test(value);

                    return /^([+]?[0-9])|([-]?[0-9])+\d*$/i.test(value);
                },
                message: '请输入整数'
            },
        });

 

 

 

致此，所有功能实现，本人微信号zcy2366585970，欢迎大家提问