当前位置 : 主页 > 网页制作 > Dojo >

初涉dojo grid

来源:互联网 收集:自由互联 发布时间:2021-06-15
进入IBM工作有几天了,先分给我了几个报表,报表是用dojo做的。需要做一个合并表头的样式,本来以为html做的合并表头方便这个也差不多吧,结果没想到dojo做合并表头还真不容易。
        进入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'},
		
	]]
}];

显示效果:

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

网友评论