如何使用easyui里面的table列宽按照百分比来显示
如何使用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的宽度了。