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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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,不然会导致异步数据渲染冲突,首次加载页面显示存在问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>