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

需要源碼