Easyui實(shí)用視頻教程系列---Tree點(diǎn)擊打開(kāi)tab頁(yè)面首先 我們 要搭建環(huán)境 easyui 環(huán)境然后 把tree 給創(chuàng)建出來(lái)在某個(gè)位置 粘貼 下面代碼

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

然后 通過(guò) js代碼 把樹給渲染出來(lái) 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格式代碼 創(chuàng)建出來(lái)            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#""       }]   }]  ";        }

然后 我們 就能夠 點(diǎn)擊的時(shí)候 獲取 url了

下一步 動(dòng)態(tài) 創(chuàng)建 tab將布局的中間部分 作為 tab的容器region:'center

    <div  id="tb" class="easyui-tabs" data-options="region:'center'" style="background:#eee;">                 <div title="首頁(yè)" 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

需要源碼