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>"
                    }
                }

            ]


        ]


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM