基本使用
准备json
users.json
{
"code": 0,
"msg": "",
"count": 101,
"data": [
{
"id": "10001",
"username": "杜甫",
"email": "[email protected]",
"sex": "男",
"city": "浙江杭州",
"sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。",
"experience": "116",
"ip": "192.168.0.8",
"logins": "108",
"joinTime": "2016-10-14",
"LAY_CHECKED":true
},
{
"id": "10002",
"username": "李白",
"email": "[email protected]",
"sex": "男",
"city": "浙江杭州",
"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。",
"experience": "12",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14",
"LAY_CHECKED": true
},
{
"id": "10003",
"username": "王勃",
"email": "[email protected]",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "65",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10004",
"username": "李清照",
"email": "[email protected]",
"sex": "女",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "666",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10005",
"username": "冰心",
"email": "[email protected]",
"sex": "女",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "86",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10006",
"username": "贤心",
"email": "[email protected]",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "12",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10007",
"username": "贤心",
"email": "[email protected]",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "16",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
},
{
"id": "10008",
"username": "贤心",
"email": "[email protected]",
"sex": "男",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "106",
"ip": "192.168.0.8",
"logins": "106",
"joinTime": "2016-10-14"
}
]
} 编写代码
可以使用html实现[了解]
可以使用js 实现[掌握]
相关属性
表格属性
表头属性
field:和数据接口里面的data[{"id":1}]的key映射
title:表头的内容
width:宽度
hide:true 是否隐藏
sort:true 是否开启列排序
edit:true 是否支持编辑
align:'center' 内容对齐方式 left center right
templet:function(d){
return d.sex=='男'?'汉子':'妹子';
}
totalRowText:"合计" 合计行的文本 前提是表格开启合并行
totalRow:true 是否合计前提是表格开启合并行
toolbar: '#userBar' 引入行的工具栏
相关事件监听
监听头部工具栏事件
监听复选框选择
监听单元格编辑 ——前提单元必须可以编辑
监听行单击事件
监听行双击事件
监听行工具事件
相关方法
获取选中行
表格重载
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数组表格</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
<div style="display: none;" id="userToolBar">
<button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
<button type="button" class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>
<button type="button" class="layui-btn layui-btn-sm" lay-event="getSelect">得到选中行</button>
<button type="button" class="layui-btn layui-btn-sm" lay-event="reloadTable">刷新数据</button>
</div>
<div id="userBar" style="display: none;">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use([ 'jquery', 'layer', 'form', 'table' ], function() {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
//渲染数据表格
var tableIns=table.render({
elem: '#userTable' //渲染的目标对象
,url:'resources/json/users.json' //数据接口
,title: '用户数据表'//数据导出来的标题
/* ,toolbar:"<div>xxx</div>" */
,toolbar:"#userToolBar" //表格的工具条
,defaultToolbar:['filter','print']
/* ,height:300 */
,height:'full-200'
,cellMinWidth:100 //设置列的最小默认宽度
,done:function(res, curr, count){
/* alert(res);//后台url返回的json串
alert(curr);//当前页
alert(count);//数据总条数 */
}
,totalRow:true //开启合并行
,page: true //是否启用分页
/* ,limit:20 //设置每页显示条数 默认为10
,limits:[20,40,60,80] */
,text:{
none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
}
,cols: [[ //列表数据
{type: 'checkbox', fixed: 'left'}
,{type: 'numbers'}
,{field:'id', title:'ID', width:80,hide:true,sort:true}
,{field:'username', title:'用户名', width:120,sort:true,edit:true,align:'center'}
,{field:'email', title:'邮箱', width:150, templet: function(res){
return '<em>'+ res.email +'</em>'
}}
,{field:'sex', title:'性别', width:80, sort: true,align:'center',templet:function(d){
return d.sex=='男'?'汉子':'妹子';
}}
,{field:'city', title:'城市', width:100}
,{field:'sign', title:'签名',totalRowText:"合计"}
,{field:'experience', title:'积分', width:80,totalRow:true}
,{field:'ip', title:'IP', width:120}
,{field:'logins', title:'登入次数', width:100,totalRow:true}
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#userBar', width:150,align:'center'}
]]
})
//监听头部工具栏事件
table.on("toolbar(userTable)",function(obj){
switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'batchDelete':
layer.msg('批量删除');
break;
case 'getSelect':
var checkStatus = table.checkStatus('userTable'); //idTest 即为基础参数 id 对应的值
console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选
break;
case 'reloadTable':
/* table.reload("userTable", {
url:'resources/json/users.json'
}) */
tableIns.reload({url:'resources/json/users.json'});
break;
};
})
//监听复选框选择
table.on('checkbox(userTable)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});
//监听单元格编辑
table.on('edit(userTable)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
//发送post请求更新数据
/* $.post("url?"+obj.field+"&id="+obj.data.id,function(json){
}); */
});
//监听行单击事件
/* table.on('row(userTable)', function(obj){
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
obj.del(); //删除当前行
}); */
//监听行双击事件
table.on('rowDouble(userTable)', function(obj){
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
obj.del(); //删除当前行
});
//监听行工具事件
table.on('tool(userTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
if(layEvent === 'del'){ //删除
layer.msg("删除");
layer.confirm('真的删除行么', function(index){
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something
layer.msg("修改")
}
});
});
</script>
</body>
</html>
