workspace/code/base-project/base-app/test2.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>DataGrid 编辑 + 多选删除 + 彻底删除</title>
    <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script src="https://www.jeasyui.com/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="https://www.jeasyui.com/easyui/datagrid-scrollview.js"></script>
    <style>
        .datagrid-editable-input {
            width: 100% !important;
        }
    </style>
</head>

<body>

    <h3>DataGrid 编辑 + 多选删除 + 彻底删除 示例（维护 allRows）</h3>

    <table id="subgrid"></table>

    <div style="margin-top:10px;">
        <a href="javascript:endEditRow()" class="easyui-linkbutton" iconCls="icon-save">保存当前行</a>
        <a href="javascript:removeRows()" class="easyui-linkbutton" iconCls="icon-remove">删除所选</a>
        <a href="javascript:confirmDelete()" class="easyui-linkbutton" iconCls="icon-save">彻底删除</a>
        <a href="javascript:addRow()" class="easyui-linkbutton" iconCls="icon-add">新增一行</a>
        <a href="javascript:getData()" class="easyui-linkbutton" iconCls="icon-add">获取数据</a>
    </div>

    <script>
        let editIndex = undefined;
        let allRows = createMockData(2000);

        $('#subgrid').datagrid({
            idField: 'id',
            fit: false,
            height: 400,
            singleSelect: false,
            rownumbers: false,
            autoRowHeight: false,
            pagination: true,
            pageSize: 20,
            view: scrollview,
            onClickRow: onClickRow,
            showPageInfo: false,
            showRefresh: false,
            columns: [[
                {
                    field: 'rownumber',
                    title: '',
                    width: 30,
                    align: 'center',
                    formatter: function (value, row, index) {
                        return index + 1;
                    },
                    styler: function () {
                        return `
                            background-color: #efefef;
                            background: -webkit-linear-gradient(top, #F9F9F9 0, #efefef 100%);
                            background: -moz-linear-gradient(top,#F9F9F9 0,#efefef 100%);
                            background: -o-linear-gradient(top,#F9F9F9 0,#efefef 100%);
                            background: linear-gradient(to bottom, #F9F9F9 0, #efefef 100%);
                            background-repeat: repeat-x;
                            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F9F9F9,endColorstr=#efefef,GradientType=0);
                            padding: 0px
                        `
                    }
                },
                { field: 'ck', checkbox: true },
                { field: 'id', title: 'ID', width: 50 },
                { field: 'name', title: '姓名', width: 120, editor: 'text' },
                { field: 'birth', title: '出生日期', width: 140, editor: 'datebox' },
                { field: 'score', title: '成绩', width: 100, editor: 'text' }
            ]],
            data: allRows
        });

        // 点击行编辑
        function onClickRow(index) {
            if (editIndex !== index) {
                if (endEditRow()) {
                    $('#subgrid').datagrid('beginEdit', index);
                    editIndex = index;
                }
            }
        }

        // 保存行
        function endEditRow() {
            if (editIndex === undefined) return true;
            if ($('#subgrid').datagrid('validateRow', editIndex)) {
                $('#subgrid').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                $.messager.alert('提示', '请填写完整！');
                return false;
            }
        }

        // 新增行
        function addRow() {
            if (!endEditRow()) return;

            let newRow = { id: getNextId(), name: '', birth: '', score: '' };
            allRows.push(newRow);
            $('#subgrid').datagrid('loadData', allRows);

            let newIndex = allRows.length - 1;
            $('#subgrid').datagrid('selectRow', newIndex);
            $('#subgrid').datagrid('beginEdit', newIndex);
            editIndex = newIndex;
            $('#subgrid').datagrid('scrollTo', newIndex);
        }

        // 删除行
        function removeRows() {
            let selected = $('#subgrid').datagrid('getChecked');
            if (selected.length === 0) { $.messager.alert('提示', '请先勾选要删除的行'); return; }
            let ids = selected.map(r => r.id);
            allRows = allRows.filter(r => !ids.includes(r.id));
            $('#subgrid').datagrid('loadData', allRows);
            editIndex = undefined;
        }

        function getData() {
            console.log("===getData===")
            console.log($('#subgrid').datagrid('getData'));
            console.log("===getChanges===")
            console.log($('#subgrid').datagrid('getChanges'));
        }

        // 打印数据
        function confirmDelete() { console.log('当前有效数据:', allRows); }

        // ID 生成
        function getNextId() {
            if (allRows.length === 0) return 1;
            return Math.max(...allRows.map(r => r.id)) + 1;
        }

        // 生成模拟数据
        function createMockData(count = 100) {
            let data = [];
            for (let i = 1; i <= count; i++) {
                data.push({
                    id: i,
                    name: "用户" + i,
                    birth: randomDate("1980-01-01", "2005-12-31"),
                    score: Math.floor(Math.random() * 41) + 60
                });
            }
            return data;
        }

        // 随机日期
        function randomDate(start, end) {
            let st = new Date(start).getTime();
            let et = new Date(end).getTime();
            let t = st + Math.random() * (et - st);
            let d = new Date(t);
            return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
        }
    </script>
</body>

</html>