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 });
}