初涉dojo grid

来源：互联网发布：隐藏手机号码的软件编辑：程序博客网时间：2024/05/16 11:26

进入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'},]]}];

显示效果：

显然还存在着一些不合理的地方，表头显示是这样，在加载数据成功以后也存在问题。想实现客户想要的方式还需要在多研究一下！