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 22:50:53 +08:00
1 parent 3655ad2b9f
commit d03ac2b00a
2 files changed
+5304 -5823
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/base-project/base-app/test2.html
+157 -156
View File
@@ -1,169 +1,170 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>DataGrid 多选删除 + 单行编辑示例</title> <title>DataGrid 编辑 + 多选删除 + 彻底删除</title>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<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://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/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/locale/easyui-lang-zh_CN.js"></script> <script src="https://www.jeasyui.com/easyui/datagrid-scrollview.js"></script>
<script src="https://www.jeasyui.com/easyui/datagrid-scrollview.js"></script> <style>
.datagrid-editable-input {
<style> width: 100% !important;
.datagrid-editable-input{ }
width:100%!important; </style>
}
</style>
</head> </head>
<body> <body>
<h3>DataGrid 编辑 + 多选删除 + 彻底删除 示例（维护 allRows）</h3> <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;"> <div style="margin-top:10px;">
<a href="javascript:endEditRow()" class="easyui-linkbutton" iconCls="icon-save">保存当前行</a> <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:removeRows()" class="easyui-linkbutton" iconCls="icon-remove">删除所选</a>
<a href="javascript:confirmDelete()" class="easyui-linkbutton" iconCls="icon-save">彻底删除</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:addRow()" class="easyui-linkbutton" iconCls="icon-add">新增一行</a>
</div> <a href="javascript:getData()" class="easyui-linkbutton" iconCls="icon-add">获取数据</a>
</div>
<script> <script>
let editIndex = undefined; 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,
function onClickRow(index){ pagination: true,
if (editIndex !== index){ pageSize: 20,
if (endEditRow()){ view: scrollview,
$('#dg').datagrid('beginEdit', index); onClickRow: onClickRow,
editIndex = index; showPageInfo: false,
} showRefresh: false,
} columns: [[
} {
field: 'rownumber',
// 保存当前行编辑 title: '',
function endEditRow(){ width: 30,
if(editIndex === undefined) return true; align: 'center',
if($('#dg').datagrid('validateRow', editIndex)){ formatter: function (value, row, index) {
$('#dg').datagrid('endEdit', editIndex); return index + 1;
editIndex = undefined; },
return true; styler: function () {
} else { return `
$.messager.alert('提示','请填写完整！'); background-color: #efefef;
return false; 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;
function addRow(){ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F9F9F9,endColorstr=#efefef,GradientType=0);
if(!endEditRow()) return; padding: 0px
`
// 生成新行 }
let newRow = { },
id: getNextId(), { field: 'ck', checkbox: true },
name: '', { field: 'id', title: 'ID', width: 50 },
birth: '', { field: 'name', title: '姓名', width: 120, editor: 'text' },
score: '' { field: 'birth', title: '出生日期', width: 140, editor: 'datebox' },
}; { field: 'score', title: '成绩', width: 100, editor: 'text' }
]],
// 添加到 allRows data: 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){
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){ function onClickRow(index) {
let st = new Date(start).getTime(); if (editIndex !== index) {
let et = new Date(end).getTime(); if (endEditRow()) {
let t = st + Math.random()*(et-st); $('#subgrid').datagrid('beginEdit', index);
let d = new Date(t); editIndex = index;
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`; }
} }
</script> }
// 保存行
function endEditRow() {
if (editIndex === undefined) return true;
if ($('#subgrid').datagrid('validateRow', editIndex)) {
$('#subgrid').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
$.messager.alert('提示', '请填写完整！');
return false;
}
}
// 新增行
function addRow() {
if (!endEditRow()) return;
let newRow = { id: getNextId(), name: '', birth: '', score: '' };
allRows.push(newRow);
$('#subgrid').datagrid('loadData', allRows);
let newIndex = allRows.length - 1;
$('#subgrid').datagrid('selectRow', newIndex);
$('#subgrid').datagrid('beginEdit', newIndex);
editIndex = newIndex;
$('#subgrid').datagrid('scrollTo', newIndex);
}
// 删除行
function removeRows() {
let selected = $('#subgrid').datagrid('getChecked');
if (selected.length === 0) { $.messager.alert('提示', '请先勾选要删除的行'); return; }
let ids = selected.map(r => r.id);
allRows = allRows.filter(r => !ids.includes(r.id));
$('#subgrid').datagrid('loadData', allRows);
editIndex = undefined;
}
function getData() {
console.log("===getData===")
console.log($('#subgrid').datagrid('getData'));
console.log("===getChanges===")
console.log($('#subgrid').datagrid('getChanges'));
}
// 打印数据
function confirmDelete() { console.log('当前有效数据:', allRows); }
// ID 生成
function getNextId() {
if (allRows.length === 0) return 1;
return Math.max(...allRows.map(r => r.id)) + 1;
}
// 生成模拟数据
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 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')}`;
}
</script>
</body> </body>
</html>
</html>
editbuyin.jsp
+5147 -5667
View File
File diff suppressed because it is too large. Load diff