簡單聯(lián)動表格使用 點擊主表格，加載副表格數(shù)據(jù)，
演示地址：http://fslayui.itcto.cn

聯(lián)動表格配置

聯(lián)動表格配置和基礎表格配置一致，只是多了幾個特殊的屬性，基礎表格配置參考：http://www.itcto.cn/layui/fsLayuiPlugin數(shù)據(jù)表格使用/

聯(lián)動表格需要在基礎表格上增加以下3個配置：

• clickRenderTable：點擊行渲染的表格id
• clickRenderTableInputs：點擊后傳入?yún)?shù)
• isLoad：是否自動加載

詳細配置說明參考：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)動表格demo

主表格demo

主表格需要配置 clickRenderTable,clickRenderTableInputs,isLoad,三個屬性，isLoad 可以不用配置，默認為1.

<table id="fsDatagrid" lay-filter="fsDatagrid" class="fsDatagrid" clickRenderTable="fsDatagrid2" clickRenderTableInputs="funcId:$id" isLoad="1" 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="狀態(tài)" width="100" templet="#stateTpl"/>
  <p field="resource" title="資源信息" width="300"/>
  <p field="createdTime" title="創(chuàng)建時間" width="180"/>
</div>

<script type="text/html" id="typeTpl">
  {{#  if(d.funcType == 'c'){ }}
    功能號實現(xiàn)類
  {{# } else if(d.funcType == 's'){ }}
    service實現(xiàn)類
  {{# } else if(d.funcType == 'm'){ }}
      mapper實現(xiàn)類
  {{#  } }}
</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>

副表格demo

副表格需要配置 isLoad 屬性為 0 。
這里必須配置為0，不然會導致異步數(shù)據(jù)渲染沖突，首次加載頁面顯示存在問題

<table id="fsDatagrid2" class="fsDatagrid" lay-filter="fsDatagrid2" url="/fsbus/S1030" isLoad="0" 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="驗證類型" 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"/>
</div>

<script type="text/html" id="notEmptyTpl">
  {{#  if(d.notEmpty == '1'){ }}
    <span style="color: #FF5722">是</span>
  {{# } else{ }}
    <span style="color: #c2c2c2">否</span>
  {{#  } }}
</script>

本文首發(fā)于我的博客：ITCTO技術博客