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>
<html>
<head>
<meta charset="UTF-8">
<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>
<meta charset="UTF-8">
<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>
<h3>DataGrid 编辑 + 多选删除 + 彻底删除 示例（维护 allRows）</h3>
<table id="dg" class="easyui-datagrid" style="width:800px;height:400px"
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>
<table id="subgrid"></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>
</div>
<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(100);
<script>
let editIndex = undefined;
let allRows = createMockData(2000);
// 初始化 DataGrid
$('#dg').datagrid({
data: allRows,
onLoadSuccess:() => { console.log("DataGrid 加载完成"); }
});
// 点击行进入编辑
function onClickRow(index){
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 {
$.messager.alert('提示','请填写完整！');
return false;
}
}
// 新增一行
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){
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
$('#subgrid').datagrid({
idField: 'id',
fit: false,
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
});
}
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>
// 点击行编辑
function onClickRow(index) {
if (editIndex !== index) {
if (endEditRow()) {
$('#subgrid').datagrid('beginEdit', index);
editIndex = index;
}
}
}
// 保存行
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>
</html>
</html>