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

本文介绍了一个楼栋管理系统的操作流程,包括楼栋类型的筛选、备注状态的选择、查询操作及各种楼栋管理功能如批量移动、合并与批量备注等。通过详细解析系统界面元素与交互方式,帮助用户快速掌握该系统的使用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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="1" style="margin-left: 10px;"/>楼盘
                        <input type="radio" name="banPropertyType" value="2" style="margin-left: 10px;"/>城中村
                        <input type="radio" name="banPropertyType" value="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="2" style="margin-left: 5px;"/>无备注
                        <input type="radio" name="banPropertyHasRemark" value="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="查询" onclick="queryBanTreeList();" style="float: right;margin: 4px 10px;padding: 1px 6px;height: 22px;"/>
                        <div class="pagination-btn-separator" style="float: right;"></div>
                        <img src="/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="/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="/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="/oss-portlet/images/icons/batchMove_16.png" title="批量移动楼栋" onclick="openSelectPropertyWin();" class="operateImg">
                        <img src="/oss-portlet/images/icons/MergerBan_16.png" title="合并楼栋" onclick="openMergerBanWin();" class="operateImg">
                        <img src="/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="/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="/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");
        }
    });
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值