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

需要源码