oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-11-27 17:31:46 +08:00
1 parent bac885cb28
commit 3655ad2b9f
1 file changed
+76 -163
Download Patch File Download Diff File Expand all files Collapse all files
code/base-project/base-app/test2.html
+76 -163
View File
@@ -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,
data: createMockData(100)
showRefresh:false
">
<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),
onLoadSuccess:() => {
console.log("success")
}
data: allRows,
onLoadSuccess:() => { console.log("DataGrid 加载完成"); }
});
// 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 ($('#dg').datagrid('validateRow', editIndex)){
if(editIndex === undefined) return true;
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"),
score: Math.floor(Math.random() * 41) + 60
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);
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')}`;
}
// 获取真正删除的数据
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>