fsLayuiPlugin树+数据表格使用

特殊说明

<link rel="stylesheet" href="/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="/plugins/ztree/js/jquery.ztree.all.min.js"></script>

树功能实现

• 展示树列表

<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	是		参数	点击树，异步加载表格，需要携带的参数

• 树菜单操作

<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">&#xe654;</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">&#xe642;</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">&#xe640;</i>删除
  </button>
  <button class="layui-btn fsTree" function="refresh">
    <i class="layui-icon">&#x1002;</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">&#xe654;</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">&#xe642;</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">&#xe640;</i>删除
      </button>
      <button class="layui-btn fsTree" function="refresh">
        <i class="layui-icon">&#x1002;</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>

数据表格配置

• 表格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">&#xe654;</i>新增
      </button>
      <button class="layui-btn" function="refresh">
        <i class="layui-icon">&#x1002;</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>