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

需要源码