改造 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");
        }
    ]);
				
时间: 2024-08-02 15:32:12

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

angular : $location &amp; $state(UI router)的关系

次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, oldUrl) { log("$locationChangeStart from " + oldUrl) log("$locationChangeStart to " + newUrl) }); 接着是 ui router $state $rootScope.$on(&q

angular 的ui.router 定义不同的state 对应相同的url

Angular UI Router: Different states with same URL? The landing page of my app has two states: home-public, home-logged-in. Now I want to show both states on the same URL, but let the controller and template depend on the user session (is the user log

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi

ngRoute 和 ui.router 的使用方法和区别

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比. ngRoute 使用方法 1) 引入 angular-route lib 无论是 ngRoute 还是 ui.router ,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入. 1 <script src="lib/angular-route.js"></sc

Angularjs中UI Router用法小记录

今天自己参考已有的项目代码学习了下UI Router的用法,写了个小demo,验证了下自己的想法,现把使用情况记录一下. 1.入口文件index.html,引入项目所需的js文件,标注ng-app,创建ui-view元素,为后面的嵌套做容器准备. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8">

[转]AngularJS 使用 UI Router 实现表单向导

本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单.这项技术可以用在你想要简化用户操作的大表单上. 我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Rout

[Angular2 Router] Configure Auxiliary Routes in the Angular 2 Router - What is the Difference Towards a Primary Route?

In this tutorial we are going to learn how we can can configure redirects in the angular 2 router configuration. We are also going to see again another example on how the order of the configuration might trip us. We are going to see the different bet

[Angular 2 Router] Configure Your First Angular 2 Route

Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and then importing the configured RouterModule into your main App Module. Use the Wiki Search as example project. Create a HomeComponent to contain every

angular当router使用userhash:false时路由404问题

angular当router使用userhash:false时路由404问题 安装iis urlrewrite2.0组件 在根目录下创建 Web.config <configuration> <system.webServer> <rewrite> <rules> <rule name="AngularJS Routes" stopProcessing="true"> <match url="