Easyui 讓DataGrid適應瀏覽器寬度

DataGrid有100%寬度的設置，但是有時不是很讓人滿意，比如你你放大或者拉放你的瀏覽器，那么DataGrid只維持第一次加載的寬高，非常難看

 $('#List').datagrid({
            url: '/SysSample/GetList',
            width: $(window).width() - 10,
            methord: 'post',
            height: $(window).height() - 35,
            fitColumns: true,
.................................

你看到$(window).width() - 10和$(window).height() - 35

這是我設置的頁面第一次載入，去后去窗體的寬度和高度進行計算，那么在第一次載入顯示是正常的，但是放大或者拉伸瀏覽器,datagrid將不做改變了，我們這是要用到一個jquery的方法，叫resize()

 

參數

 

fnFunctionV1.0

在每一個匹配元素的resize事件中綁定的處理函數。

[data],fnString,FunctionV1.4.3

data:resize([Data], fn) 可傳入data供函數fn處理。

fn:在每一個匹配元素的resize事件中綁定的處理函數。

看到瀏覽器變化時候激發的事件，所以我們要加入:

!--自動DataGrid 從第一次加載與重置窗體大小時候發生的事件:分部視圖-->
<script type="text/javascript">
    $(function () {
        $(window).resize(function () {
            $('#List').datagrid('resize', {
                width: $(window).width() - 10,
                height: $(window).height() - 35
            }).datagrid('resize', {
                width: $(window).width() - 10,
                height: $(window).height() - 35
            });
        });
        
    });
</script>

好了，我們來做一個對比（第一載入的時候）

縮小瀏覽器的時候

完美顯示