// 一、添加 ui-sref 属性
//default setting of core
_setting = {
treeId: "",
treeObj: null,
view: {
...
},
data: {
key: {
children: "children",
name: "name",
title: "",
url: "url",
uiSref:"ui-sref"
}
}
}
// 二、添加取 ui-sref 值, 方法
//method of operate data
data = {
getUiSelf:function(setting, node){
var t = setting.data.key.uiSref === "" ? setting.data.key.uiSref : setting.data.key.uiSref;
return "" + node[t];
},
}
// 在 data 里面添加获取 ui-sref 属性的值方法。
// 三、修改生成 <a/> 标签属性方法。
//method of operate ztree dom
view = {
makeDOMNodeNameBefore: function(html, setting, node) {
var title = data.getNodeTitle(setting, node),
url = view.makeNodeUrl(setting, node),
fontcss = view.makeNodeFontCss(setting, node),
fontStyle = [];
for (var f in fontcss) {
fontStyle.push(f, ":", fontcss[f], ";");
}
// begin ui-sref
var ui_sref = data.getUiSelf(setting,node);
if(""!=ui_sref && undefined!=ui_sref && null!=ui_sref && "undefined"!=ui_sref){
// 如果要使用 angular-ui-router 的 ui-sref 功能,则必须把 onclick 事件 和 href 删除。
html.push("<a id='", node.tId, consts.id.A,"' ui-sref='",ui_sref, "' class='", consts.className.LEVEL, node.level,"' treeNode", consts.id.A, "' style='", fontStyle.join(''),"'");
} else {
html.push("<a id='", node.tId, consts.id.A,"' class='", consts.className.LEVEL, node.level,"' treeNode", consts.id.A," οnclick=\"", (node.click || ''),
"\" ", ((url != null && url.length > 0) ? "href='" + url + "'" : ""), " target='",view.makeNodeTarget(node),"' style='", fontStyle.join(''),
"'");
}
// end ui-sref
if (tools.apply(setting.view.showTitle, [setting.treeId, node], setting.view.showTitle) && title) {html.push("title='", title.replace(/'/g,"'").replace(/</g,'<').replace(/>/g,'>'),"'");}
html.push(">");
},
}
// 四、初始化 ztree
$j().ready(function(){
var setting = { };
var zNodes =[
{ name:"主菜单", open:true,
children: [
{ name:"菜单1", open:true,
children: [
{ name:"用户","ui-sref":"user"},
{ name:"权限","ui-sref":"permission"},
{ name:"菜单","ui-sref":"menu"},
{ name:"其它","ui-sref":"other"}
]},
{ name:"菜单2",
children: [
{ name:"用户"},
{ name:"权限"},
{ name:"菜单"},
{ name:"其它"}
]},
{ name:"菜单3", isParent:true}
]}
];
$j.fn.zTree.init($j("#treeDemo"), setting, zNodes);
});
// 五、html 代码。
<div>
<a id="treeDemo" ui-sref="home" class="ztree"></a>
</div>
// 六、angular js 代码。
myApp.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
console.log(web_root);
$stateProvider
.state('user', {
url: '/user',
templateUrl: web_root+'/views/user.html'
}).state('permission', {
url: '/permission',
templateUrl: web_root+'/views/permission.html'
}).state('menu', {
url: '/menu',
//template: '<h1>Hello {{ name }}</h1>'
templateUrl: web_root+'/views/menu.html'
}).state('other', {
url: '/other',
templateUrl: web_root+'/views/other.html'
});
$urlRouterProvider.otherwise("user");
}
]);