引用JQueryUI插件
页面布局:
<div data-options="region:'center'" style="height:100%">
<table id="tt" cellpadding="0" cellspacing="0"></table>
</div>
js代码:
// DataGrid
var buildGrid = function () {
$('#tt').datagrid({
title: '标签列表',
url: '/Tag/TagExList', //control控制中的json返回方法路径
rownumbers: true,
fit: true,
fitColumns: true,
loadMsg: '正在加载',
pageList: common.attr.pageList,//此处传入分页集合 英文文档提上 pageList array When set pagination property, initialize the page size selecting list
pagination: true,
singleSelect: false,
striped: true,
checkOnSelect: true,
columns: [[
//此处可以多个field,看自己的字段需要
{ field: 'FDate', title: '添加时间', align: 'center', width: 150, formatter: fmt_date },
]],
frozenColumns: [[{
field: 'ck',
checkbox: true
}]]
,
onLoadError: function (data) {
alert("列表加载错误。" + JSON.stringify(data)); //校验json格式数据
$('#tt').datagrid("loadData", {
total: 0,
rows: []
});
},
toolbar: [{
text: '复制',
iconCls: '',
handler: do_copy
}
}]
,
// alert("datagrid分页");
var pager = $("#dg1").datagrid("getPager");
pager.pagination({
total: griddata.length,
onSelectPage: function (pageNo, pageSize) {
var start = (pageNo - 1) * pageSize;
var end = start + pageSize;
$("#dg1").datagrid("loadData", griddata.slice(start, end));
pager.pagination('refresh', {
total: griddata.length,
pageNumber: pageNo,
});
}
});
})
};
//此处做的参数匹配。比如有些从数据库中取出来的类型字段,不要显示1,2,3等等数据,要显示具体字符串等等就可以进行fmt_type的使用
var
fmt_date = function (value, row, index) {
return moment(value).isValid() ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '--';
}
附上官方文档: http://jeasyui.com/documentation/index.php#