143 lines
4.4 KiB
HTML
143 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<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>
|
|
</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>
|
|
|
|
<table id="tt" class="easyui-datagrid" style="width:800px;height:400px"
|
|
data-options="
|
|
idField:'mx_xh',
|
|
view:scrollview,
|
|
singleSelect:false,
|
|
autoRowHeight:false,
|
|
pageSize:30,
|
|
checkOnSelect:false,
|
|
selectOnCheck:true
|
|
">
|
|
<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>
|
|
</thead>
|
|
</table>
|
|
|
|
<div id="selCount" style="margin-top:10px;color:blue;font-weight:bold;">已选：0</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() {
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |