[转载]easyui datagrid标题列宽度自适应

[转载]easyui datagrid标题列宽度自适应.

最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体自适应呢? 如: columns: [[{ field: ‘testName’, title: ‘测试名’, align: ‘center’ },{ field: ‘testValue’, title: ‘测试值’, align: ‘center’ }]],如果按照上面这样设置列而不做其他处理的话。绑定出来的数据将会变成:

          

如上图这样列标题和数据主体对不上号。或许有的朋友会想,直接设个固定值不就完了,但是对于一些不能确定长度的数据设固定值显然不能达到我们的要 求。带着这个问题我百度谷歌了一番 发现网络上并没有我太满意的相关资料。毛主席曾经曰过:自己动手丰衣足食。我只好听从毛主席的教导自己解决问题。By 梨洛

要设置列宽度,我们必须知道easyui datagrid在html中是怎么样的。于是乎动用chrome的开发人员工具,查看一番如图:

头部列标题为:

即我们可以用JQuery选择器 $(“.datagrid-header-inner table tr:first-child”)来取到标题列  (数据主体列也差不多我就不贴出来了)。

既然能取得到这些,只要我们判断数据主体列的宽度大还是 标题列的宽度大。相应的设置回去 那标题和数据不就对其了。来上代码:

<script type="text/javascript" language="javascript">// <![CDATA[
    $(document).ready(function () {
        $("#test").datagrid({
            url: "/Test/Test1Data",
            type: "post",
            datatype: "json",
            width: 465,
            height: 280,
            loadMsg: "数据加载中,请稍后...",
            fitCloumns: true,
            nowrap: true,
            rownumbers: false,
            pagination: true,
            singleSelect: true,
            showFooter: true,
            columns: [[
                    { field: 'testName', title: '测试名', align: 'center' },
                    { field: 'testValue', title: '测试值', align: 'center' }
                    ]],
            //bind数据成功设置列宽度
            onLoadSuccess: function (data) {
                //datagrid头部 table 的第一个tr 的td们,即columns的集合
                var headerTds = $(".datagrid-header-inner table tr:first-child").children();
                //datagrid主体 table 的第一个tr 的td们,即第一个数据行
                var bodyTds = $(".datagrid-body table tr:first-child").children();
                var totalWidth = 0; //合计宽度,用来为datagrid头部和主体设置宽度
                //循环设置宽度
                bodyTds.each(function (i, obj) {
                    var headerTd = $(headerTds.get(i));
                    var bodyTd = $(bodyTds.get(i));
                    $("div:first-child", headerTds.get(i)).css("text-align", "center");
                    var headerTdWidth = headerTd.width(); //获取第i个头部td的宽度
                    //这里加5个像素 是因为数据主体我们取的是第一行数据,不能确保第一行数据宽度最宽,预留5个像素。有兴趣的朋友可以先判断最大的td宽度都在进行设置
                    var bodyTdWidth = bodyTd.width() + 5;
                    var width = 0;
                    //如果头部列名宽度比主体数据宽度宽,则它们的宽度都设为头部的宽度。反之亦然
                    if (headerTdWidth > bodyTdWidth) {
                        width = headerTdWidth;
                        bodyTd.width(width);
                        headerTd.width(width);
                        totalWidth += width;
                    } else {
                        width = bodyTdWidth;
                        headerTd.width(width);
                        bodyTd.width(width);
                        totalWidth += width;
                    }
                });
                var headerTable = $(".datagrid-header-inner table:first-child");
                var bodyTable = $(".datagrid-body table:first-child");
                //循环完毕即能得到总得宽度设置到头部table和数据主体table中
                headerTable.width(totalWidth);
                bodyTable.width(totalWidth);
                bodyTds.each(function (i, obj) {
                    var headerTd = $(headerTds.get(i));
                    var bodyTd = $(bodyTds.get(i));
                    var headerTdWidth = headerTd.width();
                    bodyTd.width(headerTdWidth);
                });
            }
        });
        $("#test").datagrid('getPager').pagination({
            showPageList: false,
            showRefresh: false,
            beforePageText: "第",
            afterPageText: "页 <a href='javascript:void(0)' onclick='GoEnterPage()'><img src='http://www.cnblogs.com/Content/themes/icons/Go_.gif'></a>,共{pages}页",
            displayMsg: '当前{from}到{to}条,总共{total}条'
        });
    });
    function GoEnterPage() {
        var e = jQuery.Event("keydown");
        e.keyCode = 13;
        $("input.pagination-num").trigger(e);
    }
// ]]></script>

设置宽度的相关代码都已经打上注释了。测试了下 可行。无图无真相 附上效果图:

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏