<!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>
</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" style="width:700px;height:300px">
</table>
<script type="text/javascript">
$(function(){
$('#tt').datagrid({
title: 'DataGrid - VirtualScrollView',
url: 'datagrid27_getdata.php',
view: scrollview,
singleSelect: true,
rownumbers: true,
idField:'inv',
autoRowHeight:false,
pageSize:50,
columns: [[
{
title: 'Action',
field: 'action',
width: 100,
formatter: function(val, row, index)
{
var str= '<a href="#" class="easyui-linkbutton" onclick="test('+row.inv+')">test</a>';
var $div = $("<div/>").append(str);
return $div.html();
}
},
{
width: 150,
title: 'Inv No',
field: 'inv'
} ,
{
width: 150,
title: 'Date',
field: 'date'
},
{
width: 150,
title: 'Name',
field: 'name'
},
{
width: 150,
title: 'Amount',
field: 'amount'
},
{
width: 150,
title: 'Price',
field: 'price'
},
{
width: 150,
title: 'Cost',
field: 'cost'
}
,
{
width: 150,
title: 'Note',
field: 'note'
}
]]
});
});
function test(inv) {
$('#tt').datagrid('selectRecord',inv); //is not work correct
var row = $('#tt').datagrid('getSelected');
alert(row.name);
}
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: 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);
}
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>
</body>
</html>
