數據表格 - 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>