layui框架数据表格渲染

原创 1028490987 随笔 框架疑难 179阅读 2018-01-29 10:56:44 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/layui.css" />
</head>
<body>
<table class="layui-hide" id="test"></table>
</body>
<script type="text/javascript" src="layui.all.js" ></script>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'user.json' //json文件在下方 请直接保存就ok
,width: 892
,height: 332
,cols: [[
{type:'checkbox', fixed: 'left'}
,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', width: 219, title: '签名'}
,{field:'experience', width:80, title: '积分', sort: true}
,{field:'score', width:80, title: '评分', sort: true}
,{field:'classify', width:80, title: '职业'}
,{field:'wealth', width:120, title: '财富', sort: true, fixed: 'right'}
]]
,page: true
});
});
</script>
</html>
//注意的是 引入的外部文件都是2.0以上的版本

运行之后的效果图
//{
// "code": 0,
// "msg": "",
// "count": 1000,
// "data": [
// {
// "id": 10000,
// "username": "user-0",
// "sex": "女",
// "city": "城市-0",
// "sign": "签名-0",
// "experience": 255,
// "logins": 24,
// "wealth": 82830700,
// "classify": "作家",
// "score": 57
// }, {
// "id": 10001,
// "username": "user-1",
// "sex": "男",
// "city": "城市-1",
// "sign": "签名-1",
// "experience": 884,
// "logins": 58,
// "wealth": 64928690,
// "classify": "词人",
// "score": 27
// }, {
// "id": 10002,
// "username": "user-2",
// "sex": "女",
// "city": "城市-2",
// "sign": "签名-2",
// "experience": 650,
// "logins": 77,
// "wealth": 6298078,
// "classify": "酱油",
// "score": 31
// }, {
// "id": 10003,
// "username": "user-3",
// "sex": "女",
// "city": "城市-3",
// "sign": "签名-3",
// "experience": 362,
// "logins": 157,
// "wealth": 37117017,
// "classify": "诗人",
// "score": 68
// }, {
// "id": 10004,
// "username": "user-4",
// "sex": "男",
// "city": "城市-4",
// "sign": "签名-4",
// "experience": 807,
// "logins": 51,
// "wealth": 76263262,
// "classify": "作家",
// "score": 6
// }, {
// "id": 10005,
// "username": "user-5",
// "sex": "女",
// "city": "城市-5",
// "sign": "签名-5",
// "experience": 173,
// "logins": 68,
// "wealth": 60344147,
// "classify": "作家",
// "score": 87
// }, {
// "id": 10006,
// "username": "user-6",
// "sex": "女",
// "city": "城市-6",
// "sign": "签名-6",
// "experience": 982,
// "logins": 37,
// "wealth": 57768166,
// "classify": "作家",
// "score": 34
// }, {
// "id": 10007,
// "username": "user-7",
// "sex": "男",
// "city": "城市-7",
// "sign": "签名-7",
// "experience": 727,
// "logins": 150,
// "wealth": 82030578,
// "classify": "作家",
// "score": 28
// }, {
// "id": 10008,
// "username": "user-8",
// "sex": "男",
// "city": "城市-8",
// "sign": "签名-8",
// "experience": 951,
// "logins": 133,
// "wealth": 16503371,
// "classify": "词人",
// "score": 14
// }, {
// "id": 10009,
// "username": "user-9",
// "sex": "女",
// "city": "城市-9",
// "sign": "签名-9",
// "experience": 484,
// "logins": 25,
// "wealth": 86801934,
// "classify": "词人",
// "score": 75
// }
// ]
//}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复