復(fù)雜聯(lián)動(dòng)表格使用 點(diǎn)擊主表格在张，加載副表格數(shù)據(jù)，支持主矮慕、副表格的 增刪改查 操作。
演示地址：http://fslayui.itcto.cn
復(fù)雜聯(lián)動(dòng)表格配置
和基礎(chǔ)聯(lián)通表格類似啄骇，在基礎(chǔ)上擴(kuò)展一些增刪改查功能痴鳄，基礎(chǔ)聯(lián)動(dòng)表格參考：http://www.itcto.cn/layui/linkageDatagrid/
復(fù)雜的聯(lián)動(dòng)表格需要在基礎(chǔ)表格上增加 defaultForm 配置和按鈕操作呛梆。
表格詳細(xì)配置說明參考：http://www.itcto.cn/layui/fsLayuiPlugin%E6%95%B0%E6%8D%AE%E8%A1%A8%E6%A0%BC%E4%BD%BF%E7%94%A8/#表格屬性配置
聯(lián)動(dòng)表格demo
主表格demo
主表格需要在基礎(chǔ)表格上新增默認(rèn)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">功能號(hào)：</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="">--請(qǐng)選擇--</option>
<option value="c">功能號(hào)實(shí)現(xiàn)類</option>
<option value="s">service實(shí)現(xiàn)類</option>
<option value="m">mapper實(shí)現(xiàn)類</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"></i>查詢</button>
</div>
</div>
</div>
</form>
- 菜單配置
<button class="layui-btn" function="top" topUrl="../complexDatagrid/add.html" topWidth="700px" topHeight="450px" topTitle="新增功能號(hào)信息">
<i class="layui-icon"></i>新增
</button>
<button class="layui-btn" function="refresh">
<i class="layui-icon">ဂ</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="功能號(hào)" width="100" sort="true"/>
<p field="funcName" title="名稱" width="200"/>
<p field="funcType" title="類型" width="150" templet="#typeTpl"/>
<p field="state" title="狀態(tài)" width="100" templet="#stateTpl"/>
<p field="resource" title="資源信息" width="300"/>
<p field="createdTime" title="創(chuàng)建時(shí)間" width="180"/>
<p fixed="right" align="center" toolbar="#barDemo" title="操作" width="150"/>
</div>
<script type="text/html" id="typeTpl">
{{# if(d.funcType == 'c'){ }}
功能號(hào)實(shí)現(xiàn)類
{{# } else if(d.funcType == 's'){ }}
service實(shí)現(xiàn)類
{{# } else if(d.funcType == 'm'){ }}
mapper實(shí)現(xiàn)類
{{# } }}
</script>
<script type="text/html" id="stateTpl">
{{# if(d.state == 0){ }}
<span style="color: #c2c2c2">關(guān)閉</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="編輯功能號(hào)信息" 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">參數(shù)：</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"></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="新增參數(shù)" inputs="funcId:#funcId">
<i class="layui-icon"></i>新增
</button>
<button class="layui-btn layui-btn-sm" function="refresh" tableId="fsDatagrid2">
<i class="layui-icon">ဂ</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="參數(shù)" width="100" sort="true"/>
<p field="name" title="名稱" width="150"/>
<p field="notEmpty" title="必輸" width="80" templet="#notEmptyTpl"/>
<p field="verifyType" title="驗(yàn)證類型" width="100"/>
<p field="value" title="值" width="100"/>
<p field="defaultValue" title="默認(rèn)值" 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="編輯參數(shù)" 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>
本文首發(fā)于我的博客：ITCTO技術(shù)博客
