datagrid表头与数据列宽度不对齐_easyui datagrid表头分组内容和表头对不齐解决办法...

easyui datagrid表头分组分组后，有可能导致内容行和表头对不齐的情况，可能是easyui datagrid对太复杂的表头计算出问题。

解决办法：依据表头定位用的div重新设置内容行的第一行的宽度进行重新定位。

效果图如下

easyui datagrid表头分组分组后，导致内容行和表头对不齐的情况

onLoadSuccess事件中重新设置内容行宽度和表头一致效果

easyui datagrid表头分组内容和表头对不齐解决办法源代码如下

var cols = [[

{ "colspan": "2", "rowspan": "2", "title": "2013年底预计风电并网容量" },

{ "colspan": "5", "title": "项目追踪法" },

{ "colspan": "2", "title": "趋势外推法"}],

[{ "field": "上月底风电并网容量", "rowspan": "2", "title": "2013年9月风电并网容量" },

{ "colspan": "4", "title": "核准在建项目当年投产容量" },

{ "field": "季度底风电并网容量", "rowspan": "2", "title": "2014年3季度风电并网容量", "width": "100" },

{ "field": "季度平均新增并网容量", "rowspan": "2", "title": "季度平均新增并网容量", "width": "100"}],

[{ "field": "主导年底预计风电并网容量", "title": "项目追踪", "width": "100" },

{ "field": "法一年底预计风电并网容量", "title": "趋势外推", "width": "100" },

{ "field": "核准在建项目当年投产容量", "title": "合计", "width": "50" },

{ "field": "10月核准在建项目当年投产容量", "title": "10月", "width": "50" },

{ "field": "11月核准在建项目当年投产容量", "title": "11月", "width": "50" },

{ "field": "12月核准在建项目当年投产容量", "title": "12月", "width": "50"}]

];

$('#dg').datagrid({ width: 900, columns: cols, onLoadSuccess: function () {

//return //可以注释这句测试效果

var table = $(this).prev().find('table'), posDivs = table.eq(0).find('div.datagrid-cell')//表头用来定位用的div

, bodyFirstDivs = table.eq(1).find('tr:eq(0) div') //内容第一行用来设置宽度的div，以便设置和表头一样的宽度

, orderHeader = posDivs.map(function (index) { return { index: index, left: $(this).position().left} }); //计算表头的左边位置，以便重新排序和内容行单元格循序一致

orderHeader.sort(function (a, b) { return a.left - b.left; }); //对表头位置排序

setTimeout(function () {//延时设置宽度，因为easyui执行完毕回调后有后续的处理，会去掉内容行用来设置宽度的div的css width属性

for (var i = 0; i < orderHeader.length; i++) {

bodyFirstDivs.eq(i).css('width', posDivs.eq(orderHeader[i].index).css('width'));

}

}, 50);

}

, data: [{ '主导年底预计风电并网容量': '1', '法一年底预计风电并网容量': '2', '上月底风电并网容量': '3', '核准在建项目当年投产容量': '4', '10月核准在建项目当年投产容量': '5', '11月核准在建项目当年投产容量': '6', '12月核准在建项目当年投产容量': '7', '季度底风电并网容量': '8', '季度平均新增并网容量': '9'}]

});

加支付宝好友偷能量挖...

2014-10-17Web开发网

阅读(3308)喜欢(1)