简单联动表格使用 点击主表格，加载副表格数据，
演示地址：http://fslayui.itcto.cn
联动表格配置
联动表格配置和基础表格配置一致，只是多了几个特殊的属性，基础表格配置参考：http://www.itcto.cn/layui/fsLayuiPlugin数据表格使用/
联动表格需要在基础表格上增加以下3个配置：
- clickRenderTable：点击行渲染的表格id
- clickRenderTableInputs：点击后传入参数
- isLoad：是否自动加载
联动表格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技术博客
