关于layUI多级表头



错误原因:

  记录下使用layUI多级表头时犯的一个错误,其实主要原因是我多写了一个逗号 “ , ” 导致报错的,我的表格只有2级表头,在第二级时多写了一个逗号

错误提示:

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
31
32
33
layui.all.js?v=1.1.1:179 Laytpl ErrorTypeError: Cannot read property 'fixed' of undefined
<div class="layui-form layui-border-box {{d.VIEW_CLASS}}" lay-filter="LAY-table-{{d.index}}" style="{{# if(d.data.width){ }}width:{{d.data.width}}px;{{# } }} {{# if(d.data.height){ }}height:{{d.data.height}}px;{{# } }}">{{# var left, right; }}<div class="layui-table-header"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><thead>{{# layui.each(d.data.cols, function(i1, item1){ }}<tr>{{# layui.each(item1, function(i2, item2){ }}{{# if(item2.fixed && item2.fixed !== "right"){ left = true; } }}{{# if(item2.fixed === "right"){ right = true; } }}{{# if(item2.checkbox){ }}<th data-field="{{ item2.field||i2 }}" data-type="checkbox" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-checkbox"><input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose" {{# if(item2[d.data.checkName]){ }}checked{{# }; }}></div></th>{{# } else if(item2.space){ }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-space"></div></th>{{# } else { }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} {{# if(item2.unresize){ }}unresize="true"{{# } }}>{{# if(item2.colspan > 1){ }}<div class="layui-table-cell laytable-cell-group" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span></div>{{# } else { }}<div class="layui-table-cell laytable-cell-{{d.index}}-{{item2.field||i2}}" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span>{{# if(item2.sort){ }}<span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span>{{# } }}</div>{{# } }}</th>{{# }; }}{{# }); }}</tr>{{# }); }}</thead></table></div><div class="layui-table-body layui-table-main"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><tbody></tbody></table></div>{{# if(left){ }}<div class="layui-table-fixed layui-table-fixed-l"><div class="layui-table-header"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><thead>{{# layui.each(d.data.cols, function(i1, item1){ }}<tr>{{# layui.each(item1, function(i2, item2){ }}{{# if(item2.fixed && item2.fixed !== "right"){ left = true; } }}{{# if(item2.fixed === "right"){ right = true; } }}{{# if(item2.fixed && item2.fixed !== "right"){ }}{{# if(item2.checkbox){ }}<th data-field="{{ item2.field||i2 }}" data-type="checkbox" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-checkbox"><input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose" {{# if(item2[d.data.checkName]){ }}checked{{# }; }}></div></th>{{# } else if(item2.space){ }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-space"></div></th>{{# } else { }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} {{# if(item2.unresize){ }}unresize="true"{{# } }}>{{# if(item2.colspan > 1){ }}<div class="layui-table-cell laytable-cell-group" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span></div>{{# } else { }}<div class="layui-table-cell laytable-cell-{{d.index}}-{{item2.field||i2}}" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span>{{# if(item2.sort){ }}<span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span>{{# } }}</div>{{# } }}</th>{{# }; }}{{# }; }}{{# }); }}</tr>{{# }); }}</thead></table></div><div class="layui-table-body"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><tbody></tbody></table></div></div>{{# }; }}{{# if(right){ }}<div class="layui-table-fixed layui-table-fixed-r"><div class="layui-table-header"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><thead>{{# layui.each(d.data.cols, function(i1, item1){ }}<tr>{{# layui.each(item1, function(i2, item2){ }}{{# if(item2.fixed && item2.fixed !== "right"){ left = true; } }}{{# if(item2.fixed === "right"){ right = true; } }}{{# if(item2.fixed === "right"){ }}{{# if(item2.checkbox){ }}<th data-field="{{ item2.field||i2 }}" data-type="checkbox" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-checkbox"><input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose" {{# if(item2[d.data.checkName]){ }}checked{{# }; }}></div></th>{{# } else if(item2.space){ }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-space"></div></th>{{# } else { }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} {{# if(item2.unresize){ }}unresize="true"{{# } }}>{{# if(item2.colspan > 1){ }}<div class="layui-table-cell laytable-cell-group" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span></div>{{# } else { }}<div class="layui-table-cell laytable-cell-{{d.index}}-{{item2.field||i2}}" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span>{{# if(item2.sort){ }}<span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span>{{# } }}</div>{{# } }}</th>{{# }; }}{{# }; }}{{# }); }}</tr>{{# }); }}</thead></table><div class="layui-table-mend"></div></div><div class="layui-table-body"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><tbody></tbody></table></div></div>{{# }; }}{{# if(d.data.page){ }}<div class="layui-table-tool"><div class="layui-inline layui-table-page" id="layui-table-page{{d.index}}"></div></div>{{# } }}<style>{{# layui.each(d.data.cols, function(i1, item1){layui.each(item1, function(i2, item2){ }}.laytable-cell-{{d.index}}-{{item2.field||i2}}{ width:{{item2.width||50}}px }{{# });}); }}</style></div>
error @ layui.all.js?v=1.1.1:179
t.pt.parse @ layui.all.js?v=1.1.1:199
t.pt.render @ layui.all.js?v=1.1.1:203
H.render @ layui.all.js?v=1.1.1:4722
H @ layui.all.js?v=1.1.1:4706
d.render @ layui.all.js?v=1.1.1:5048
listRegistration @ sign_regisrationCountList.js?v=1.1.3:21
onclick @ sign_regisrationCountList.jsp?1=1&loginMenuId=01ffadb7-0a28-4f89-9c6d-aadf1dcf3934:91
layui.all.js?v=1.1.1:1807 Uncaught Error: Syntax error, unrecognized expression: Laytpl ErrorTypeError: Cannot read property 'fixed' of undefined
at Function.t.error (layui.all.js?v=1.1.1:1807)
at t.tokenize (layui.all.js?v=1.1.1:1989)
at t.select (layui.all.js?v=1.1.1:1998)
at Function.t [as find] (layui.all.js?v=1.1.1:1514)
at pe.fn.init.find (layui.all.js?v=1.1.1:2049)
at new pe.fn.init (layui.all.js?v=1.1.1:2063)
at pe (layui.all.js?v=1.1.1:1377)
at H.render (layui.all.js?v=1.1.1:4722)
at new H (layui.all.js?v=1.1.1:4706)
at Object.d.render (layui.all.js?v=1.1.1:5048)
t.error @ layui.all.js?v=1.1.1:1807
t.tokenize @ layui.all.js?v=1.1.1:1989
t.select @ layui.all.js?v=1.1.1:1998
t @ layui.all.js?v=1.1.1:1514
find @ layui.all.js?v=1.1.1:2049
pe.fn.init @ layui.all.js?v=1.1.1:2063
pe @ layui.all.js?v=1.1.1:1377
H.render @ layui.all.js?v=1.1.1:4722
H @ layui.all.js?v=1.1.1:4706
d.render @ layui.all.js?v=1.1.1:5048
listRegistration @ sign_regisrationCountList.js?v=1.1.3:21
onclick @ sign_regisrationCountList.jsp?1=1&loginMenuId=01ffadb7-0a28-4f89-9c6d-aadf1dcf3934:91

主要代码:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
table.render({
height:'400'
,elem: '#registration'
,cols: [
//一级表头
[
{rowspan: 2,field: 'myIndex',title: '序号',width: 60, align: "center"}
,{rowspan: 2,field: 'patientName', title: '姓名', width: 60, align: "center"}
,{rowspan: 2,field: 'patientGender', title: '性别', width: 60, align: "center"}
,{rowspan: 2,field: 'patientIdNo', title: '身份证', width: 180, align: "center"}
,{rowspan: 2,field:'signNum', title: '签约编码', width: 100, align: "center"}
,{rowspan: 2,field: 'patientTel', title: '联系电话', width: 120, align: "center"}
,{title: '签约家庭类别', colspan:7}
,{title: '重点人群签约服务项目数', colspan:7}
,{title: '其他人群', colspan:5}
,{rowspan: 2,field: 'serpkName', title: '签约服务包类型', width: 100, align: "center"}
,{rowspan: 2,field: 'remark', title: '备注', width: 80, align: "center"}
]
//二级表头
,[
//签约家庭类别
{field:'disabilitiesInFamily', title: '计生失独伤残家庭', width: 70, align: "center"}
,{field:'familyOnlyChild', title: '计生独生子女', width: 70, align: "center"}
,{field:'familyPlanningTwoWomen', title: '计生双女', width: 70, align: "center"}
,{field:'fiveInsuredHouseholds', title: '五保户', width: 70, align: "center"}
,{field:'lowInsuredHouseholds', title: '低保户', width: 70, align: "center"}
,{field:'fileCardPoor', title: '建档立卡贫困人口', width: 70, align: "center"}
,{field:'hsOther', title: '其他', width: 70, align: "center"}
//重点人群签约服务项目数
,{field:'elderly', title: '老年人', width: 70, align: "center"}
,{field:'patientsWithHypertension', title: '高血压患者', width: 70, align: "center"}
,{field:'typeTwoDiabetes', title: '2型糖尿病患者', width: 70, align: "center"}
,{field:'patientsWithMentalDisorders', title: '严重精神障碍患者', width: 70, align: "center"}
,{field:'tuberculosisPatients', title: '结核病患者', width: 70, align: "center"}
,{field:'maternal', title: '孕产妇', width: 70, align: "center"}
,{field:'childernAgedZeroToSix', title: '0-6岁儿童', width: 70, align: "center"}
//其他人群
,{field:'disabled', title: '残疾人', width: 70, align: "center"}
,{field:'patientsWithCereBrovascularDisease', title: '脑血管病患者', width: 70, align: "center"}
,{field:'coronaryHeartDiseasePatients', title: '冠心病患者', width: 70, align: "center"}
,{field:'cancerPatients', title: '癌症患者', width: 70, align: "center"}
,{field:'others', title: '其他', width: 70, align: "center"}
]
]
,id: 'registration'
,url: 'statisticalReportsAction.action'
,where: {act: 'registrationStatisticalList',strJson:JSON.stringify(qvo)}
,method: 'post'
,skin: 'row' //表格风格
,even: true
,page: true //是否显示分页
,limits: [5,10,15,20,25,50,100,200]
,limit: 10 //每页默认显示的数量
,done: function(res, curr, count){
if (res.data != null) {
vos = res.data;
numberCount = res.data.length;
}
// //遮罩关闭
// layer.close(index);
}
});

本次记录到此结束,欢迎订阅、关注、收藏、评论、点赞哦~~( ̄▽ ̄~)~

哇咔咔(∪。∪)。。。zzz