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