fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。
GitHub下载 码云下载
测试环境地址：http://fslayui.itcto.cn
需求：
左边展示树，右边展示数据；点击左边的树，查询右边的表格数据。
树功能实现
- 展示树列表
class 必须有
fsTree样式
<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/#表格按钮设置
<div class="layui-btn-group">
<button class="layui-btn fsTree" function="top" topUrl="add.html" topWidth="700px" topHeight="450px" isSelect="1" topTitle="新增菜单信息" inputs="parentId:$id">
<i class="layui-icon"></i>新增
</button>
<button class="layui-btn fsTree" function="top" topUrl="edit.html" topWidth="700px" topHeight="450px" isSelect="1" topTitle="编辑菜单信息" inputs="menuId:$id">
<i class="layui-icon"></i>编辑
</button>
<button class="layui-btn layui-btn-danger fsTree" function="submit" url="/fsbus/S1007" url="" isSelect="1" isConfirm="1" confirmMsg="是否确定删除选中的数据？" inputs="menuId:$id">
<i class="layui-icon"></i>删除
</button>
<button class="layui-btn fsTree" function="refresh">
<i class="layui-icon">ဂ</i>刷新
</button>
</div>
- 树demo
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-btn-group">
<button class="layui-btn fsTree" function="top" topUrl="add.html" topWidth="700px" topHeight="450px" isSelect="1" topTitle="新增菜单信息" inputs="parentId:$id">
<i class="layui-icon"></i>新增
</button>
<button class="layui-btn fsTree" function="top" topUrl="edit.html" topWidth="700px" topHeight="450px" isSelect="1" topTitle="编辑菜单信息" inputs="menuId:$id">
<i class="layui-icon"></i>编辑
</button>
<button class="layui-btn layui-btn-danger fsTree" function="submit" url="/fsbus/S1007" url="" isSelect="1" isConfirm="1" confirmMsg="是否确定删除选中的数据？" inputs="menuId:$id">
<i class="layui-icon"></i>删除
</button>
<button class="layui-btn fsTree" function="refresh">
<i class="layui-icon">ဂ</i>刷新
</button>
</div>
</div>
<div class="layui-col-md12">
<ul id="treeDemo" class="ztree fsTree" url="/fsbus/S1003" tableId="fsDatagrid" inputs="menuId:$id"></ul>
</div>
</div>
数据表格配置
树+数据表格 和 普通数据表格 没有任何区别，配置信息可以参考普通表格配置：http://www.itcto.cn/layui/fsLayuiPlugin数据表格使用/
- 表格demo
<div class="layui-field-box">
<div class="layui-col-md12 layui-col-space1">
<div id="table_buttion_div">
<form id="query_form" style="display: none;">
<input type="text" id="menuId" name="menuId" value="0"/>
</form>
<button class="layui-btn" function="top" topUrl="addFunc.html" topWidth="700px" topHeight="350px" topTitle="新增功能号信息" inputs="menuId:#menuId">
<i class="layui-icon"></i>新增
</button>
<button class="layui-btn" function="refresh">
<i class="layui-icon">ဂ</i>刷新
</button>
</div>
</div>
<div class="layui-col-md12 layui-col-space1">
<table id="fsDatagrid" class="fsDatagrid" lay-filter="fsDatagrid" url="/fsbus/S1009" isPage="0" defaultForm="query_form"></table>
<div class="fsDatagridCols">
<p type="numbers" title="#"/>
<p checkbox="true"/>
<p field="name" title="名称" width="200" sort="true"/>
<p field="linkUrl" title="访问地址" width="300"/>
<p field="funcs" title="功能号" width="200"/>
<p fixed="right" align="center" toolbar="#barDemo" title="操作" width="150"/>
</div>
<script type="text/html" id="barDemo">
<a id="edit" class="layui-btn layui-btn-xs" lay-event="top" topUrl="editFunc.html" topWidth="700px" topHeight="350px" isSelect="1" topTitle="编辑功能号信息" inputs="id:">编辑</a>
<a id="del" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="submit" isConfirm="1" url="/fsbus/S1013" inputs="id:">删除</a>
</script>
</div>
</div>
本文首发于我的博客：ITCTO技术博客
