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 编辑 + 多选删除 + 彻底删除 示例</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,
       data: createMockData(100)
       ">
    <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>
</div>

<script>
let editIndex = undefined;

// 初始化 Datagrid 数据
$('#dg').datagrid({
    data: createMockData(100)
});
// 2. 获取分页控件并绑定事件
var pager = $('#dg').datagrid('getPager');
pager.pagination({
    showRefresh: false, 
    showPageList: false, 
    onBeforeRefresh: function(){
        console.log('onBeforeRefresh triggered');
    },
    onRefresh: function(pageNumber, pageSize){
        console.log('onRefresh triggered', pageNumber, pageSize);
        // 刷新数据
        var newData = createMockData(300);
        $('#dg').datagrid('loadData', newData);
        $('#dg').datagrid('clearSelections');
        $('#dg').datagrid('clearChecked');
    }
});

// 点击行进入编辑模式
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 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 startTime = new Date(start).getTime();
    let endTime = new Date(end).getTime();
    let randomTime = startTime + Math.random() * (endTime - startTime);
    let d = new Date(randomTime);

    return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
}


// 批量删除（不立即提交）
function removeRows() {
    let rows = $('#dg').datagrid('getChecked');
    if(rows.length === 0){
        $.messager.alert('提示', '请先勾选要删除的行');
        return;
    }

    // 倒序删除避免索引错乱
    let indexes = rows.map(row => $('#dg').datagrid('getRowIndex', row))
                      .sort((a,b) => b - a);

    indexes.forEach(index => $('#dg').datagrid('deleteRow', index));


    $('#dg').datagrid('clearSelections');
    $('#dg').datagrid('clearChecked');
}


// 获取真正删除的数据
function confirmDelete(){
    let deleted = $('#dg').datagrid('getChanges','deleted');
    console.log("真正需要提交到后台删除的数据：", deleted);
    let updated = $('#dg').datagrid('getChanges','updated');
    console.log("updated:", updated);
       let inserted = $('#dg').datagrid('getChanges','inserted');
    console.log("inserted:", inserted);
}

let currentCell = { rowIndex: null, field: null };

// 监听编辑器加载，记录焦点单元格
$('#dg').datagrid({
    onBeginEdit: function (rowIndex, rowData) {

        let editors = $(this).datagrid('getEditors', rowIndex);

        editors.forEach(e => {

           $(e.target).off('focus').on('focus', function () {
                currentCell.rowIndex = rowIndex;
                currentCell.field = e.field;

                // 获取所有列 field
                let fields = $('#dg').datagrid('getColumnFields', true) // true = 冻结列
                            .concat($('#dg').datagrid('getColumnFields', false)); // false = 普通列

                let colIndex = fields.indexOf(e.field);

                console.log(`👉 聚焦位置：行=${currentCell.rowIndex}, 列索引=${colIndex}, field=${currentCell.field}`);
            });


            // 监听粘贴事件
            $(e.target).off('paste').on('paste', function (event) {
                setTimeout(() => {  // 延迟确保粘贴内容已写入 input
                    let pastedValue = $(this).val();
                    console.log(`📌 粘贴事件触发：行=${currentCell.rowIndex}, 列=${currentCell.field}, 内容=${pastedValue}`);

                    handlePaste(currentCell.rowIndex, currentCell.field, pastedValue);
                }, 10);
            });
        });
    }
});

</script>
</body>
</html>