u
This commit is contained in:
oneao committed
1 parent
f7e7c24d7a
commit
755fc20c9a
13 files changed
+62
-33131
No files matched your search
@@ -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>
|
||||
Reference in new issue
Block a user