datagrid下fitcolums设置没有铺满100%问题

最新推荐文章于 2022-07-20 11:15:16 发布

cherrol_2333

最新推荐文章于 2022-07-20 11:15:16 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： datagrid fitcolums 自适应表格宽度

本文链接：https://blog.youkuaiyun.com/qq_30274729/article/details/78288208

在处理datagrid的fitColumns属性时，遇到表格宽度无法自适应填充满100%的困扰。经过多次尝试，找到了一个解决办法，即通过添加一个隐藏列来实现完美铺满的效果。

真的是纠结了很久，忽然发现一个偏方，希望能帮到你们.

fit:true,fitcolums:true

都设置了，然而并没有什么卵用，还是铺不满，慢慢尝试忽然发现一个不错的方法，就是设置一个隐藏列

		datagrid1:function(){
			$(".datagrid1").show();
			$("#datagrid1").datagrid({
				url: "/tran/tranPmsYx.do",
				rownumbers: true,
				fit: true, 
				fitColumns: true,
				singleSelect: true, 
				idField: 'Project_id',
				toolbar: [{
					text: "导出",
					width: 80,
					iconCls: 'icon-export',
					handler: function () {}
				}],
				columns: [
					[{
						field: 'orgNo',
						title: '供电单位',
						align: 'center',
						sortable: true,
						width: 2,
						rowspan:3
					}, {
						field: 'pmsNum',
						title: 'PMS系统总数',
						align: 'center',
						width: 2,
						rowspan:3
					}, {
						field: "1-3",
						title: '营销基础数据平台',
						width: 10,
						colspan:6,
						align: "center",
					}],
					[{
						field: 'yxNum',
						title: '总数',
						align: 'center',
						width: 2,
						rowspan:2
					}, {
						field: 'yxMatchNum',
						title: '匹配数',
						align: 'center',
						width: 2,
						rowspan:2
					}, {
						field: "2-3",
						title: '差异数',
						width: 6,
						colspan:3,
						align: "center",
						styler: function(value,row,index){
							return 'text-decoration: underline;text-decoration-color: #00F;color:#00F;cursor: pointer;';
						}
					}],
					[{
						field: 'yxRy',
						title: '冗余数',
						align: 'center',
						width: 2,
						styler: function(value,row,index){
							return 'text-decoration: underline;text-decoration-color: #00F;color:#00F;cursor: pointer;';
						}
					}, {
						field: 'yxqs',
						title: '缺失数',
						align: 'center',
						width: 2,
						styler: function(value,row,index){
							return 'text-decoration: underline;text-decoration-color: #00F;color:#00F;cursor: pointer;';
						}
					}, {
						field: "yxbyz",
						title: '属性不一致数',
						width: 2,
						styler: function(value,row,index){
							return 'text-decoration: underline;text-decoration-color: #00F;color:#00F;cursor: pointer;';
						},
						align: "center",
					}, {
                        field: "frezon",//名字随意，但不能为空
                        title: '',//加不加都无所谓
                        hidden:true,//一定要是隐藏列
                        align: "center",
                        width:''//width为空或者0
                    }]
				]
			})

，如果是有复杂表头（合并单元格）的时候一定要在最后一列最下边的位置，而且正常的colspan一定要对上。完毕！