easy-ui高度设置,在浏览器窗口改变时,自适应设置。

/**
* JQuery扩展方法,用户对JQuery EasyUI的DataGrid控件进行操作。
*/
$.fn.extend({
    /**
    * 修改DataGrid对象的默认大小,以适应页面宽度。
    * 
    * @param heightMargin
    *            高度对页内边距的距离。
    * @param widthMargin
    *            宽度对页内边距的距离。
    * @param minHeight
    *            最小高度。
    * @param minWidth
    *            最小宽度。
    * 
    */
    resizeDataGrid: function (heightMargin, widthMargin, minHeight, minWidth) {
        var height = $(window).height() - heightMargin;
        var width = $(window).width() - widthMargin;

        height = height < minHeight ? minHeight : height;
        width = width < minWidth ? minWidth : width;

        $(this).datagrid('resize', {
            height: height,
            width: width
        });
    }
});
 $(document).ready(function () {
            //newSetDivHeight("tabList");
            // 第一次加载时自动变化大小
            $('#tabList').resizeDataGrid(100,100, 300, 600);

            // 当窗口大小发生变化时,调整DataGrid的大小
            $(window).resize(function () {
                $('#tabList').resizeDataGrid(100, 100, 300, 600);
            });
        });
<table id="tabList" class="easyui-datagrid" style="width:900px;" pagination="false" rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr>
            <th data-options="field:'sCustomerName',width:80,align:'center'">客户姓名</th>
            <th data-options="field:'sMoblie',width:100,align:'center'">手机号码</th>


最后修改:2013 年 12 月 20 日
如果觉得我的文章对你有用,请随意赞赏