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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM