layui table的使用方法以及基本操作
layui table用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。(本段话来源于layui官网)一、基本使用方法layui table的使用方法很简单,可以总结为三个步
layui table用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。(本段话来源于layui官网)
一、基本使用方法
layui table的使用方法很简单,可以总结为三个步骤:绑定容器、设置数据接口、在表头设定对应的字段
以下表格即是一个简单数据表格最基本的样子
对应的代码为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui table基本使用方法</title>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//基本实例
table.render({
elem: '#demo'//绑定容器
,height: 312
,url: '/demo/table/user/' //设置数据接口
,page: true //开启分页
,cols: [[ //在表头设置对应的字段
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
});
</script>
</body>
</html>
二、渲染方式
在第一节基本使用方法中已经使用了一种渲染方式即方法渲染,但是layui table为满足不同情况下的需求,设置了三种不同渲染方法,如下表格:
方式 | 机制 | 适用场景 | |
---|---|---|---|
01. | 方法渲染 | 用JS方法的配置完成渲染 | (推荐)无需写过多的 HTML,在 JS 中指定原始元素,再设定各项参数即可。 |
02. | 自动渲染 | HTML配置,自动渲染 | 无需写过多 JS,可专注于 HTML 表头部分 |
03. | 转换静态表格 | 转化一段已有的表格元素 | 无需配置数据接口,在JS中指定表格元素,并简单地给表头加上自定义属性即可 |
1、方法渲染
其实这是“自动化渲染”的手动模式,本质类似,只是“方法级渲染”将基础参数的设定放在了JS代码中,且原始的 table 标签只需要一个选择器:(本段话来源于layui官网)
方法渲染的优势在于可以脱离html,只专注js本身
<table id="demo" lay-filter="test"></table>
var table = layui.table;
//执行渲染
table.render({
elem: '#demo' //指定原始表格元素选择器(推荐id选择器)
,height: 315 //容器高度
,cols: [{}] //设置表头
//,…… //更多参数参考本文档:基本参数选项
});
2、自动渲染
自动渲染不同于方法渲染在js中设置的方式,它是在table容器中配置相应参数,table模块内部自动对其完成渲染,优势为:无需写过多 JS,可专注于 HTML 表头部分
操作步骤为:
1)写一个带有 class="layui-table" 的 <table> 标签。 2)在此table标签中设置属性lay-data="" 用于配置一些基础参数 3)给每个<th> 标签设置属性lay-data=""用于配置表头信息
实例代码为:
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
<th lay-data="{field:'city'}">城市</th>
<th lay-data="{field:'sign'}">签名</th>
<th lay-data="{field:'experience', sort: true}">积分</th>
<th lay-data="{field:'score', sort: true}">评分</th>
<th lay-data="{field:'classify'}">职业</th>
<th lay-data="{field:'wealth', sort: true}">财富</th>
</tr>
</thead>
</table>
3、转换静态表格
假设你的页面已经存在了一段有内容的表格,它由原始的table标签组成,这时你需要赋予它一些动态元素,比如拖拽调整列宽?比如排序等等?那么你同样可以很轻松地去实现。如下所示:
<div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
<button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
</div>
<table lay-filter="parse-table-demo">
<thead>
<tr>
<th lay-data="{field:'username', width:200}">昵称</th>
<th lay-data="{field:'joinTime', width:150}">加入时间</th>
<th lay-data="{field:'sign', minWidth: 180}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>2016-11-28</td>
<td>人生就像是一场修行 A</td>
</tr>
<tr>
<td>贤心2</td>
<td>2016-11-29</td>
<td>人生就像是一场修行 B</td>
</tr>
<tr>
<td>贤心3</td>
<td>2016-11-30</td>
<td>人生就像是一场修行 C</td>
</tr>
</tbody>
</table>
layui.use('table', function(){
var table = layui.table;
var $ = layui.$, active = {
parseTable: function(){
table.init('parse-table-demo', { //转化静态表格
//height: 'full-500'
//支持所有基础参数
});
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
点击按钮转化之后的表格为:
三、templet--自定义模板
在基本的数据表格中,单元格的内容是完全按照数据接口返回的content输出的,如果想在表格中添加链接或者其它的元素来丰富你的表格内容,这个时候可以使用自定义模板来实现。
templet提供了三种不同的使用方式,可以适用于不同的使用场景
1、绑定模板选择器
自定义模板字符量太大,可以使用此方法
//模板选择器
table.render({
cols: [[
{field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
,{field:'id', title:'ID', width:100}
]]
});
<script type="text/html" id="titleTpl">
{{# if(d.id < 100){ }}
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
{{# } else { }}
{{d.title}}(普通用户)
{{# } }}
</script>
2、函数转义
templet 函数返回一个参数 d,包含接口返回的所有字段和数据。如下所示:
table.render({
cols: [[
{field:'title', title: '文章标题', width: 200
,templet: function(d){
return 'ID:'+ d.id +',标题:<span style="color: #c00;">'+ d.title +'</span>'
}
}
,{field:'id', title:'ID', width:100}
]]
});
3、直接赋值模版字符
templet 也可以直接是一段 html 内容。 如下所示:
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
四、toolbar-绑定数据条模板
在一般的表格数据操作中,有时需要在每一行中加上 查看、编辑、删除 这样类似的操作按钮,toolbar完美解决了此需求。tool 参数和 templet 参数的使用方式完全类似,同样是可以是一个选择器,也可以是一段html字符串。
table.render({
cols: [[
{field:'id', title:'ID', width:100}
,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
]]
});
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<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>
<!-- 这里同样支持 laytpl 语法,如: -->
{{# if(d.auth > 2){ }}
<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
{{# } }}
</script>
属性 lay-event="" 是模板的关键所在,值可随意定义。
接下来我们可以借助 table模块的工具条事件,完成不同的操作功能:
//监听工具条
table.on('tool(test)', 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 === 'detail'){ //查看
//do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123'
,title: 'xxx'
});
} else if(layEvent === 'LAYTABLE_TIPS'){
layer.alert('Hi,头部工具栏扩展的右侧图标。');
}
});
五、异步数据接口
//“方法级渲染”配置方式
table.render({ //其它参数在此省略
url: '/api/data/'
//where: {token: 'sasasas', id: 123} //如果无需传递额外参数,可不加该参数
//contentType:application/json //发送到服务端的内容编码类型
//method: 'post' //如果无需自定义HTTP类型,可不加该参数
done: function(res, curr, count){
//如果是异步请求数据方式,res即为你接口返回的信息。
//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
}
//request: {} //如果无需自定义请求参数,可不加该参数
//response: {} //如果无需自定义数据响应名称,可不加该参数
});
六、基础方法
table.set(options); //设定全局默认参数。options即各项基础参数
table.on('event(filter)', callback); //事件监听。event为内置事件名(详见下文),filter为容器lay-filter设定的值
table.init(filter, options); //filter为容器lay-filter设定的值,options即各项基础参数。例子见:转换静态表格
table.checkStatus(id); //获取表格选中行(下文会有详细介绍)。id 即为 id 参数对应的值
table.render(options); //用于表格方法级渲染,核心方法。应该不用再过多解释了,详见:方法级渲染
table.reload(id, options); //表格重载
table.resize(id); //重置表格尺寸
table.exportFile(id, data, type); //导出数据
1、获取表格选中行
该方法可获取到表格所有的选中行相关数据
语法:table.checkStatus('ID'),其中 ID 为基础参数 id 对应的值,如:
table.render({ //其它参数省略
id: 'idTest'
});
调用:
var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量,可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选
2、表格重载
在进行全局搜索,排序等情况的时候,你需要对表格进行重载。
语法 | 说明 | 适用场景 |
table.reload(ID, options) | 参数 ID 即为容器id对应的值 参数 options 即为各项基础参数 | 所有渲染方式 |
tableIns.reload(options) | 参数同上 tableIns 可通过 var tableIns = table.render() 得到 | 仅限方法级渲染 |
示例1:自动化渲染的重载
【HTML】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
【JS】
<script>
table.reload('idTest', {
url: '/api/table/search'
,where: {} //设定异步数据接口的额外参数
//,height: 300
});
</script>
示例2:方法级渲染的重载
//所获得的 tableIns 即为当前容器的实例
var tableIns = table.render({
elem: '#id'
,cols: [] //设置表头
,url: '/api/data' //设置异步接口
,id: 'idTest'
});
//这里以搜索为例
tableIns.reload({
where: { //设定异步数据接口的额外参数,任意设
aaaaaa: 'xxx'
,bbb: 'yyy'
//…
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
//上述方法等价于
table.reload('idTest', {
where: { //设定异步数据接口的额外参数,任意设
aaaaaa: 'xxx'
,bbb: 'yyy'
//…
}
,page: {
curr: 1 //重新从第 1 页开始
}
}); //只重载数据
更多推荐
所有评论(0)