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="dg" class="easyui-datagrid" style="width:800px;height:400px"
       data-options="
       idField:'id',
       view:scrollview,
       rownumbers:true,
       singleSelect:false,
       autoRowHeight:false,
       pagination:true,
       pageSize:30,
       onClickRow:onClickRow,
       showPageInfo:false,
       showRefresh:false
       ">
    <thead>
        <tr>
            <th field="ck" checkbox="true"></th>
            <th field="id" width="50">ID</th>
            <th field="name" width="120" editor='text'>姓名</th>
            <th field="birth" width="140" editor='datebox'>出生日期</th>
            <th field="score" width="100" editor='text'>成绩</th>
        </tr>
    </thead>
</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>
</div>

<script>
let editIndex = undefined;
// 全局维护 DataGrid 所有有效行
let allRows = createMockData(100);

// 初始化 DataGrid
$('#dg').datagrid({
    data: allRows,
    onLoadSuccess:() => { console.log("DataGrid 加载完成"); }
});

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

// 保存当前行编辑
function endEditRow(){
    if(editIndex === undefined) return true;
    if($('#dg').datagrid('validateRow', editIndex)){
        $('#dg').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
    allRows.push(newRow);

    // 刷新 DataGrid
    $('#dg').datagrid('loadData', allRows);

    // 自动进入编辑
    let newIndex = allRows.length - 1;
    $('#dg').datagrid('selectRow', newIndex);
    $('#dg').datagrid('beginEdit', newIndex);
    editIndex = newIndex;

    $('#dg').datagrid('scrollTo', newIndex);
}

// 删除选中行
function removeRows(){
    let selected = $('#dg').datagrid('getChecked');
    if(selected.length === 0){
        $.messager.alert('提示','请先勾选要删除的行');
        return;
    }

    // 从 allRows 中删除
    let idsToDelete = selected.map(r => r.id);
    allRows = allRows.filter(r => !idsToDelete.includes(r.id));

    // 刷新 DataGrid
    $('#dg').datagrid('loadData', allRows);

    editIndex = undefined;
}

// 打印真正需要提交的变更
function confirmDelete(){
    console.log("当前有效数据:", allRows);
}

// 全局 ID 生成
function getNextId(){
    if(allRows.length === 0) return 1;
    let maxId = Math.max(...allRows.map(r=>r.id));
    return maxId + 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>