u

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

@@ -1,82 +1,98 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="UTF-8">
-<title>DataGrid 多选删除 + 单行编辑示例</title>
+    <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"
+    <table id="subgrid"></table>
-       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>
+        <a href="javascript:getData()" class="easyui-linkbutton" iconCls="icon-add">获取数据</a>
     </div>
 
     <script>
         let editIndex = undefined;
-// 全局维护 DataGrid 所有有效行
+        let allRows = createMockData(2000);
-let allRows = createMockData(100);
 
-// 初始化 DataGrid
+        $('#subgrid').datagrid({
-$('#dg').datagrid({
+            idField: 'id',
-    data: allRows,
+            fit: false,
-    onLoadSuccess:() => { console.log("DataGrid 加载完成"); }
+            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()) {
-            $('#dg').datagrid('beginEdit', index);
+                    $('#subgrid').datagrid('beginEdit', index);
                     editIndex = index;
                 }
             }
         }
 
-// 保存当前行编辑
+        // 保存行
         function endEditRow() {
             if (editIndex === undefined) return true;
-    if($('#dg').datagrid('validateRow', editIndex)){
+            if ($('#subgrid').datagrid('validateRow', editIndex)) {
-        $('#dg').datagrid('endEdit', editIndex);
+                $('#subgrid').datagrid('endEdit', editIndex);
                 editIndex = undefined;
                 return true;
             } else {
@@ -85,64 +101,48 @@ function endEditRow(){
             }
         }
 
-// 新增一行
+        // 新增行
         function addRow() {
             if (!endEditRow()) return;
 
-    // 生成新行
+            let newRow = { id: getNextId(), name: '', birth: '', score: '' };
-    let newRow = {
-        id: getNextId(),
-        name: '',
-        birth: '',
-        score: ''
-    };
-
-    // 添加到 allRows
             allRows.push(newRow);
+            $('#subgrid').datagrid('loadData', allRows);
 
-    // 刷新 DataGrid
-    $('#dg').datagrid('loadData', allRows);
-
-    // 自动进入编辑
             let newIndex = allRows.length - 1;
-    $('#dg').datagrid('selectRow', newIndex);
+            $('#subgrid').datagrid('selectRow', newIndex);
-    $('#dg').datagrid('beginEdit', newIndex);
+            $('#subgrid').datagrid('beginEdit', newIndex);
             editIndex = newIndex;
-
+            $('#subgrid').datagrid('scrollTo', newIndex);
-    $('#dg').datagrid('scrollTo', newIndex);
         }
 
-// 删除选中行
+        // 删除行
         function removeRows() {
-    let selected = $('#dg').datagrid('getChecked');
+            let selected = $('#subgrid').datagrid('getChecked');
-    if(selected.length === 0){
+            if (selected.length === 0) { $.messager.alert('提示', '请先勾选要删除的行'); return; }
-        $.messager.alert('提示','请先勾选要删除的行');
+            let ids = selected.map(r => r.id);
-        return;
+            allRows = allRows.filter(r => !ids.includes(r.id));
-    }
+            $('#subgrid').datagrid('loadData', allRows);
-
-    // 从 allRows 中删除
-    let idsToDelete = selected.map(r => r.id);
-    allRows = allRows.filter(r => !idsToDelete.includes(r.id));
-
-    // 刷新 DataGrid
-    $('#dg').datagrid('loadData', allRows);
-
             editIndex = undefined;
         }
 
-// 打印真正需要提交的变更
+        function getData() {
-function confirmDelete(){
+            console.log("===getData===")
-    console.log("当前有效数据:", allRows);
+            console.log($('#subgrid').datagrid('getData'));
+            console.log("===getChanges===")
+            console.log($('#subgrid').datagrid('getChanges'));
         }
 
-// 全局 ID 生成
+        // 打印数据
+        function confirmDelete() { console.log('当前有效数据:', allRows); }
+
+        // ID 生成
         function getNextId() {
             if (allRows.length === 0) return 1;
-    let maxId = Math.max(...allRows.map(r=>r.id));
+            return Math.max(...allRows.map(r => r.id)) + 1;
-    return maxId + 1;
         }
 
-// 生成随机数据
+        // 生成模拟数据
         function createMockData(count = 100) {
             let data = [];
             for (let i = 1; i <= count; i++) {
@@ -156,7 +156,7 @@ function createMockData(count=100){
             return data;
         }
 
-// 生成随机日期
+        // 随机日期
         function randomDate(start, end) {
             let st = new Date(start).getTime();
             let et = new Date(end).getTime();
@@ -166,4 +166,5 @@ function randomDate(start,end){
         }
     </script>
 </body>
+
 </html>