如何使用easyui里面的table列宽按照百分比来显示

最新推荐文章于 2020-03-27 16:51:42 发布

weixin_38168322

最新推荐文章于 2020-03-27 16:51:42 发布

阅读量532

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/masha2017/p/11534829.html

版权

如何使用easyui里面的table列宽按照百分比来显示。

直接贴代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Validate Password - jQuery EasyUI Demo</title>
    <link href="~/Resources/easyUI/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Resources/easyUI/themes/icon.css" rel="stylesheet" />
    <script src="~/Resources/easyUI/jquery.min.js"></script>
    <script src="~/Resources/easyUI/jquery.easyui.min.js"></script>
    <style type="text/css">
        html, body {
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <div style="width:90%;height:90%;" id="div">
        <table id="dg" class="easyui-datagrid" title="产品信息"
               data-options="singleSelect:true,url:'/Resources/easyUI/products.json',method:'get',pagination:true,fit:true">
            <thead>
                <tr>
                    <th data-options="field:'productid',width:fixWidth(20)">产品ID</th>
                    <th data-options="field:'productname',width:fixWidth(40)">产品名称</th>
                    <th data-options="field:'productdesc',width:fixWidth(40)">产品描述</th>
                </tr>
            </thead>
        </table>
    </div>
    <button>查询</button>
    <script type="text/javascript">function fixWidth(percent) {
            return $("#div").width() * percent / 100; //这里你可以自己做调整  
        }
    </script>
</body>
</html>

主要有两个点：

1、要设置 fit:true 。这个属性的意思是填充整个父空间，即即使给table设置了宽度width和高度height，也是没用的。如上代码所示，整个table的大小实际上是id为div的div的大小，所以，需要设置div的大小。

2、使用方法 fixWidth(),方法就是获取div的大小（实际也是获取table的大小），然后通过运算返回百分比的大小。这样就能设置按照百分比来设置宽度了。

这个时候可能就有一个疑问了，为什么不直接获取table的宽度呢？我试了一下，好像获取的宽度并不准确。所以就通过获取div的宽度了。

转载于:https://www.cnblogs.com/masha2017/p/11534829.html

weixin_38168322

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用easyui里面的table列宽按照百分比来显示

如何使用easyui里面的table列宽按照百分比来显示。直接贴代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Validate Password - jQuery EasyUI Demo</title>...
复制链接

扫一扫