<rt id="o1hh4"></rt>
    <source id="o1hh4"><nav id="o1hh4"><strike id="o1hh4"></strike></nav></source>
    <cite id="o1hh4"></cite>
    <rt id="o1hh4"></rt>
      <source id="o1hh4"><nav id="o1hh4"><strike id="o1hh4"></strike></nav></source>
      <cite id="o1hh4"></cite>
      <rt id="o1hh4"></rt>
        <source id="o1hh4"><nav id="o1hh4"><strike id="o1hh4"></strike></nav></source>
        <cite id="o1hh4"></cite>
        新闻动态   News
        联系我们   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>


        成 人 h动 漫在线播放