进入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'}, ]] }];
显示效果:
显然还存在着一些不合理的地方,表头显示是这样,在加载数据成功以后也存在问题。想实现客户想要的方式还需要在多研究一下!