複雜聯動表格使用 點擊主表格,加載副表格數據,支持主、副表格的 增刪改查 操做。
演示地址: http://fslayui.itcto.cn
和基礎聯通表格相似,在基礎上擴展一些增刪改查功能,基礎聯動表格參考: http://www.itcto.cn/layui/linkageDatagrid/
複雜的聯動表格須要在基礎表格上增長 defaultForm
配置和按鈕操做。html
表格詳細配置說明參考:http://www.itcto.cn/layui/fsLayuiPlugin%E6%95%B0%E6%8D%AE%E8%A1%A8%E6%A0%BC%E4%BD%BF%E7%94%A8/#表格屬性配置app
主表格須要在基礎表格上新增默認form表單id配置 defaultForm
<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"></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"></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="功能號" 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>
副表格須要特別注意button按鈕中的tableId
配置,經過配置按鈕的tableId
控制須要刷新的table。
<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"></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"></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="參數" 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技術博客