首页 > 代码库 > easyui-datagrid高度放大或缩小动态设置分页參数

easyui-datagrid高度放大或缩小动态设置分页參数

<div class="map_leftInfo" style="height: 745px;width:320px;border: 1px solid #dfdfdf;">
        <div style="margin:2px 5px auto 2px;height:100%;">
            <div id="queryCondition" style="border-bottom: 1px solid #D9E2E9;">
                <dl style="width:100%;margin: 2px;">
                    <dd style="margin: 9px auto;">
                        <strong>类型:</strong>
                        <input type="radio" name="banPropertyType" value="" checked="checked"/>不限
                        <input type="radio" name="banPropertyType" value="http://www.mamicode.com/1" style="margin-left: 10px;"/>楼盘
                        <input type="radio" name="banPropertyType" value="http://www.mamicode.com/2" style="margin-left: 10px;"/>城中村
                        <input type="radio" name="banPropertyType" value="http://www.mamicode.com/3" style="margin-left: 10px;"/>其它
                    </dd>
                    <dd style="margin: 9px auto;">
                        <strong>备注:</strong>
                        <input type="radio" name="banPropertyHasRemark" value="" checked="checked"/>不限
                        <input type="radio" name="banPropertyHasRemark" value="http://www.mamicode.com/2" style="margin-left: 5px;"/>无备注
                        <input type="radio" name="banPropertyHasRemark" value="http://www.mamicode.com/1" style="margin-left: 5px;"/>有备注
                    </dd>
                </dl>
            </div>
            
            <div style="width:100%;">
                <div style="width:100%;height:30px;border-bottom: 1px solid #dddddd;background: #F4F4F4;">
                    <div style="width:100%;height:100%;">
                        <input type="button" value="http://www.mamicode.com/查询" onclick="queryBanTreeList();" style="float: right;margin: 4px 10px;padding: 1px 6px;height: 22px;"/>
                        <div class="pagination-btn-separator" style="float: right;"></div>
                        <img src="http://www.mamicode.com/oss-portlet/images/icons/arrow_up.png" class="showCondition" title="收缩查询条件" style="float: right;margin: 7px auto;cursor: pointer;">
                        <div class="pagination-btn-separator" style="float: right;"></div>
                        <img src="http://www.mamicode.com/oss-portlet/images/icons/arrow_in.png" title="所有收缩" onclick="javascript:$(‘#banTreeList‘).treegrid(‘collapseAll‘);" style="float: right;margin: 7px 10px 7px auto;cursor: pointer;">
                        <img src="http://www.mamicode.com/oss-portlet/images/icons/arrow_out.png" title="所有展开" onclick="javascript:$(‘#banTreeList‘).treegrid(‘expandAll‘);" style="float: right;margin: 7px 10px 7px auto;cursor: pointer;">
                        <img src="http://www.mamicode.com/oss-portlet/images/icons/batchMove_16.png" title="批量移动楼栋" onclick="openSelectPropertyWin();" class="operateImg">
                        <img src="http://www.mamicode.com/oss-portlet/images/icons/MergerBan_16.png" title="合并楼栋" onclick="openMergerBanWin();" class="operateImg">
                        <img src="http://www.mamicode.com/oss-portlet/images/icons/batchRemark_16.png" title="批量备注楼栋" onclick="openBatchRemarkBanWin();" class="operateImg">
                    </div>
                </div>
                <div style="width:100%;">
                    <table id="banTreeList"></table>
                </div>
            </div>
            
        </div>

    </div>


$(document).ready(function() {
    expandOrShrink();
});



/**
 * 展开和伸缩时resize列表
 */
function expandOrShrink(){
    $(".showCondition").click(function (e) {
        if($("#queryCondition").is(":hidden")){
            $("#queryCondition").show("normal",function(){

                // 设置grid大小
                $("#banTreeList").treegrid(‘resize‘,{height:$(this).parents(".map_leftInfo").height() - $("#queryCondition").height() - 36});
            });
            e.target.src="http://www.mamicode.com/oss-portlet/images/icons/arrow_up.png";
            e.target.title = ‘收缩查询条件‘;

               // 设置grid分页组件分页大小
            $("#banTreeList").treegrid("getPager").data("pagination").options.pageSize = 10;
            $("#banTreeList").treegrid("getPager").pagination(‘refresh‘);

               // 设置grid分页大小
            banTreeList.data().treegrid.options.pageSize = 10;
            $("#banTreeList").treegrid("reload");
        }else{
            $("#queryCondition").hide("normal",function(){
                $("#banTreeList").treegrid(‘resize‘,{height:$(this).parents(".map_leftInfo").height() - 54});
            });
            e.target.src="http://www.mamicode.com/oss-portlet/images/icons/arrow_down.png";
            e.target.title = ‘展开查询条件‘;
            $("#banTreeList").treegrid("getPager").data("pagination").options.pageSize = 24;
            $("#banTreeList").treegrid("getPager").pagination(‘refresh‘);
            banTreeList.data().treegrid.options.pageSize = 24;
            $("#banTreeList").treegrid("reload");
        }
    });
}

easyui-datagrid高度放大或缩小动态设置分页參数