easyui 表格datagrid行编辑操作进行验证及后台如何接收

最新推荐文章于 2025-07-15 14:35:40 发布

原创最新推荐文章于 2025-07-15 14:35:40 发布 · 3.1k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

easyui 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用EasyUI的Datagrid组件实现行编辑功能，包括前端页面设计、JavaScript代码实现及后端数据处理。通过具体示例，展示了如何配置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("&quot;","\\\"");//替换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: '请输入英文字母'
        }
    })