python + layui.table 实现数据表格呈现、工具栏监听
1、页面表格呈现
渲染表格：
layui.use('table',function(){
var table =layui.table;
table.render({
elem:'#api_table',
url:'/get_data/',//数据接口
method:'get',
page:true,
limit:10,
limits:[10,20,50],
cols: [[
{field:'id',title:'ID',width:80,sort:true,fixed:'left'},
{field:'cat_name',title:'分类',width:177},
{field:'api_name',title:'接口名称',width:80},
{field:'api_url',title:'url',width:80,},
{field:'method',title:'method',width:80},
{field:'right',title:'操作',toolbar:'#bar',width:200}
]]
});
});
table.render参数：
| 参数 | 说明 |
|---|---|
| elem | 指向表格id |
| url | 请求接口 |
| method | 请求方式 |
| page | 展开分页 |
| limit | 当前每页显示数量 |
| limits | 可选择设置的每页显示数量 |
| cols | 设置表头。field需要和返回数据的字段名一致，title为表头字段名称，width列宽，sort:true该列展开排序，style样式，edit: 'text'单元格可编辑，totalRow:true该列需要合计，需要和table.render的totalRow搭配使用 |
| 还有一些其它的常用参数： | |
| 参数 | 说明 |
| --- | --- |
| where | 其它需要传给接口的参数，比如where: |
| width | 设置表宽度 |
| height | 设置表高度 |
| defaultToolbar | 头部工具栏右侧图标，默认值["filter","exports","print"]，分别是筛选、导出、打印 |
| toolbar | 头部左侧工具栏，指定到模版id |
| totalRow | 开启合计 |
前端body部分：
<table id="api_table"></table>
数据结构：
class Cat(db.Model):
__tablename__ = 'cat' # 表名
id=db.Column(db.Integer,primary_key=True,autoincrement=True) # 主键
cat_name = db.Column(db.String(200), nullable=False) # 分类名称、不能为空
class Api(db.Model):
__tablename__ = 'api' # 表名
id = db.Column(db.Integer, primary_key=True, autoincrement=True) # 主键
api_name = db.Column(db.String(200), nullable=False) # 接口名称、不能为空
api_url = db.Column(db.String(200), nullable=False) # 接口地址、不能为空
method = db.Column(db.String(200), nullable=False) # 请求方式、不能为空
cat_id = db.Column(db.Integer, db.ForeignKey('cat.id')) # 外键
后端接口：
@app.route('/get_data/',methods=['get'])
def get_data():
limit = request.args.get('limit')
page = request.args.get('page')
api = db.session.query(Api, Cat).outerjoin(Cat, Cat.id == Api.cat_id).paginate(
page=int(page), per_page=int(limit)).items
list = []
data = {}
for api in api:
data = dict(id=api[0].id, api_name=api[0].api_name, api_url=api[0].api_url, method=api[0].method,
cat_id=api[0].cat_id, cat_name=api[1].cat_name)
list.append(data)
count = len(db.session.query(Api, Cat).outerjoin(Cat, Cat.id == Api.cat_id).all())
print('code:', 0, 'msg:', '获取数据成功', 'count:', count, 'data:', list)
return jsonify({'code': 0, 'msg': '获取数据成功', 'count': count, 'data': list})
传给前端的数据需要是{'code':'','msg':'','count':'','data':''}的格式
页面呈现：
2、监听工具栏
table加上lay-filter属性：
<table id="api_table" lay-filter="api_table"></table>
body部分增加代码：
<script type="text/html" id="bar">
<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
script 的id和操作列的toolbar属性值一致，lay-event需要用来监控不同的事件。
修改js：
layui.use(['table','layer'], function(){
var table = layui.table,layer = layui.layer;
table.render({
elem: '#api_table',
url: '/get_data/', //数据接口
method:'get',
page: true,
limit:10,
limits:[10,20,50],
cols: [[
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
{field: 'cat_name', title: '分类', width: 177},
{field: 'api_name', title: '接口名称', width:80},
{field: 'api_url', title: 'url', width:80,},
{field: 'method', title: 'method', width:80},
{field: 'right',title:'操作',toolbar:'#bar',width: 200}
]]
});
table.on('tool(api_table)',function (obj) { //绑定table的lay-filter属性
if(obj.event==='edit'){
layer.msg('edit')
}else if(obj.event==='del'){
layer.msg('del')
}
})
});
点击【修改】按钮查看效果：
点击修改时，layer.msg('edit')，toast提示“edit”
点击【删除】按钮查看效果：
点击修改时，layer.msg('del')，toast提示“del”
3、监听头部工具栏
头部工具栏和工具行事件类似
table.render添加参数
toolbar:'#toolbar',
body中增加代码
<script type="text/html" id="toolbar">
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button >
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
</script>
监听头部工具栏：
table.on('toolbar(api_table)', function(obj){
if(obj.event==='add'){
layer.msg('add')
}else if(obj.event==='del'){
layer.msg('del')
}
})
点击头部按钮【添加】查看效果
点击头部按钮【删除】查看效果
前端js和css都是基于layui-v2.6.8
