jQuery EasyUI入门到精通（22）DataGrid（12）

2025-10-16 19:14:40

1、Card View（卡片视图），DataGrid Card View Demo（数据表格卡片视图案例）.The datagrid row can be showed as card（这种数据表格可以卡片的形式显示）.

该案例，HTML基本结构如下所示：

<!doctype html>

<html>

<head>

<title>DataGrid Card View - jQuery EasyUI Demo</title>

</head>

<body>

<h2>DataGrid Card View Demo</h2>

<div>The datagrid row can be showed as card.</div>

</div>

<table id="tt" style="width:700px;height:350px"

title="DataGrid - CardView" singleSelect="true" fitColumns="true" remoteSort="false"

url="datagrid8_getdata.php" pagination="true" sortOrder="desc" sortName="itemid">

<thead>

<tr>

<th field="itemid

<th field="listprice

<th field="unitcost

<th field="attr1

<th field="status

</tr>

</thead>

</table>

.c-label{

display:inline-block;

width:100px;

font-weight:bold;

}

</style>

</body>

</html>

jQuery EasyUI入门到精通（22）DataGrid（12）

2、Card View（卡片视图），DataGrid Card View Demo（数据表格卡片视图案例），Javascript代码如下所示：

var cardview = $.extend({}, $.fn.datagrid.defaults.view, {

renderRow: function(target, fields, frozen, rowIndex, rowData){

var cc = [];

cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">');

if (!frozen && rowData.itemid){

var aa = rowData.itemid.split('-');

var img = 'shirt' + aa[1] + '.gif';

cc.push('<img src="images/' + img + '" style="width:150px;float:left">');

cc.push('<div style="float:left;margin-left:20px;">');

for(var i=0; i<fields.length; i++){

var copts = $(target).datagrid('getColumnOption', fields[i]);

cc.push('<span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '');

}

cc.push('</div>');

}

cc.push('</td>');

return cc.join('');

}

});

$(function(){

$('#tt').datagrid({

view: cardview

});

</script>

jQuery EasyUI入门到精通（22）DataGrid（12）

3、Card View（卡片视图），DataGrid Card View Demo（数据表格卡片视图案例），运行效果如下图所示。

jQuery EasyUI入门到精通（22）DataGrid（12）

4、Buffer View（缓冲视图），DataGrid Buffer View Demo（数据表格缓冲视图案例），Drag the vertical scroll to the bottom to load additional records on demand（拖拽垂直滚动条到底部按需加载额外的记录）.

HTML基本结构如下:

<!DOCTYPE html>

<html>

<head>

<title>DataGrid Buffer Scrolling - jQuery EasyUI Demo</title>

</head>

<body>

<h2>DataGrid Buffer View Demo</h2>

<div>Drag the vertical scroll to the bottom to load additional records on demand.</div>

</div>

<option value="remote">Load Remote Data</option>

<option value="local">Load Local Data</option>

</select>

</div>

<table id="tt" title="DataGrid - BufferView" style="width:700px;height:300px" data-options="

view:bufferview,rownumbers:true,singleSelect:true,

url:'datagrid27_getdata.php?total=800',

autoRowHeight:false,pageSize:50">

<thead>

<tr>

<th field="inv

<th field="date

<th field="name

<th field="amount

<th field="price

<th field="cost

<th field="note

</tr>

</thead>

</table>

.datagrid-header-rownumber,.datagrid-cell-rownumber{

width:35px;

}

</style>

</body>

</html>

jQuery EasyUI入门到精通（22）DataGrid（12）

5、Buffer View（缓冲视图），DataGrid Buffer View Demo（数据表格缓冲视图案例）,Javascript代码如下所示：

$(function(){

$('#tt').datagrid();

});

function loadLocal(){

var rows = [];

for(var i=1; i<=800; 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);

}

function load(mode){

if (mode == 'local'){

loadLocal();

} else {

$('#tt').datagrid({

url:'datagrid27_getdata.php?total=800'

});

}

</script>

jQuery EasyUI入门到精通（22）DataGrid（12）

6、Buffer View（缓冲视图），DataGrid Buffer View Demo（数据表格缓冲视图案例），运行效果如下图所示：

jQuery EasyUI入门到精通（22）DataGrid（12）

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。