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
需要源码