easyui 表格datagrid行編輯操作進行驗證及後臺如何接收

實現效果

首先是前臺頁面，定義一個datagrid

<div id="tb" style="height:auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove"plain="true">刪除</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true">保存</a>
</div>

<table id="addRule" class="easyui-datagrid"></table>

js填充表格數據，要開啓行編輯必須有onClickRow屬性，並在需要編輯的column上加editor

  var editIndex = undefined;//定義編輯行的index

$('#addRule').datagrid({
                url: 'url',//請求的url
                nowrap: false,//是否換行
                fitColumns: true,//是否自適應
                onClickRow:function(rowIndex, rowData){// 鼠標單擊某一行是開啓該行的編輯狀態
                   if (editIndex != rowIndex){
                       if (endEditing()){
                           $('#addRule').datagrid('selectRow', rowIndex)
                               .datagrid('beginEdit', rowIndex);
                           editIndex = rowIndex;
                       } else {
                           $('#addRule').datagrid('selectRow', editIndex);
                       }
                   }
               },  
                columns: [[
                    {
                        field: 'fieldName', title: '字段名稱', width:50,height:20, editor: {
                            type:'textbox',//文本框爲text
                            options: {
                                required: true, //是必填項
                                validType: 'english'//驗證方式，english爲自定義驗證
                            },
                        }
                    },
                    {field:'fieldIntroduce',title:'字段簡介',width:50,height:20,
                        editor: {
                            type: 'textbox',
                            options: {
                                required: true,
                                validType: 'isEmpty'//驗證不爲空
                            },
                        }
                    },
                    {field:'weight',title:'權重' ,width:50,height:20,
                        editor: {
                            type: 'numberbox',//文本框爲數字
                            options: {
                                required: true,
                                validType: 'isEmpty'
                            },
                        }
                    }
                ]],
                toolbar: '#tb',
            });

 給工具條中添加、刪除、保存綁定監聽調用

 $("#tb a").unbind().click(function () {
            var btn = $(this).attr("iconCls");
            switch (btn) {
                case "icon-add":
                    append();
                    break;
                case "icon-remove":
                    remove();
                    break;
                case "icon-save":
                    accept();
                    break;
            }
        });

添加事件

 //新增時調用
    function append(){
        if (endEditing()){
            $('#addRule').datagrid('appendRow',{weight:1});//添加一行數據，設置默認權重爲1
            editIndex = $('#addRule').datagrid('getRows').length-1;
            $('#addRule').datagrid('selectRow', editIndex)
                .datagrid('beginEdit', editIndex);
        }
    }

刪除事件

  //刪除時調用
    function remove(){
        if (editIndex == undefined){return}
        $('#addRule').datagrid('cancelEdit', editIndex)
            .datagrid('deleteRow', editIndex);
        editIndex = undefined;
    }

保存事件

 function accept(){
        if (endEditing()){
            if ($("#addRule").datagrid('getChanges').length) {
                var row = $('#grid').datagrid("getSelected");
                var addRuleRows = $("#addRule").datagrid('getRows');//獲得表格所有數據
                $.post("save",{rows:JSON.stringify(addRuleRows),type:row.value},function(result){
                    var flag = config.executeResult(result);
                    if(flag){
                        config.alert("保存成功")
                        $("#addRule").datagrid("reload");
                    }
                },'json')
            }
        }
    }

後臺獲取行編輯中所有數據，通過fastjson將json串轉換爲對應的實體對象

 @PostMapping("/save")
    public String findAllMatchType(@RequestParam("rows") String rows, @RequestParam("type") Integer type) {
        String matchStr = rows.replaceAll(""","\\\"");//替換json傳參中轉義字符
        List<Match> matches= JSONObject.parseArray(matchStr,Match.class);//將json串轉換爲實體類
    
        return "成功";
    }

自定義驗證。更多驗證規則參考：https://www.cnblogs.com/lansy/p/4627649.html

   $.extend($.fn.validatebox.defaults.rules, {
        english: {// 驗證英語
            validator: function (value) {
                return /^[A-Za-z]+$/i.test(value);
            },
            message: '請輸入英文字母'
        }
    })