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技術博客