easyui datagrid表头分组内容和表头对不齐解决办法

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

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

  效果图如下

easyui datagrid表头分组分组后,导致内容行和表头对不齐

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

easyui datagrid表头分组内容和表头对不齐解决办法

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

 

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

    <table id="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>

 



原创文章,转载请注明出处:easyui datagrid表头分组内容和表头对不齐解决办法
评论(1)Web开发网
阅读(1800)喜欢(1)不喜欢(1)easyui