Easyui实用视频教程系列---Tree点击打开tab页面

Easyui实用视频教程系列---Tree点击打开tab页面

首先 我们 要搭建环境 easyui 环境

然后 把tree 给创建出来

在某个位置 粘贴 下面代码

<ul id="tt"></ul> 

然后 通过 js代码 把树给渲染出来 js代码如下

  <script type="text/javascript">

        $(document).ready(function () {

            $('#tt').tree({

                url: './admin/loadTree'

            }); 

        });

    </script>

然后 在controller 里面 加载 tree的json 字符串 返回 给js方法

  public ActionResult LoadTree()
        {
            string treeJson = BuildTree();
            return Content(treeJson);
        }

        private string BuildTree()
        {
            //把tree的json格式代码 创建出来
            return @"[{
    ""id"":1,
    ""text"":""Folder1"",
    ""iconCls"":""icon-save"",
    ""children"":[{
        ""text"":""File1"",
        ""checked"":true
    },{
        ""text"":""Books"",
        ""state"":""open"",
        ""attributes"":{
            ""url"":""/demo/book/abc"",
            ""price"":100
        },
        ""children"":[{
            ""text"":""PhotoShop"",
            ""checked"":true
        },{
            ""id"": 8,
            ""text"":""Sub Bookds"",
            ""state"":""closed""
        }]
    }]
},{
    ""text"":""Languages"",
    ""state"":""closed"",
    ""children"":[{
        ""text"":""Java""
    },{
        ""text"":""C#""
    }]
}]
";
        }

然后 我们 就能够 点击的时候 获取 url了

下一步 动态 创建 tab

将布局的中间部分 作为 tab的容器

region:'center

    <div  id="tb" class="easyui-tabs" data-options="region:'center'" style="background:#eee;">

            <div title="首页" style="padding:20px;display:none;">
                tab1
            </div>    

    </div>  

 <script type="text/javascript">
        $(document).ready(function () {
            $('#tt').tree({
                url: './admin/loadTree'
            });

            $('#tt').tree({
                onClick: function (node) {
                    //alert(node.attributes.url);  // alert node text property when clicked
                    // add a new tab panel
                    $('#tb').tabs('add', {
                        title:  node.text,
                        href: node.attributes.url,
                        closable: true

                    });  

                }
            });
        });

    </script>

视频下载http://pan.baidu.com/share/link?shareid=2301359500&uk=3576826227

需要源码