u
This commit is contained in:
oneao committed
1 parent
a9ea500cd4
commit
f7e7c24d7a
3 files changed
+6555
-67
No files matched your search
@@ -1,76 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>DataGrid Virtual Scrolling - jQuery EasyUI Demo</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">
|
||||
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-scrollview.js"></script>
|
||||
<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>
|
||||
<h2>DataGrid Virtual Scroll View Demo</h2>
|
||||
<p>Drag the vertical scroll and release it to navigate to the desired page.</p>
|
||||
|
||||
<div style="margin-bottom:10px">
|
||||
<select onchange="load(this.value)">
|
||||
<option value="remote">Load Remote Data</option>
|
||||
<option value="local">Load Local Data</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<table id="tt" title="DataGrid - VirtualScrollView" style="width:700px;height:300px" data-options="
|
||||
view:scrollview,rownumbers:true,singleSelect:true,
|
||||
url:'datagrid27_getdata.php',
|
||||
idField:'inv',autoRowHeight:false,pageSize:50">
|
||||
<thead>
|
||||
<tr>
|
||||
<th field="inv" width="80">Inv No</th>
|
||||
<th field="date" width="100">Date</th>
|
||||
<th field="name" width="80">Name</th>
|
||||
<th field="amount" width="80" align="right">Amount</th>
|
||||
<th field="price" width="80" align="right">Price</th>
|
||||
<th field="cost" width="100" align="right">Cost</th>
|
||||
<th field="note" width="110">Note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('#tt').datagrid();
|
||||
|
||||
<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)
|
||||
});
|
||||
function loadLocal(){
|
||||
var rows = [];
|
||||
for(var i=1; i<=8000; i++){
|
||||
var amount = Math.floor(Math.random()*1000);
|
||||
var price = Math.floor(Math.random()*1000);
|
||||
rows.push({
|
||||
inv: 'Inv No '+i,
|
||||
date: $.fn.datebox.defaults.formatter(new Date()),
|
||||
name: 'Name '+i,
|
||||
amount: amount,
|
||||
price: price,
|
||||
cost: amount*price,
|
||||
note: 'Note '+i
|
||||
});
|
||||
}
|
||||
$('#tt').datagrid('loadData', rows);
|
||||
}
|
||||
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() {
|
||||
}
|
||||
function load(mode){
|
||||
if (mode == 'local'){
|
||||
loadLocal();
|
||||
} else {
|
||||
$('#tt').datagrid({
|
||||
url:'datagrid27_getdata.php'
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.datagrid-header-rownumber,.datagrid-cell-rownumber{
|
||||
width:40px;
|
||||
}
|
||||
</style>
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user