一:前端
js
<script>
$(function () {
//处理树型菜单点击事件
$('#tt').tree({
url: '/Main/GetMenu',
onClick: function (node) {
addtab(node.text, node.attributes.url);
}
});
var addtab = function (title, url) {
if ($('#mytabs').tabs('exists', title)) {
$('#mytabs').tabs('select', title);
} else {
$('#mytabs').tabs('add', {
title: title,
closable: true,
content: createFrame(url),
//href: url,
});
}
}
function createFrame(url) {
var s = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>';
return s;
}
});
</script>
html
<body class="easyui-layout">
<div region="north" split="true" style="height:100px;">
welcome come to lm
</div>
<div data-options="region:'west',title:'West',split:true" style="width:150px;">
<ul id="tt" class="easyui-tree">
</ul>
</div>
<div data-options="region:'center'">
<div id="mytabs" class="easyui-tabs" fit="true" border="false">
</div>
</div>
</body>
二:后端
private List<TreeModel> ProcMenu(List<Permission_Functions> _pf)
{
List<TreeModel> litm = new List<TreeModel>();
var parent = _pf.Where(a=>a.ParentId == null);
foreach (var item in parent)
{
TreeModel mf = new TreeModel();
mf.id = item.Id.ToString();
mf.text = item.Name;
//子菜单
var clidren = _pf.Where(a => a.ParentId == item.Id);
List<TreeChildrenModel> li = new List<TreeChildrenModel>();
foreach (var citem in clidren)
{
TreeChildrenModel tcm = new TreeChildrenModel();
tcm.id = "";
tcm.text = citem.Name;
tcm.attributes = new Attributes() { url = citem.Url };
li.Add(tcm);
}
mf.children = li;
litm.Add(mf);
}
return litm;
}
public JsonResult GetMenu()
{
List<Permission_Functions> pf = ipd.GetAllPressionByUser("");
return Json(ProcMenu(pf));
}
注意:tabs 使用 href方式只会加载body部分如果页面的js没有在父页面引用就会出现问题,
href与content区别http://www.bhcode.net/article/20120327/22424.html
三:easy ui tree得到父级选择的节点
var nodes = $('#tt').tree('getChecked');//这样只能得到选择的父级得不到
var nodes = $('#tt').tree('getChecked', ['checked', 'indeterminate']);