先看要实现的效果
实现方式,我是通过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属性,如果写了列表会错位!
看看效果图哈