easyui 框架Layout插件

1:引入的css:

2:引入的js:

3:html文件

<body class="easyui-layout">
	<div data-options="region:'north'" style="height: 60px; background: #B3DFDA; padding: 10px">商品中心</div>
<div data-options="region:'west',split:false,title:'导航'" style="width: 220px; padding: 10px;">
	<ul id="menuTree" class="easyui-tree" data-options="url:'${rc.contextPath}/getMenuTree.html'">
	</ul>
</div>
<div id="tt" class="easyui-tabs" data-options="region:'center',border:false">
	<div title="Home">欢迎使用商品管理系统</div>
</div>
</body>

4：js代码

<script>
    $(function() {
        $("#menuTree").tree({
            onClick: function(node) {
                var url = node.url;
                var title = node.text;
                addTab(title, url);
            }
        });
    });
    function addTab(title, url) {
        if ($('#tt').tabs('exists', title)) {
            $('#tt').tabs('select', title);
        } else {
            var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
            $('#tt').tabs('add', {
                title: title,
                href: url,
                //content:content,
                closable: true
            });
        }
    }
</script>

5：后台请求菜单的Java代码：

@RequestMapping("getMenuTree")
	@ResponseBody
	public List<MenuItem> getMenuTree() {
		List<MenuItem> menuItems = new ArrayList<MenuItem>();
		MenuItem menuItem = new MenuItem("分类管理", WebUtil.buildRelativeUrl("category/index.html"));
		menuItems.add(menuItem);
		menuItem = new MenuItem("品牌管理", WebUtil.buildRelativeUrl("brand/index.html"));
		menuItems.add(menuItem);
		menuItem = new MenuItem("制造商管理", WebUtil.buildRelativeUrl("manufacture/index.html"));
		menuItems.add(menuItem);

		menuItem = new MenuItem("商家管理", WebUtil.buildRelativeUrl("merchant/index.html"));
		menuItems.add(menuItem);

		menuItem = new MenuItem("属性管理", WebUtil.buildRelativeUrl("property/index.html"));
		menuItems.add(menuItem);

		return menuItems;
	}

6：java model

package com.xf9.gms.model;

import java.util.List;

public class MenuItem {

	private String text;
	private String url;
	private List<MenuItem> children;

	public MenuItem(String text, String url) {
		this.setUrl(url);
		this.setText(text);
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public List<MenuItem> getChildren() {
		return children;
	}

	public void setChildren(List<MenuItem> children) {
		this.children = children;
	}

}

来源：oschina

链接：https://my.oschina.net/u/2405705/blog/530773

标签

easyui

框架Layout插件