如何使用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的寬度了。