数据表格 - DataGrid - 行编辑

行编辑一般用于单行数据的增删改，如果不用行编辑实现的话，对于表单数据量不大的情况，可以使用弹窗（Dialog），如果数据量比较大，也就是需要操作的数据比较多的时候，可以新开一个tab页。

 

• 新增/编辑

调用DataGrid的appendRow或insertRow，appendRow在当前页最后一行新增一行空白行，appendRow在指定行新增，index从0开始计数

 

设置可以被编辑的行

columns: [[
    {field: 'id', title: 'id', width: 100},
    {field: 'jine', title: '金额', width: 100, editor: 'text'},
    {field: 'fangshi', title: '领款方式', width: 100, align: 'right', editor: 'text'},
    {field: 'lingkuanren', title: '领款人', width: 100, align: 'right', editor: 'text'},
    {field: 'beizhu', title: '备注', width: 100, align: 'right', editor: 'text'},
    {
        field: 'action', title: '动作', width: 150, align: 'right',
        formatter: function (value, row, index) {
            var e1 = '<a href="#" class="easyui-linkbutton" onclick="editrow(this)">编辑</a> ';
            var e2 = '<a href="#" class="easyui-linkbutton" onclick="saverow(this)">保存</a> ';
            var e3 = '<a href="#" class="easyui-linkbutton" onclick="deleterow(this)">删除</a> ';
            var e4 = '<a href="#" class="easyui-linkbutton" onclick="cancelrow(this)">取消</a> ';
            return e1 + e2 + e3 + e4;
        }
    }
]],

添加editor属性

function getRowIndex(target) {
    var tr = $(target).closest('tr.datagrid-row');
    return parseInt(tr.attr('datagrid-row-index'));
}

//编辑
function editrow(target) {
    $('#lkd-datagrid').datagrid('beginEdit', getRowIndex(target));
}


//新增

function insert() {
    var row = $('#lkd-datagrid').datagrid('getSelected');
    if (row) {
        var index = $('#lkd-datagrid').datagrid('getRowIndex', row);
    } else {
        index = 0;
    }
    $('#lkd-datagrid').datagrid('insertRow', {
        index: index,
        row: {
            jine: 100,
            fangshi: 1
        }
    });
    $('#lkd-datagrid').datagrid('selectRow', index);
    $('#lkd-datagrid').datagrid('beginEdit', index);
}

• 保存

function saverow(target) {
    console.log("Save Index:" + getRowIndex(target));//要保存的元素的索引,0 开始计数
    $('#lkd-datagrid').datagrid('endEdit', getRowIndex(target));
}


endEdit方法调用后，会触发

onAfterEdit: function (index, row) {
    row.editing = false;
    updateActions(index);
},

function updateActions(index) {
    $('#lkd-datagrid').datagrid('updateRow', {
        index: index,
        row: {}
    });
    var rows = $("#lkd-datagrid").datagrid("getRows");
    var row = rows[index];
    console.log(row);//ajax调用
}



完整前端代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
    String homePage = request.getContextPath();
%>
<%--领款单网格--%>
<div id="lkd-datagrid" fit="true"></div>

<script type="text/javascript">
    $('#lkd-datagrid').datagrid({
//        title: '领款单',
        url: "<%=homePage%>/t00LkdController/lkd.ajax?get",
        pagination: true,
//        iconCls: 'icon-add',
        singleSelect: true,
        idField: 'id',
        fit: true,
        toolbar: [{
            iconCls: 'icon-add',
            handler: function () {
                insert();
            }
        }],

columns: [[
        {field: 'id', title: 'id', width: 100},
        {field: 'jine', title: '金额', width: 100, editor: 'text'},
        {field: 'fangshi', title: '领款方式', width: 100, align: 'right', editor: 'text'},
        {field: 'lingkuanren', title: '领款人', width: 100, align: 'right', editor: 'text'},
        {field: 'beizhu', title: '备注', width: 100, align: 'right', editor: 'text'},
        {
            field: 'action', title: '动作', width: 150, align: 'right',
            formatter: function (value, row, index) {
                var e1 = '<a href="#" class="easyui-linkbutton" onclick="editrow(this)">编辑</a> ';
                var e2 = '<a href="#" class="easyui-linkbutton" onclick="saverow(this)">保存</a> ';
                var e3 = '<a href="#" class="easyui-linkbutton" onclick="deleterow(this)">删除</a> ';
                var e4 = '<a href="#" class="easyui-linkbutton" onclick="cancelrow(this)">取消</a> ';
                return e1 + e2 + e3 + e4;
            }
        }
    ]],
    onBeforeEdit: function (index, row) {
        row.editing = true;
        updateActions(index);
    },
    onAfterEdit: function (index, row) {
        row.editing = false;
        updateActions(index);
    },
    onCancelEdit: function (index, row) {
        row.editing = false;
        updateActions(index);
    }
});

function updateActions(index) {
    $('#lkd-datagrid').datagrid('updateRow', {
        index: index,
        row: {}
    });
    var rows = $("#lkd-datagrid").datagrid("getRows");
    var row = rows[index];
    console.log(row);//ajax调用
}
function getRowIndex(target) {
    var tr = $(target).closest('tr.datagrid-row');
    return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target) {
    $('#lkd-datagrid').datagrid('beginEdit', getRowIndex(target));
}

function deleterow(target) {
    $.messager.confirm('提示', '确认删除?', function (r) {
        if (r) {
            //被删除数据在当前网格中的顺序索引,从0开始计数
            var index = getRowIndex(target);
            var delId = $(target).closest('tr.datagrid-row').find("td").find("div").html();
            console.log("删除ID:" + delId);
            var dateJson = {
                id: delId
            };
            $.ajax({
                type: "POST",
                url: "<%=homePage%>/t00LkdController/lkd.ajax?del",
                data: JSON.stringify(dateJson),
                cache: false,
                dataType: "json",
                contentType: 'application/json;charset=utf-8',
                success: function (data) {
                    if ("-1" == data.st) {
                        $.messager.alert('警告', "删除失败:" + data.msg);
                    } else {
                        $('#lkd-datagrid').datagrid('deleteRow', index);
                    }
                }

            })

        }
    });
}

    function saverow(target) {
        console.log("Save Index:" + getRowIndex(target));//要保存的元素的索引,0 开始计数
        $('#lkd-datagrid').datagrid('endEdit', getRowIndex(target));
    }


    function cancelrow(target) {
        $('#lkd-datagrid').datagrid('cancelEdit', getRowIndex(target));
    }
    function insert() {
        var row = $('#lkd-datagrid').datagrid('getSelected');
        if (row) {
            var index = $('#lkd-datagrid').datagrid('getRowIndex', row);
        } else {
            index = 0;
        }
        $('#lkd-datagrid').datagrid('insertRow', {
            index: index,
            row: {
                jine: 100,
                fangshi: 1
            }
        });
        $('#lkd-datagrid').datagrid('selectRow', index);
        $('#lkd-datagrid').datagrid('beginEdit', index);
    }
</script>