EasyUI 的动态布局答案

【问题标题】：Dynamic Layout for EasyUIEasyUI 的动态布局
【发布时间】：2015-02-27 15:01:37
【问题描述】：

使用 jQuery 和 EasyUI，我想知道如何动态创建布局。以下是我的尝试；但是似乎不起作用：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CTest Site</title>
        <link rel="stylesheet" type="text/css" href="app/lib/jquery-easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="app/lib/jquery-easyui/themes/icon.css">                
        <script data-main="app/app" src="app/lib/require-js/require.js"></script>
    </head> 
    <body></body>
</html>

我的 app.js

requirejs.config({
    "baseUrl": "app/lib",
    "paths": {
      "app": "/app",
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min",
      "easyui": "jquery-easyui/jquery.easyui.min"
    }
});
define(["jquery"], function($){ 
    require(["easyui"],function(){
        require(["app/views/viewport"],function(){
        });
    });
});

我的 viewport.js

//Layout the page
$('body').addClass("easyui-layout");
$('body').append("<div id='spa-head' data-options=\"region:'north'\"></div>");
$('body').append("<div id='spa-west' data-options=\"region:'west',width:300,split:true\"></div>");
$('body').append("<div id='spa-cntr' data-options=\"region:'center',title:'CENTER'\"></div>");

该页面应该已经呈现了一个包含北部、西部和中心区域的布局。中心面板将具有标题，而西部面板将具有可调整大小的拆分器。相反，即使我可以看到控制台中呈现了正确的元素，页面也是空白的。

【问题讨论】：

欢迎堆栈溢出！如果您可以在“它似乎不起作用”中添加更多内容，那将会很有帮助 - 与您期望它做的相比，它是如何失败的/它做了什么？
问候和感谢。该页面应该已经呈现了一个包含北部、西部和中心区域的布局。中心面板将具有标题，而西部面板将具有可调整大小的拆分器。相反，即使我可以在控制台中看到正确的元素，该页面也是银行。
优秀。 Press the edit button 在您的帖子下并将该信息添加到问题中。不幸的是，我不是 EasyUI 专家，所以不确定我是否能真正为你解决问题，但可能有人会来。它只是来给我审查（所有第一篇文章都交给具有> 2k代表的用户进行审查）。

标签： jquery jquery-easyui

【解决方案1】：

将文档布局初始化为，

 $('body').layout();

【讨论】：