首页 > 代码库 > easyui-datagrid高度放大或缩小动态设置分页參数
easyui-datagrid高度放大或缩小动态设置分页參数
<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高度放大或缩小动态设置分页參数