u

code/base-project/base-app/test.py

@@ -3,7 +3,7 @@ import random
 import string
 from datetime import datetime, timedelta
 
-rows = 4000
+rows = 2000
 
 # 列名
 columns = ["箱号", "箱型", "制造日期"]
@@ -38,7 +38,7 @@ for i in range(rows):
 df = pd.DataFrame(data, columns=columns)
 
 # 保存 Excel 和 CSV
-df.to_excel("箱数据4000行2.xlsx", index=False)
-df.to_csv("箱数据4000行2.csv", index=False, encoding="utf-8-sig")
+df.to_excel("箱数据2000行.xlsx", index=False)
+df.to_csv("箱数据2000行.csv", index=False, encoding="utf-8-sig")
 
 print("生成完成！")

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

@@ -2,142 +2,78 @@
 <html>
 <head>
 <meta charset="UTF-8">
-<title>DataGrid VirtualScrollView + UUID + CheckedMap</title>
-<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
-<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
-<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
-<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
-<script src="http://www.jeasyui.com/easyui/datagrid-scrollview.js"></script>
+<title>DataGrid 单行编辑 + wdatepicker 示例</title>
+<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
+<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
+<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
+
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
+<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
+
+<style>
+    .datagrid-editable .textbox{ width:100% !important; }
+</style>
 </head>
 <body>
 
-<div class="toolbar">
-    <a href="javascript:void(0)" onclick="generateData(50)" class="easyui-linkbutton">生成50条数据</a>
-    <a href="javascript:void(0)" onclick="generateData(200)" class="easyui-linkbutton">生成200条数据</a>
-    <a href="javascript:void(0)" onclick="checkAllGlobal()" class="easyui-linkbutton">全选</a>
-    <a href="javascript:void(0)" onclick="uncheckAllGlobal()" class="easyui-linkbutton">取消全选</a>
-    <a href="javascript:void(0)" onclick="debugCheckedMap()" class="easyui-linkbutton">调试选中状态</a>
-    <a href="javascript:void(0)" onclick="getCheckedData()" class="easyui-linkbutton">获取选中数据</a>
-</div>
+<h3>DataGrid 单行编辑 + wdatepicker</h3>
 
-<table id="tt" class="easyui-datagrid" style="width:800px;height:400px"
+<table id="dg" class="easyui-datagrid" style="width:700px;height:400px"
        data-options="
-           idField:'mx_xh',
-           view:scrollview,
-           singleSelect:false,
-           autoRowHeight:false,
-           pageSize:30,
-           checkOnSelect:false,
-           selectOnCheck:true
+           singleSelect:true,
+           idField:'id',
+           onClickRow: onClickRow
        ">
     <thead>
-    <tr>
-        <th data-options="field:'ck',checkbox:true"></th>
-        <th field="subid" width="150">SubID</th>
-        <th field="mx_xh" width="150">MX_XH</th>
-        <th field="inv" width="100">Inv No</th>
-        <th field="name" width="100">Name</th>
-        <th field="amount" width="80">Amount</th>
-        <th field="price" width="80">Price</th>
-        <th field="cost" width="100">Cost</th>
-    </tr>
+        <tr>
+            <th field="id" width="50">ID</th>
+            <th field="name" width="150" editor="text">Name</th>
+            <th field="birth" width="120" editor="wdatepicker">出生日期</th>
+            <th field="score" width="100" editor="numberbox">Score</th>
+        </tr>
     </thead>
 </table>
 
-<div id="selCount" style="margin-top:10px;color:blue;font-weight:bold;">已选：0</div>
+<div style="margin-top:10px;">
+    <a href="javascript:endEditRow()" class="easyui-linkbutton">保存当前行</a>
+</div>
 
 <script>
-let allRows = [];
-let checkedMap = new Set();
-let suppressCheckEvents = false;
-
-function uuid() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-        let r = Math.random()*16|0, v = c=='x'?r:(r&0x3|0x8);
-        return v.toString(16);
-    });
-}
-
-function getCheckedData(){
-    if(isCheckAll){
-        // 返回全部数据
-        console.log( $('#tt').datagrid('getData').firstRows);
-    }else{
-        console.log( $('#tt').datagrid('getChecked'));
-    }
-}
-
-function loadInitialData() {
-    let rows = [];
-    for (let i = 1; i <= 100; i++) {
-        rows.push({
-            subid: uuid(),
-            mx_xh: 'MX-' + String(i).padStart(3, '0'), // 顺序编号，3位补零
-            inv: 'INV-' + i,
-            name: 'Person ' + i,
-            amount: Math.floor(Math.random() * 100),
-            price: Math.floor(Math.random() * 100),
-            cost: Math.floor(Math.random() * 10000)
-        });
-    }
-    allRows = rows;
-    $('#tt').datagrid('loadData', { total: rows.length, rows: rows });
-}
-
-
-function generateData(count){
-    let newRows = [];
-    let startIndex = allRows.length + 1;
-    for(let i=0;i<count;i++){
-        newRows.push({
-            subid: '',
-            mx_xh: uuid(),
-            inv: 'INV-'+(startIndex+i),
-            name: 'Person '+(startIndex+i),
-            amount: Math.floor(Math.random()*100),
-            price: Math.floor(Math.random()*100),
-            cost: Math.floor(Math.random()*10000)
-        });
-    }
-    allRows = allRows.concat(newRows);
-    $('#tt').datagrid('loadData', { total: allRows.length, rows: allRows });
-}
-
-function updateSelCount(){
-    $('#selCount').text('已选：'+checkedMap.size);
-}
-
-let isCheckAll = false
-$(function(){
-    loadInitialData();
-
-    $('#tt').datagrid({
-        onCheck: function(index, row){
-        },
-        onUncheck: function(index, row){
-            isCheckAll = false
-        },
-        onCheckAll: function(){
-            isCheckAll = true
-        },
-        onUncheckAll: function(){
-            console.log("===onUncheckAll===")
-            isCheckAll = false
-        },
-        onFetch: function(page, rows) {
-            setTimeout(() => {
-                if(isCheckAll){
-                     $('#tt').datagrid("checkAll")
-                }
-            })
-        },
-        onLoadSuccess: function(data) {
-        },
-        onLoadError: function() {
-        }
-    });
+var editIndex = undefined;
 
+// 初始化 datagrid 数据
+$('#dg').datagrid({
+    data: [
+        {id:1, name:'张三', birth:'1990-01-01', score:80},
+        {id:2, name:'李四', birth:'1992-03-15', score:90},
+        {id:3, name:'王五', birth:'1988-07-20', score:75}
+    ]
 });
+
+// 点击行进入编辑状态
+function onClickRow(index,row){
+    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 {
+        alert('请填写完整数据');
+        return false;
+    }
+}
 </script>
+
 </body>
-</html>
+</html>