zui
Version:
一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。
94 lines (87 loc) • 4.31 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/datatable/zui.datatable.css" rel="stylesheet">
</head>
<body style="padding: 20px">
<div id="datatable" class="datatable">
</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/datatable/zui.datatable.js"></script>
<script>
$(function() {
var now = new Date();
var start = now.getSeconds(),
calendars = ['success', 'danger', 'important', 'warning', 'info', 'specail', 'primary'],
rooms = ['A003', 'A004', 'A010', 'A143', 'B008', 'B098', 'B487', 'B340', 'Z000', 'Z431', 'Z018', 'Z864'],
peoples = ['奥特曼', '行者孙', '地卜师', '绿巨人', 'Catouse', '路人丙'],
events = ['进食', '喝水', '交谈', '睡觉', '捶打墙壁', '自言自语', '搬动椅子', '唱歌', '上网', '梦游', '观望天花板'],
eventsTypes = ['happy', 'sad', ':]'],
tools = ['桌子', '椅子', '水杯', '枪', '随从'],
descs = ['没有完成', '这次失败了', '徒劳', '很满意', '禁止再次发生', '也行', '情况不明', '发现未知征兆'];
var dtDataGenerater = function(rowsCount) {
var data = {
cols: [
{width: 100, text: '#', type: 'number', flex: false, colClass: 'text-center'},
{sort: 'down', width: 160, text: '时间', type: 'date', flex: false, colClass: ''},
{width: 80, text: '房间', type: 'string', flex: false, colClass: ''},
{width: 100, text: '人物', type: 'string', flex: false, colClass: ''},
{width: 'auto', text: '事件', type: 'string', flex: false, colClass: ''},
{width: 100, text: '事件类型', type: 'string', flex: true, colClass: 'text-center'},
{sort: false, width: 200, text: '描述', type: 'string', flex: true, colClass: ''},
{width: 100, text: '相关人物', type: 'string', flex: true, colClass: ''},
{width: 100, text: '相关物品', type: 'string', flex: true, colClass: ''},
{width: 60, text: '评分', type: 'number', flex: false, colClass: 'text-center text-important'},
{sort: false, width: 'auto', text: '操作', type: 'string', flex: false, colClass: ''},
],
rows: []
};
for (var i = 0; i < rowsCount; i++) {
var row = {checked: Math.random() > 0.9, data: [
start + i + 101000,
now.format('yyyy-MM-dd hh:mm:ss'),
rooms[Math.floor(Math.random()*rooms.length)],
peoples[Math.floor(Math.random()*peoples.length)],
events[Math.floor(Math.random()*events.length)],
eventsTypes[Math.floor(Math.random()*eventsTypes.length)],
descs[Math.floor(Math.random()*descs.length)],
peoples[Math.floor(Math.random()*peoples.length)],
tools[Math.floor(Math.random()*tools.length)],
Math.floor(Math.random()*100)/10,
"<a href='###'><i class='icon-ok-sign'></i></a> <a href='###' class='text-danger'><i class='icon-trash'></i></a> "
]};
data.rows.push(row);
now = new Date(now.getTime() - (Math.random()*1000*60*60));
};
return data;
};
var datatable = $('.datatable').each(function() {
var $this = $(this);
var data = dtDataGenerater($this.data('rows') || 5);
if($this.attr('id') === 'datatableChangeExample') {
$this.data('origin-data', data);
}
$this.datatable({
fixedLeftWidth: '60%',
fixedRightWidth: '15%',
data: data,
scrollContainer: '#pageBody',
fixedHeaderOffset: 60,
sortable: true,
checkable: true
});
}).data('zui.datatable');
console.log('datatable', datatable);
});
</script>
</body>
</html>