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

需要源码