html:
<div class="easyui-layout" data-options="fit:true,border:false" style="background: #ccc;display:none" id="dorLayout">
<div data-options="region:'west',split:true,border:false" style="width: 240px;border-right:1px solid #95B8E7;">
<ul id="mnuDorStruct"></ul>
</div>
<div id="formContent" data-options="region:'center',split:true,title:'编辑宿舍结构',border:false" style="width: 240px; border-left:1px solid #95B8E7;">
<div class="easyui-panel" id="divStructCenter" data-options="border:0">
@{Html.RenderPartial("add");}
</div>
</div>
</div>
这个页面加载时样式会乱一下,然后才会好起来,采用了先隐藏再显示的笨方法,加载完了再显示
$(document).ready(function () {
divStructCenter = $('#divStructCenter')
dorTree = $('#mnuDorStruct');
dorLayout = $('#dorLayout');
//让layout正常显示
showLayout(dorLayout, 'west', 240);
///刷新工作区的大小,以避免layout在延迟加载后内部元素宽度为0
resizeWorkArea(dorLayout, divStructCenter);
dorTree.tree({
url: listurl,
onSelect: function (node) {
if (node.state == 'closed') {
dorTree.tree('expand', node.target);
node.state = 'open';
}
else {
dorTree.tree('collapse', node.target);
node.state = 'closed';
}
},
onClick: function (node) {
if (node.tag != "") {
view(node.id);
}
}
});
});
其中showLayout和resizeWorkArea方法是为了解决细节问题,即左侧树和工作区的正常显示,不加的话整个界面会乱七八糟。
//让layout正常显示
function showLayout(layout, region, width) {
layout.css('display', 'block');//防止界面加载时变样
//不加此句,会导致west面板不在layout内
layout.layout('add', {
width: width,
region: region
});
}
///刷新工作区的大小,以避免layout在延迟加载后内部元素宽度为0
function resizeWorkArea(parentLayout, workPanel) {
var pp = parentLayout.layout('panel', 'center');
workPanel.panel('resize', { width: pp.clientWidth, height: pp.clientHeight });
}