新聞動態   News
聯係CCTV成人污下载   Contact
你的位置:首頁 > 新聞動態

easyui datagrid表頭分組內容和表頭對不齊解決辦法

2014-11-04

easyui datagrid表頭分組分組後,有可能導致內容行和表頭對不齊的情況,可能是easyui datagrid對太複雜的表頭計算出問題。

解決辦法:依據表頭定位用的div重新設置內容行的第一行的寬度進行重新定位。

  效果圖如下

easyui datagrid表頭分組分組後,導致內容行和表頭對不齊

easyui datagrid表頭分組分組後,導致內容行和表頭對不齊的情況

easyui datagrid表頭分組內容和表頭對不齊解決辦法

  onLoadSuccess事件中重新設置內容行寬度和表頭一致效果


  easyui datagrid表頭分組內容和表頭對不齊解決辦法源代碼如下

-收縮HTML代碼  運行代碼[如果運行無效果,請自行將源代碼保存為html文件運行]
<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>