u
This commit is contained in:
oneao committed
1 parent
755fc20c9a
commit
a57070f860
9 files changed
+557
-93
No files matched your search
@@ -2,78 +2,195 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<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://code.jquery.com/ui/1.13.2/jquery-ui.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 .textbox{ width:100% !important; }
|
||||
.datagrid-editable-input{
|
||||
width:100%!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>DataGrid 单行编辑 + wdatepicker</h3>
|
||||
<h3>DataGrid 编辑 + 多选删除 + 彻底删除 示例</h3>
|
||||
|
||||
<table id="dg" class="easyui-datagrid" style="width:700px;height:400px"
|
||||
<table id="dg" class="easyui-datagrid" style="width:800px;height:400px"
|
||||
data-options="
|
||||
singleSelect:true,
|
||||
idField:'id',
|
||||
onClickRow: onClickRow
|
||||
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="150" editor="text">Name</th>
|
||||
<th field="birth" width="120" editor="wdatepicker">出生日期</th>
|
||||
<th field="score" width="100" editor="numberbox">Score</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">保存当前行</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:confirmDelete()" class="easyui-linkbutton" iconCls="icon-save">彻底删除</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var editIndex = undefined;
|
||||
let editIndex = undefined;
|
||||
|
||||
// 初始化 datagrid 数据
|
||||
// 初始化 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}
|
||||
]
|
||||
data: createMockData(100),
|
||||
onLoadSuccess: function(){
|
||||
let pager = $('#dg').datagrid('getPager');
|
||||
pager.pagination({
|
||||
showRefresh: true, // 隐藏刷新按钮
|
||||
showPageInfo: true, // 隐藏页信息
|
||||
onRefresh: function(pageNumber, pageSize){
|
||||
let newData = createMockData(300);
|
||||
$('#dg').datagrid('loadData', newData);
|
||||
|
||||
$('#dg').datagrid('clearSelections');
|
||||
$('#dg').datagrid('clearChecked');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 点击行进入编辑状态
|
||||
function onClickRow(index,row){
|
||||
if(editIndex !== index){
|
||||
if(endEditRow()){
|
||||
// 点击行进入编辑模式
|
||||
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)){
|
||||
if (editIndex == undefined) return true;
|
||||
|
||||
if ($('#dg').datagrid('validateRow', editIndex)){
|
||||
$('#dg').datagrid('endEdit', editIndex);
|
||||
editIndex = undefined;
|
||||
return true;
|
||||
} else {
|
||||
alert('请填写完整数据');
|
||||
$.messager.alert('提示','请填写完整！');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
// 生成随机数据
|
||||
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 startTime = new Date(start).getTime();
|
||||
let endTime = new Date(end).getTime();
|
||||
let randomTime = startTime + Math.random() * (endTime - startTime);
|
||||
let d = new Date(randomTime);
|
||||
|
||||
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
|
||||
}
|
||||
|
||||
|
||||
// 批量删除（不立即提交）
|
||||
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');
|
||||
}
|
||||
|
||||
|
||||
// 获取真正删除的数据
|
||||
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);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user