fsLayui联动表格使用(二)

复杂联动表格使用 点击主表格，加载副表格数据，支持主、副表格的 增删改查 操作。
演示地址：http://fslayui.itcto.cn

复杂联动表格配置

和基础联通表格类似，在基础上扩展一些增删改查功能，基础联动表格参考：http://www.itcto.cn/layui/linkageDatagrid/

复杂的联动表格需要在基础表格上增加 defaultForm 配置和按钮操作。

表格详细配置说明参考：http://www.itcto.cn/layui/fsLayuiPlugin%E6%95%B0%E6%8D%AE%E8%A1%A8%E6%A0%BC%E4%BD%BF%E7%94%A8/#表格属性配置

联动表格demo

主表格demo

主表格需要在基础表格上新增默认form表单id配置 defaultForm

• form查询条件配置

<form class="layui-form" id="query_form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-mid">功能号：</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="funcNo" autocomplete="off" class="layui-input"/>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-mid">名称：</label>
      <div class="layui-input-inline" style="width: 150px;">
        <input type="text" name="funcName" autocomplete="off" class="layui-input"/>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-mid">类型：</label>
      <div class="layui-input-inline" style="width: 150px;">
        <select name="funcType" lay-verify="required">
          <option value="">--请选择--</option>
          <option value="c">功能号实现类</option>
          <option value="s">service实现类</option>
          <option value="m">mapper实现类</option>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <div class="layui-input-inline">
        <button class="layui-btn" type="button" function="query"><i class="layui-icon">&#xe615;</i>查询</button>
      </div>
    </div>
  </div>
</form>

• 菜单配置

<button class="layui-btn" function="top" topUrl="../complexDatagrid/add.html" topWidth="700px" topHeight="450px" topTitle="新增功能号信息">
  <i class="layui-icon">&#xe654;</i>新增
</button>
<button class="layui-btn" function="refresh">
  <i class="layui-icon">&#x1002;</i>刷新
</button>

• 表格配置

<table id="fsDatagrid" lay-filter="fsDatagrid" class="fsDatagrid" clickRenderTable="fsDatagrid2" clickRenderTableInputs="funcId:$id" isLoad="1" defaultForm="query_form" url="/fsbus/S1023" isPage="1" height="260"></table>

<div class="fsDatagridCols">
  <p type="numbers" title="#"/>
  <p field="funcNo" title="功能号" width="100" sort="true"/>
  <p field="funcName" title="名称" width="200"/>
  <p field="funcType" title="类型" width="150" templet="#typeTpl"/>
  <p field="state" title="状态" width="100" templet="#stateTpl"/>
  <p field="resource" title="资源信息" width="300"/>
  <p field="createdTime" title="创建时间" width="180"/>
  <p fixed="right" align="center" toolbar="#barDemo" title="操作" width="150"/>
</div>

<script type="text/html" id="typeTpl">
  {{#  if(d.funcType == 'c'){ }}
    功能号实现类
  {{# } else if(d.funcType == 's'){ }}
    service实现类
  {{# } else if(d.funcType == 'm'){ }}
    mapper实现类
  {{#  } }}
</script>
<script type="text/html" id="stateTpl">
  {{#  if(d.state == 0){ }}
    <span style="color: #c2c2c2">关闭</span>
  {{# } else if(d.state == 1){ }}
    <span style="color: #5FB878">启用</span>
  {{# } else if(d.state == 2){ }}
    <span style="color: #FF5722;">作废</span>
  {{#  } }}
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="top" topUrl="../complexDatagrid/edit.html" topWidth="700px" topHeight="450px" topTitle="编辑功能号信息" inputs="id:">编辑</a>
</script>

副表格demo

副表格需要特别注意button按钮中的 tableId 配置，通过配置按钮的 tableId 控制需要刷新的table。

• form查询条件配置

<form class="layui-form" id="query_form2">
  <div class="layui-form-item">
    <input type="hidden" id="funcId" name="funcId" autocomplete="off" class="layui-input"/>
    <div class="layui-inline">
      <label class="layui-form-mid">参数：</label>
      <div class="layui-input-inline" style="width: 150px;">
        <input type="text" name="attribute" autocomplete="off" class="layui-input"/>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-mid">名称：</label>
      <div class="layui-input-inline" style="width: 150px;">
        <input type="text" name="name" autocomplete="off" class="layui-input"/>
      </div>
    </div>
    <div class="layui-inline">
      <div class="layui-input-inline">
        <button class="layui-btn layui-btn-sm" type="button" function="query" tableId="fsDatagrid2"><i class="layui-icon">&#xe615;</i>查询</button>
      </div>
    </div>
  </div>
</form>

• 菜单配置

<div id="table_buttion_div">
  <button class="layui-btn layui-btn-sm" function="top" tableId="fsDatagrid2" topUrl="../complexDatagrid/addParam.html" topWidth="700px" topHeight="450px" isMaxWindow="" topTitle="新增参数" inputs="funcId:#funcId">
    <i class="layui-icon">&#xe654;</i>新增
  </button>
  <button class="layui-btn layui-btn-sm" function="refresh" tableId="fsDatagrid2">
    <i class="layui-icon">&#x1002;</i>刷新
  </button>
</div>

• 表格配置

<table id="fsDatagrid2" class="fsDatagrid" lay-filter="fsDatagrid2" url="/fsbus/S1030" isLoad="0" defaultForm="query_form2" height="260" isPage="0"></table>

<div class="fsDatagridCols">
  <p type="numbers" title="#"/>
  <p field="attribute" title="参数" width="100" sort="true"/>
  <p field="name" title="名称" width="150"/>
  <p field="notEmpty" title="必输" width="80" templet="#notEmptyTpl"/>
  <p field="verifyType" title="验证类型" width="100"/>
  <p field="value" title="值" width="100"/>
  <p field="defaultValue" title="默认值" width="100"/>
  <p field="minLength" title="最小长度" width="100"/>
  <p field="maxLength" title="最大长度" width="100"/>
  <p fixed="right" align="center" toolbar="#barDemo2" title="操作" width="150"/>
</div>

<script type="text/html" id="notEmptyTpl">
  {{#  if(d.notEmpty == '1'){ }}
    <span style="color: #FF5722">是</span>
  {{# } else{ }}
    <span style="color: #c2c2c2">否</span>
  {{#  } }}
</script>
<script type="text/html" id="barDemo2">
  <a class="layui-btn layui-btn-xs" lay-event="top" topUrl="../complexDatagrid/editParam.html" topWidth="700px" topHeight="510px" topTitle="编辑参数" inputs="id:">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="submit" isConfirm="1" url="/fsbus/S1034" inputs="id:">删除</a>
</script>

本文首发于我的博客：ITCTO技术博客