改造 ztree 以便于兼容 Angular ui-router 的 ui-sref 功能

标签：

// 一、添加 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," onclick=\"", (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");
        }
    ]);

改造 ztree 以便于兼容 Angular ui-router 的 ui-sref 功能

标签：

原文地址：http://blog.csdn.net/cjc921/article/details/42644081