u

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

@@ -8,7 +8,6 @@
 <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>
@@ -16,11 +15,10 @@
         width:100%!important;
     }
 </style>
-
 </head>
 <body>
 
-<h3>DataGrid 编辑 + 多选删除 + 彻底删除 示例</h3>
+<h3>DataGrid 编辑 + 多选删除 + 彻底删除 示例（维护 allRows）</h3>
 
 <table id="dg" class="easyui-datagrid" style="width:800px;height:400px"
        data-options="
@@ -33,8 +31,7 @@
        pageSize:30,
        onClickRow:onClickRow,
        showPageInfo:false,
-       showRefresh:false,
+       showRefresh:false
-       data: createMockData(100)
        ">
     <thead>
         <tr>
@@ -52,39 +49,20 @@
     <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 数据
+// 初始化 DataGrid
 $('#dg').datagrid({
-    data: createMockData(0),
+    data: allRows,
-    onLoadSuccess:() => {
+    onLoadSuccess:() => { console.log("DataGrid 加载完成"); }
-        console.log("success")
-    }
 });
 
-// 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()){
@@ -94,11 +72,10 @@ function onClickRow(index){
     }
 }
 
-// 保存当前行编辑数据
+// 保存当前行编辑
 function endEditRow(){
-    if (editIndex == undefined) return true;
+    if(editIndex === undefined) return true;
-
+    if($('#dg').datagrid('validateRow', editIndex)){
-    if ($('#dg').datagrid('validateRow', editIndex)){
         $('#dg').datagrid('endEdit', editIndex);
         editIndex = undefined;
         return true;
@@ -108,149 +85,85 @@ function endEditRow(){
     }
 }
 
+// 新增一行
+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){
+function createMockData(count=100){
     let data = [];
-    for(let i = 1; i <= count; i++){
+    for(let i=1;i<=count;i++){
         data.push({
             id: i,
             name: "用户" + i,
-            birth: randomDate("1980-01-01", "2005-12-31"),
+            birth: randomDate("1980-01-01","2005-12-31"),
-            score: Math.floor(Math.random() * 41) + 60
+            score: Math.floor(Math.random()*41)+60
         });
     }
     return data;
 }
 
 // 生成随机日期
-function randomDate(start, end){
+function randomDate(start,end){
-    let startTime = new Date(start).getTime();
+    let st = new Date(start).getTime();
-    let endTime = new Date(end).getTime();
+    let et = new Date(end).getTime();
-    let randomTime = startTime + Math.random() * (endTime - startTime);
+    let t = st + Math.random()*(et-st);
-    let d = new Date(randomTime);
+    let d = new Date(t);
-
     return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
 }
-
-
-// 获取真正删除的数据
-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);
-            });
-        });
-    }
-});
-// 修复后的新增一行函数
-function addRow() {
-    if (!endEditRow()) return; // 结束当前行编辑
-
-    // 获取准确的数据状态
-    let data = $('#dg').datagrid('getData');
-    let currentRows = data.rows || [];
-    
-    // 创建新行对象 - 确保使用全新的对象
-    let newRow = {
-        id: getNextId(currentRows),
-        name: '',
-        birth: '',
-        score: ''
-    };
-
-    // 使用 appendRow 而不是 insertRow，避免索引计算问题
-    $('#dg').datagrid('appendRow', newRow);
-    
-    // 获取最新的行索引
-    let allRows = $('#dg').datagrid('getRows');
-    let newIndex = allRows.length - 1;
-
-    // 自动选中并进入编辑
-    $('#dg').datagrid('selectRow', newIndex);
-    $('#dg').datagrid('beginEdit', newIndex);
-    editIndex = newIndex;
-    
-    // 清除可能的数据残留
-    $('#dg').datagrid('clearSelections');
-    $('#dg').datagrid('clearChecked');
-    
-    // 滚动到最后一行
-    $('#dg').datagrid('scrollTo', newIndex);
-}
-
-// 改进的删除函数，确保彻底清理
-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');
-    
-    // 重要：接受变更，确保删除状态被确认
-    $('#dg').datagrid('acceptChanges');
-}
-
-// 更安全的 ID 生成函数
-function getNextId(dataArray){
-    if(!dataArray || dataArray.length === 0) return 1;
-    
-    let maxId = 0;
-    // 遍历所有行，确保找到真正的最大 ID
-    for(let i = 0; i < dataArray.length; i++) {
-        if(dataArray[i] && dataArray[i].id > maxId) {
-            maxId = dataArray[i].id;
-        }
-    }
-    return maxId + 1;
-}
 </script>
 </body>
 </html>