zoukankan      html  css  js  c++  java
  • layui多表头

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

    cols: [
                [ //表头
                    {type: 'numbers',  '3%', rowspan: '2', fixed: 'left'},
                    {field: 'cname', title: '市', align: 'center',  '100', rowspan: '2', fixed: 'left'},
                    {field: 'dname', title: '县', align: 'center',  '100', rowspan: '2', fixed: 'left'},
                    {field: 'ennm', title: '水库名称', align: 'center',  '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',
                         '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>"
                        }
                    }
    
                ]
    
    
            ]
    
    作者: JaminYe
    版权声明:本文原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
  • 相关阅读:
    Android环境说明 与 屏幕尺寸问题
    关于修改Visual Studio 2010 Ultimate RC的密钥
    安装Office 2010是出现windows installer服务不能更新一个或多个受保护的windows文件 错误
    Sharepoint 2010和阿里通进行集成完成短信通知功能
    用visual studio 2010 打开winform程序 时 无法运行 的解决方案
    一次尴尬的招聘经历
    TFS里的MSB3021错误
    程序员是强者
    修改密码导致应用程序池无法启动
    远离客户开发陷阱(转)
  • 原文地址:https://www.cnblogs.com/JaminYe/p/13394237.html
Copyright © 2011-2022 走看看