行编辑一般用于单行数据的增删改，如果不用行编辑实现的话，对于表单数据量不大的情况，可以使用弹窗（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 = '编辑 '; var e2 = '保存 '; var e3 = '删除 '; var e4 = '取消 '; 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(); %> <%--领款单网格--%> 
    

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 = '编辑 '; var e2 = '保存 '; var e3 = '删除 '; var e4 = '取消 '; 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); }