zTree在Angular中的使用
来源:互联网 发布:网络司法拍卖佣金 编辑:程序博客网 时间:2024/06/06 19:27
最近项目中需要使用到树形菜单。考虑到zTree的效果不错,就决定使用zTree来进行开发,但是在开发中遇到一个问题是:这些菜单的名称等内容是从数据库中获取的。考虑到Angularjs的特性,决定使用zTree + Angularjs进行开发。
首先,肯定是在页面中引入Angularjs的相关脚本,例如模块(e.g. app.js)、控制器(e.g. controller.js)、Angularjs的脚本并进行相关标记的使用,然后引入zTree的样式包和zTreed 脚本,可以参看一下代码:
<!DOCTYPE html><html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>树型菜单</title> <link href="plugins/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="css/zTreeStyle.css" rel="stylesheet"> </head><% include ./../include/header.html %><% include ./../include/top-menu.html %> <div id="content" class="content clearfix" ng-controller="wtConfigInfo"> <ul tree id="tree" style="font:normal 12px/35px 'Arial';color:#dcdcdc;" class="ztree" ng-model="selectNode" value="1" > </div> <% include ./../include/footer.html %><script src="plugins/jquery-1.11.3.min.js" type="text/javascript"></script><script src="plugins/bootstrap-3.3.5/js/bootstrap.min.js" type="text/javascript"></script><script src="..//js/angular.min.js" type="text/javascript"></script><script src="..//js/angular/app.js" type="text/javascript"></script><script src="..//js/angular/controllers.js" type="text/javascript"></script><script src="../plugins/zTree/jquery.ztree.all-3.5.js" type="text/javascript"></script> </body></html>
在上面的在ul标签中添加了指令tree,这样在加载angularjs中,就可通过指令 tree来进行菜单数据的获取。具体的代码可参考以下代码:
var app = angular.module('app', []);//树形结构app.directive('tree',function(){ return{ require:'?ngModel', restrict:'A', link:function($scope,element,attrs,ngModel){ var setting = { data :{ simpleData:{ enable:true } }, callback:{ beforeClick:function(treeId, treeNode) {//点击菜单时进行的处理 var zTree = $.fn.zTree.getZTreeObj("tree"); if (treeNode.isParent) { zTree.expandNode(treeNode); return false; } else { window.location.href=treeNode.url; return true; } } } }; //向控制器发送消息,进行菜单数据的获取 $scope.$emit("menu",attrs["value"]);//此处attrs["value"]为ul中的value值,此处作为标记使用 //接受控制器返回的菜单的消息 $scope.$on("menuData",function(event,data){ $.fn.zTree.init(element, setting, data);//进行初始化树形菜单 var zTree = $.fn.zTree.getZTreeObj("tree"); var selectName = $("#selectName").val(); if(typeof selectName == "undefined" || selectName == ""){ zTree.selectNode(zTree.getNodeByParam("id","1"));//默认第一个选中 $("#selectName").val(zTree.getSelectedNodes()[0].code);//赋值 }else{ for(var i =0; i<data.length;i++){ if(data[i]["code"] == selectName ){ zTree.selectNode(zTree.getNodeByParam("code", data[i]["code"])); } } } }); } }});在上述代码中,使用$scope.$emit("menu",attrs["value"]);向父控制器发送请求数据,在控制器代码中可以接受此消息,并使用$http向后台进行数据的请求,并将从数据库中请求来的数据发送个子控制器。控制器的代码可参考如下:
function wtConfigInfo($scope,$http){//接受子控制器发送的消息$scope.$on("menu",function(event,params){$http.get("/commonfuncode").success(function(data){//发送消息给子控制器$scope.$broadcast("menuData",dealMenuData(data,params));});});}这样,就完成了zTree和后台数据的交互。
0 0
- zTree在Angular中的使用
- promise对象,以及其在Angular中的使用
- scss在angular+gulp中的使用(自己项目记录)
- ztree在实际项目中的运用
- zTree在JAVA项目中的学习
- 关于jquery中的zTree控件的使用
- 在dwz中使用ZTree 树形插件
- angular中的路由简单使用
- angular中的过滤使用浅析
- 在Angular中使用promise
- ztree 使用
- zTree使用
- zTree使用
- ztree 使用
- ztree使用
- zTree使用
- ztree使用
- 使用zTree实现导航树、angular实现数据动态绑定功能
- 《时间投资法》读书笔记
- 80386的寄存器组成(转)
- NOIP 2003 乒乓球
- 零基础学python-4.1 python对象的简介和标准类型
- LVS 工作模式以及工作原理
- zTree在Angular中的使用
- Uva 10534
- Cocos2d-x问题纪录:removeChild和附有PhysicsBody的csb动画
- HDOJ 2044 一只小蜜蜂... 【递推】
- 834 组队【排序】
- 瀑布流在Angularjs中的使用
- 【SPOJ QTREE】树链剖分模板
- POJ3761 Bubble Sort
- UVA10288 Coupons