fsLayui联动表格使用(一)

简单联动表格使用 点击主表格，加载副表格数据，
演示地址：http://fslayui.itcto.cn

联动表格配置

联动表格配置和基础表格配置一致，只是多了几个特殊的属性，基础表格配置参考：http://www.itcto.cn/layui/fsLayuiPlugin数据表格使用/

联动表格需要在基础表格上增加以下3个配置：

• clickRenderTable：点击行渲染的表格id
• clickRenderTableInputs：点击后传入参数
• 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/#表格属性配置

联动表格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="状态" width="100" templet="#stateTpl"/>
  <p field="resource" title="资源信息" width="300"/>
  <p field="createdTime" title="创建时间" width="180"/>
</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>

副表格demo

副表格需要配置 isLoad 属性为 0 。
这里必须配置为0，不然会导致异步数据渲染冲突，首次加载页面显示存在问题

<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="参数" 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>

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