进入IBM工作有几天了,先分给我了几个报表,报表是用dojo做的。需要做一个合并表头的样式,本来以为html做的合并表头方便这个也差不多吧,结果没想到dojo做合并表头还真不容易。
两种实现方式都是利用数组方式实现的,当然还有rowSpan和colSpan两种属性
有两种样式第一种:
DLR.DL4GridLayout = [{
defaultCell: {editable: false, width: "100px", styles:"text-align:center;"},
cells :[[
{field : 'serialNumber', name : '序号', width : '50px',rowSpan: 2},
{field : 'sendDate', name : '发文日期', width : '80px',rowSpan: 2},
{field : 'approveDate', name : '批准日期', width : '80px',rowSpan: 2},//modify date:2012-8-17 modifier:hanzhengyang
{field : 'toUnit', name : '主送单位', width : '80px',rowSpan: 2},
{field : 'sendNumber', name : '我方发文号', width : '80px',rowSpan: 2},
{field : 'fileName', name : '文件名称', width : '80px',rowSpan: 2},
{field : 'sendDept', name : '发文部门', width : '80px',rowSpan: 2},
{field : 'replyCorrespondenceID', name : '答复函件号', width : '80px',rowSpan: 2}, //modify date:2012-8-17 modifier:hanzhengyang
{field : 'needNotReply', name : '无需回复', width : '60px'},
{field : 'didNoReply', name : '未回复', width : '50px'},
{field : 'replied', name : '已回复', width : '50px'},
{field : 'requestReplyTime', name : '要求回文时间', width : '80px',rowSpan: 2},
{field : 'actualReplyTime', name : '实际回文时间', width : '80px',rowSpan: 2},
{field : 'recordCode', name : '实际回文编号', width : '80px',rowSpan: 2},
{field : 'draftUser', name : '编制人', width : '80px',rowSpan: 2}
],[{name : '回复情况', width : '160px', colSpan : 3}]]
}];
图片显示效果:
第二种方式:
DLR.DL4GridLayout = [{
defaultCell: {editable: false, width: "100px", styles:"text-align:center;"},
cells :[[
{width : '50px',height:'0px'},
{width : '80px',height:'0px'},
{width : '80px',height:'0px'},
{width : '80px',height:'0px'},
{width : '80px',height:'0px'},
{width : '80px',height:'0px'},
{width : '80px',height:'0px'},
{width : '80px',height:'0px'},
{width : '60px',height:'0px'},
{width : '50px',height:'0px'},
{width : '50px',height:'0px'},
{width : '80px',height:'0px'},
{width : '80px',height:'0px'},
{width : '80px',height:'0px'},
{width : '80px',height:'0px'}
], [
{field : 'serialNumber', name : '序号', width : '50px',rowSpan : 2},
{field : 'sendDate', name : '发文日期', width : '80px',rowSpan : 2},
{field : 'approveDate', name : '批准日期', width : '80px',rowSpan : 2},//modify date:2012-8-17 modifier:hanzhengyang
{field : 'toUnit', name : '主送单位', width : '80px',rowSpan : 2},
{field : 'sendNumber', name : '我方发文号', width : ' 80px',rowSpan : 2},
{field : 'fileName', name : '文件名称', width : '80px',rowSpan : 2},
{field : 'sendDept', name : '发文部门', width : '80px',rowSpan : 2},
{field : 'replyCorrespondenceID', name : '答复函件号', width : '80px',rowSpan : 2}, //modify date:2012-8-17 modifier:hanzhengyang
{name : '回复情况', width : '160px', colSpan : 3},
{field : 'requestReplyTime', name : '要求回文时间', width : '80px',rowSpan : 2},
{field : 'actualReplyTime', name : '实际回文时间', width : '80px',rowSpan : 2},
{field : 'recordCode', name : '实际回文编号', width : '80px',rowSpan : 2},
{field : 'draftUser', name : '编制人', width : '80px',rowSpan : 2}
],[
{field : 'needNotReply', name : '无需回复', width : '40px'},
{field : 'didNoReply', name : '未回复', width : '30px'},
{field : 'replied', name : '已回复', width : '30px'},
]]
}];
显示效果:
显然还存在着一些不合理的地方,表头显示是这样,在加载数据成功以后也存在问题。想实现客户想要的方式还需要在多研究一下!