zui
Version:
一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。
62 lines (58 loc) • 2 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ZUI，一个简单灵活的前端框架。">
<meta name="author" content="Zentao">
<title>ZUI - 数据表格例子</title>
<link href="../../dist/css/zui.css" rel="stylesheet">
<link href="../../dist/lib/datagrid/zui.datagrid.css" rel="stylesheet">
</head>
<body style="padding: 20px">
<div id="dataGrid" class="datagrid">
<header>
<h1>远程请求数据示例</h1>
</header>
<div class="datagrid-container"></div>
<div class="pager"></div>
</div>
<script src="../../assets/jquery.js"></script>
<script src="../../dist/js/zui.js"></script>
<script src="../../dist/lib/selectable/zui.selectable.js"></script>
<script src="../../dist/lib/datagrid/zui.datagrid.js"></script>
<script>
$(function() {
var options3 = {
height: 'page',
states: {
pager: {page: 1, recPerPage: 5},
},
dataSource: {
cache: 2, // 设置缓存为 2
cols:[
{name: 'time', label: '时间', width: 132},
{name: 'hera', label: '英雄', width: 134},
{name: 'action', label: '动作', width: 109},
{name: 'target', label: '目标', width: 109},
{name: 'desc', label: '描述', width: 287}
],
remote: function(params) {
return {
// 原创请求地址
url: '../../docs/partial/remote-data-' + params.page + '.json',
// 请求类型
type: 'GET',
// 数据类型
dataType: 'json'
};
}
},
};
var datagrid = $('#dataGrid').datagrid(options3).data('zui.datagrid');
console.log('datagrid', datagrid);
});
</script>
</body>
</html>