easyui 框架Layout插件

時間 2019-11-06

標籤 easyui 框架 layout 插件简体版

原文原文鏈接

1:引入的css:
css

2:引入的js:jquery

3:html文件url

<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代碼code

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

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。