easyui datagrid表头分组内容和表头对不齐解决办法
2014-11-04
easyui datagrid表头分组分组后，有可能导致内容行和表头对不齐的情况，可能是easyui datagrid对太复杂的表头计算出问题。
解决办法：依据表头定位用的div重新设置内容行的第一行的宽度进行重新定位。
效果图如下
easyui datagrid表头分组分组后，导致内容行和表头对不齐的情况
onLoadSuccess事件中重新设置内容行宽度和表头一致效果
easyui datagrid表头分组内容和表头对不齐解决办法源代码如下
<tableid="dg"></table>
<script>
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'}]
});
</script>
<script>
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'}]
});
</script>