EasyUI 動態增刪行並整體提交到後台的最佳實踐

錯誤認知

嘗試用原生 <table>+<input> 手工拼接行，再用 form.submit() 提交，極易出現數組名衝突、索引斷層、驗證困難等問題。

標準方案：DataGrid + getRows

EasyUI 核心組件 DataGrid 內建增刪改查、編輯狀態管理、數據序列化，原生支持整體提交。

1. 定義 DataGrid

<table id="dg" title="可編輯表格" toolbar="#tb" 
     data-options="singleSelect:true,fitColumns:true">
    <thead>
        <tr>
            <th data-options="field:'name',editor:'text'">名稱</th>
            <th data-options="field:'value',editor:'numberbox'">數值</th>
        </tr>
    </thead>
</table>
<div id="tb">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="append()">新增</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeit()">刪除</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="save()">提交</a>
</div>

2. 核心 JS 邏輯

var editIndex = undefined;
function endEditing() {
    if (editIndex == undefined) return true;
    if ($('#dg').datagrid('validateRow', editIndex)) {
        $('#dg').datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
    }
    return false;
}
function append() {
    if (endEditing()) {
        $('#dg').datagrid('appendRow', { name: '', value: 0 });
        editIndex = $('#dg').datagrid('getRows').length - 1;
        $('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
    }
}
function removeit() {
    var row = $('#dg').datagrid('getSelected');
    if (row) {
        var index = $('#dg').datagrid('getRowIndex', row);
        $('#dg').datagrid('deleteRow', index);
    }
}
function save() {
    if (endEditing()) {
        var rows = $('#dg').datagrid('getRows'); // 獲取所有行數據 (含新增/修改)
        var json = JSON.stringify(rows);
        $.ajax({
            url: 'saveData.action',
            type: 'POST',
            data: { gridData: json },
            success: function(r) { alert('保存成功'); }
        });
    }
}

3. 後台接收 (Java 示例)

@PostMapping("saveData")
public Result saveData(@RequestParam String gridData) {
    List> rows = JSON.parseArray(gridData, Map.class);
    // 批量 upsert...
}

為何不推薦手工 form 提交

• 動態行的 name="list[0].field" 索引維護極其繁瑣
• EasyUI DataGrid 已完美解決編輯狀態、驗證、序列化
• AJAX 提交 JSON 比 form 編碼更靈活，支持複雜嵌套對象

參考官方文檔：https://www.jeasyui.com/documentation/index.php