fsLayui 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作。
GitHub下载 码云下载
测试环境地址:http://fslayui.itcto.cn
需求:
左边展示树,右边展示数据;点击左边的树,查询右边的表格数据。
特殊说明
css和js需要在
数据表格
基础上多引入ztree
的文件。
1 | <link rel="stylesheet" href="/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"/> |
树功能实现
- 展示树列表
class 必须有
fsTree
样式
1 | <ul id="treeDemo" class="ztree fsTree" url="/fsbus/S1003" tableId="fsDatagrid" inputs="menuId:$id"></ul> |
属性 | 必输 | 默认值 | 名称 | 描述 |
---|---|---|---|---|
id | 是 | 树id | 唯一id | |
class | 是 | 样式 | 必须有 fsTree 样式 | |
url | 是 | 请求地址 | ajax异步加载数据地址 | |
tableId | 是 | 数据表格id | 点击左边树,需要刷新的表格id | |
inputs | 是 | 参数 | 点击树,异步加载表格,需要携带的参数 |
- 树菜单操作
树的菜单操作和 数据表格菜单操作类似,只是需要在
class
里面多增加一个样式fsTree
,其他的都一致, 数据表格配置参考:http://www.itcto.cn/layui/fsLayuiPlugin%E6%95%B0%E6%8D%AE%E8%A1%A8%E6%A0%BC%E4%BD%BF%E7%94%A8/#表格按钮设置
1 | <div class="layui-btn-group"> |
- 树demo
1 | <div class="layui-row layui-col-space10"> |
数据表格配置
树+数据表格 和 普通数据表格 没有任何区别,配置信息可以参考普通表格配置:http://www.itcto.cn/layui/fsLayuiPlugin数据表格使用/
- 表格demo
1 | <div class="layui-field-box"> |