easyui 多表头设置以及绑定数据

先看要实现的效果

实现方式，我是通过js创建的表头以及绑定数据

html：

 

    <table id="kpiGrid"></table>

实现js:

  

$(function(){
            var tableHeight= $(window).height()-170;

            $("#kpiGrid").datagrid({
                striped:true,
                collapsible:true,
                method:'get',
                url:'',
                fitColumns:false,
                remoteSort:false,
                pagination:true,
                rownumbers:false,
                showFooter:false,
                singleSelect:true,
                data:[{"starTime":"2017-07-19 12:00:00","endTime":"2017-07-19 12:00:00","timeg":"1小时","qyfw":"区域范围","xqyh":"vip小区","qoescore":80,"jrgzdf":30,"ywcszlgzdf":50, "fzgc":60, "czjl":"70", "taurate":150, "dnsgc":90, "tcprate":76, "ywrate":86, "tcpsy":56, "ywsy":260, "xzsl":400, "dxl":40 }],
                columns:[[
                    {field:'starTime',rowspan:3,title:'开始时间',width:120,align:'center'},
                    {field:'endTime',rowspan:3,title:'结束时间',width:120,align:'center'},
                    {field:'timeg',rowspan:3,title:'时间粒度',width:60,align:'center'},
                    {field:'qyfw',rowspan:3,title:'区域范围',width:120,align:'center'},
                    {field:'xqyh',rowspan:3,title:'小区|用户',width:120,align:'center'},
                    {field:'qoescore',rowspan:3,title:'QOE感知总分',width:80,align:'center'},
                    {field:'jrgzdf',rowspan:3,title:'接入感知得分',width:80,align:'center'},
                    {field:'ywcszlgzdf',rowspan:3,title:'业务传输质量感知得分',width:125,align:'center'},
                    {/*field:'qoemx',*/colspan:10,title:'移动互联网用户感知评估模型(QOE)',width:590,align:'center'}
                ],[
                    {/*field:'jrgzpf',*/colspan:7,title:'接入感知评分(40%)',width:580,align:'center'},
                    {/*field:'ywpf',*/colspan:3,title:'业务传输质量感知得分(60%)',width:240,align:'center'}
                ],[
                    {field:'fzgc',rowspan:2,title:'附着过程',width:80,align:'center'},
                    {field:'czjl',rowspan:2,title:'承载建立',width:80,align:'center'},
                    {field:'taurate',rowspan:2,title:'TAU成功率',width:80,align:'center'},
                    {field:'dnsgc',rowspan:2,title:'DNS解析过程',width:80,align:'center'},
                    {field:'tcprate',rowspan:2,title:'TCP连接成功率',width:90,align:'center'},
                    {field:'ywrate',rowspan:2,title:'业务建立成功率',width:90,align:'center'},
                    {field:'tcpsy',rowspan:2,title:'TCP连接时延',width:80,align:'center'},

                    {field:'ywsy',rowspan:2,title:'业务时延(小包)',width:100,align:'center'},
                    {field:'xzsl',rowspan:2,title:'下载速率(大包)',width:100,align:'center'},
                    {field:'dxl',rowspan:2,title:'掉线率',width:80,align:'center'}
                ]]
            });
        })

data 是绑定的数据

我们可以看到这里的表都是由3个数组组成的，一行一个数组哈

另外，不需要绑定数据的列不能写field属性，如果写了列表会错位！

看看效果图哈