layui表格的使用

数据表格【重点】

基本使用

准备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"

{

"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实现[了解]

layui表格的使用

可以使用js 实现[掌握]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

</div>

</div>

layui.use([ 'jquery', 'layer', 'form', 'table' ], function() {

var $ = layui.jquery;

var layer = layui.layer;

var form = layui.form;

var table = layui.table;

//渲染数据表格

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'}

]]

})

});

</script>

</body>

</html>

相关属性

表格属性

layui表格的使用

表头属性

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' 引入行的工具栏

layui表格的使用

相关事件监听

监听头部工具栏事件

layui表格的使用

监听复选框选择

layui表格的使用

监听单元格编辑

前提单元必须可以编辑

layui表格的使用

监听行单击事件

layui表格的使用

监听行双击事件

layui表格的使用

监听行工具事件

layui表格的使用

相关方法

获取选中行

layui表格的使用

表格重载

layui表格的使用

<%--

Created by IntelliJ IDEA.

User: Lenovo

Date: 2019/10/3

Time: 19:15

To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

.layer-photos-demo{margin:10px 0;}

.layer-photos-demo img{width: 160px; height: 100px;}

</style>

</head>

<body>

</table>

</button>

</button>

</button>

</button>

<i class="layui-icon">得到选中行</i>

</button>

</button>

</div>

</div>

layui.use(['element','jquery','laydate','form','layedit','table'],function () {

var $=layui.jquery;

var element=layui.element;

var laydate=layui.laydate;

var form=layui.form;

var layedit=layui.layedit;

//创建一个编辑器

var editIndex = layedit.build('LAY_demo_editor');

var table=layui.table;

//渲染表格

var tableIndex=table.render({

elem: '#userTable' //渲染的目标对象

,url:'libs/json/users.json' //数据接口

// ,toolbar:'<div>xxxx</div>'

,toolbar: '#userToolBar' //开启头部工具栏，并为其绑定左侧模板

//,toolbar:true //表格的工具条

,defaultToolbar:['filter','exports','print']

// ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可

// title: '提示'

// ,layEvent: 'LAYTABLE_TIPS'

// ,icon: 'layui-icon-tips'

// }]

// ,height:300

// ,height:'full-200'

// ,cellMinWidth:150 //列的最小默认宽度

,done:function (res,curr,count) {

// alert(res); //后台url返回的json串

// alert(curr); //当前页

// alert(count) //数据总条数

}

,text:{

none:'暂无相关数据'

}

,totalRow:true //开启合并行

,title: '用户数据表' //数据导出的标题

,cols: [[ //列数据

{type: 'checkbox', fixed: 'left'}

,{type:'numbers',fixed: 'left'}

,{field:'id', title:'ID', width:80, fixed: 'left',sort:true}

,{field:'username', title:'用户名', width:120, edit: 'text'}

,{field:'email', title:'邮箱', width:150, edit: 'text', 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}

,{field:'joinTime', title:'加入时间', width:120}

,{fixed: 'right', title:'操作', toolbar: '#userBar', width:250 ,align:'center'}

]]

,page: true //是否启用分页

});

//监听头部事件

table.on("toolbar(userTable)",function (obj) {

switch(obj.event){

case 'add':

layer.msg('添加');

break;

case 'delete':

layer.msg('删除');

break;

case 'update':

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:'libs/json/users.json'

// });

tableIndex.reload({url:'libs/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(); //删除当前行

//obj.update(fields) //修改当前行数据

});

//监听行双击事件

table.on('rowDouble(test)', function(obj){

//obj 同上

console.log(obj.tr) //得到当前行元素对象

console.log(obj.data) //得到当前行数据

//obj.del(); //删除当前行

//obj.update(fields) //修改当前行数据

});

//监听行工具事件

table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"

var data = obj.data; //获得当前行数据

var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

//var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

if(layEvent === 'add'){ //查看

//do somehing

layer.msg("查看")

} else if(layEvent === 'del'){ //删除

layer.confirm('真的删除行么', function(index){

lay.msg("成功删除");

obj.del(); //删除对应行（tr）的DOM结构，并更新缓存

layer.close(index);

//向服务端发送删除指令

});

} else if(layEvent === 'edit'){ //编辑

//do something

layer.msg("更新成功")

//同步更新缓存对应的值

obj.update({

username: '123'

,title: 'xxx'

});

} else if(layEvent === 'LAYTABLE_TIPS'){

layer.alert('Hi，头部工具栏扩展的右侧图标。');

}

});

//获取选中行

//表格重载

});

</script>

</body>

</html>

数据表格【重点】

基本使用

准备json

编写代码

相关属性

表格属性

表头属性

相关事件监听

监听头部工具栏事件

监听复选框选择

监听单元格编辑

监听行单击事件

监听行双击事件

监听行工具事件

相关方法

获取选中行

表格重载

相关推荐