layui多表头

layui多表头
主要是colspan跨几列与rowspan跨几行

cols: [
            [ //表头
                {type: 'numbers', width: '3%', rowspan: '2', fixed: 'left'},
                {field: 'cname', title: '市', align: 'center', width: '100', rowspan: '2', fixed: 'left'},
                {field: 'dname', title: '县', align: 'center', width: '100', rowspan: '2', fixed: 'left'},
                {field: 'ennm', title: '水库名称', align: 'center', width: '100', rowspan: '2', fixed: 'left'},
                {fied: '', title: '行政责任人', align: 'center', colspan: '4',},
                {fied: '', title: '技术责任人', align: 'center', colspan: '4',},
                {fied: '', title: '巡查责任人', align: 'center', colspan: '4',},
                {
                    field: 'tool',
                    title: '操作',
                    align: 'left',
                    toolbar: '#skTool',
                    width: '120',
                    fixed: 'right',
                    minWidth: 120,
                    rowspan: '2',
                    fixed: 'right'
                }
            ], [
                {
                    fied: 'personName', title: '姓名', align: 'center', templet: function (d) {
                        var personName = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "0") {
                                personName += item.personName + "<br/>";
                            }
                        })
                        return "<div>" + personName + "</div>"
                    }
                },
                {
                    fied: 'personTitle', title: '单位', align: 'center', minWidth: 100, templet: function (d) {
                        var personTitle = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "0") {
                                personTitle += item.personTitle + "<br/>";
                            }
                        })
                        return "<div>" + personTitle + "</div>"
                    }
                },
                {
                    fied: 'personUnit', title: '职务', align: 'center', minWidth: 100, templet: function (d) {
                        var personUnit = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "0") {
                                personUnit += item.personUnit + "<br/>";
                            }
                        })
                        return "<div>" + personUnit + "</div>"
                    }
                },
                {
                    fied: 'personName', title: '联系电话', align: 'center', minWidth: 120, templet: function (d) {
                        var personTelephone = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "0") {
                                personTelephone += item.personTelephone + "<br/>";
                            }
                        })
                        return "<div>" + personTelephone + "</div>"
                    }
                },

                {
                    fied: 'personName', title: '姓名', align: 'center', templet: function (d) {
                        var personName = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "1") {
                                personName += item.personName + "<br/>";
                            }
                        })
                        return "<div>" + personName + "</div>"
                    }
                },
                {
                    fied: 'personTitle', title: '单位', align: 'center', minWidth: 100, templet: function (d) {
                        var personTitle = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "1") {
                                personTitle += item.personTitle + "<br/>";
                            }
                        })
                        return "<div>" + personTitle + "</div>"
                    }
                },
                {
                    fied: 'personUnit', title: '职务', align: 'center', minWidth: 100, templet: function (d) {
                        var personUnit = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "1") {
                                personUnit += item.personUnit + "<br/>";
                            }
                        })
                        return "<div>" + personUnit + "</div>"
                    }
                },
                {
                    fied: 'personTelephone', title: '联系电话', align: 'center', minWidth: 120, templet: function (d) {
                        var personTelephone = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "1") {
                                personTelephone += item.personTelephone + "<br/>";
                            }
                        })
                        return "<div>" + personTelephone + "</div>"
                    }
                },
                {
                    fied: 'personName', title: '姓名', align: 'center', templet: function (d) {
                        var personName = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "2") {
                                personName += item.personName + "<br/>";
                            }
                        })
                        return "<div>" + personName + "</div>"
                    }
                },
                {
                    fied: 'personTitle', title: '单位', align: 'center', minWidth: 100, templet: function (d) {
                        var personTitle = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "2") {
                                personTitle += item.personTitle + "<br/>";
                            }
                        })
                        return "<div>" + personTitle + "</div>"
                    }
                },
                {
                    fied: 'personUnit', title: '职务', align: 'center', minWidth: 100, templet: function (d) {
                        var personUnit = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "2") {
                                personUnit += item.personUnit + "<br/>";
                            }
                        })
                        return "<div>" + personUnit + "</div>"
                    }
                },
                {
                    fied: 'personTelephone', title: '联系电话', align: 'center', minWidth: 120, templet: function (d) {
                        var personTelephone = "";
                        $.each(d.skZrrInfoList, function (index, item) {
                            if (item.personType == "2") {
                                personTelephone += item.personTelephone + "<br/>";
                            }
                        })
                        return "<div>" + personTelephone + "</div>"
                    }
                }

            ]


        ]

猜你喜欢

转载自www.cnblogs.com/JaminYe/p/13394237.html