easyui在选项卡中打开树形菜单

3/8/2017来源:ASP.NET技巧人气:2503

效果如下

代码如下

<html>
    <head>
        <title>easyui</title>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
          
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/Javascript" src="easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
          
        <link rel="stylesheet" href="easyui/themes/default/easyui.CSS" type="text/css"></link>
        <link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
          
        <script type="text/javascript">
            var data = [
                {
                "id" : 1,
                "text" : "menu demo 1",
                "children" : [
                    {
                    "id" : 11,
                    "text" : "menu demo 1 1",
                    "url" : "/menu/demo/1/1"
                    },
                    {
                    "id" : 12,
                    "text" : "menu demo 1 2",
                    "url" : "/menu/demo/1/2"
                    }
                    ]
                },
                {
                "id" : 2,
                "text" : "menu demo 2",
                "children" : [
                    {
                    "id" : 21,
                    "text" : "menu demo 2 1",
                    "url" : "/menu/demo/2/1",
                    "children" : [
                        {
                            "id" : 211,
                            "text" : "menu demo 2 1 1",
                            "url" : "/menu/demo/2/1/1"
                        }
                    ]
                    }
                    ]
                }
            ];
            function show () {
                for (var i = 0; i < data.length; i ++) {
                    //添加分类
                    $("#menu").accordion('add', {
                        id : data[i].id,
                        title : data[i].text,
                        selected : false
                    });
                    //在分类中添加目录
                    $('<div></div>').tree({
                        data : data[i].children,
                        onClick : function(node) {
                            tab(node);
                        }
                    }).appendTo("#" + data[i].id);
                }
            }
            function tab(node) {
                var tabs = $('#tabs');
                //如果选项卡已经打开
                if (tabs.tabs('exists', node.text)) {
                    tabs.tabs('select', node.text);
                    return;
                }
                //如果节点的url为空,不打开新选项卡
                if (node.url == null || node.url == '') return;
                //添加新选项卡
                tabs.tabs('add', {
                    id : node.id,
                    title : node.text,
                    href : node.url,
                    closable : true
                });
            }
        </script>
    </head>
    <body class="easyui-layout" onload="show();">
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
        <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
        <div data-options="region:'west',title:'West',split:true" style="width:200px;">
            <div id="menu" data-options="fit:true,border:false" class="easyui-accordion"></div>
        </div>
        <div data-options="region:'center',title:'center title'">
            <div id="tabs" data-options="fit:true,border:false" class="easyui-tabs">
                <div title="welcome">welcome</div>
            </div>
        </div>
        </div>
    </body>
</html>