EasyUI datagrid可编辑行

最新推荐文章于 2025-05-19 21:48:24 发布

gghh2015

最新推荐文章于 2025-05-19 21:48:24 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/gghh2015/article/details/78734574

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍使用EasyUI实现表格的编辑与保存功能。通过JavaScript实现了表格行内编辑功能，并在保存时通过Ajax向服务器发送数据。同时展示了如何更新表格中的特定单元格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图：

function loadDatagrid(){
        $('#dg').datagrid({
            url:'kkkkkk.do?method=queryyyyy',
            method: 'POST',
            title: '加载表格',
            loadMsg: '正在加载，请稍后...',
            striped: true,
            fitColumns: true,
            autoRowHeight: true,
            singleSelect: true,
            pagination: true,
            rownumbers: true,
            columns: [[
                {field:'ck', checkbox:true },
                {field: 'abcId',  title: '号', width:80, align: 'center'}, 
                {field: 'value',  title: '最大服务数',  width:80, align: 'center', editor:'numberbox'},
                {field: 'createTime',  title: '设置时间',  width:100, align: 'center'},
                {field : 'option', title : '操作', width : 60, align : 'center',
                    formatter:function(value,row,index){
                        var btn="<a class='link-button' href='javascript:editOne("+index+")'>编辑 </a>";
                        btn += "  <a class='link-button' href='javascript:saveOne("+index+")'>保存 </a> ";
                        return btn; 
                }
            }
            ]]
        }); 
    }
    
    <%--编辑选中行内的最大服务数--%>
    function editOne(index){
        $('#dg').datagrid('beginEdit', index);
    }
    
    <%--保存编辑行--%>
    function saveOne(index){
        var row = $('#dg').datagrid('getSelected');
        $('#dg').datagrid('endEdit', index);
        var params = {
            id : row.abcId,
            max : row.value,
        };
        $.ajax({   
            url:  "cccccc.do?method=sssssss",   
            data: params,
            type: 'POST',  
            dataType: 'json',   
            timeout: 5000,  
            async: false,   
            error: function(){   
                alert('保存失败!');
                return false;
            },   
            success: function(json){     
                alert('保存成功！');
                //重新加载该行的value单元格和createtime单元格
                $('#dg').datagrid('updateRow', {index:index, 
                     row:{paramValue: json.max, createTime: json.createTime} 
                }); 
            }
           }); 
    }