在AngularJS中使用jQuery的zTree插件的方法


Posted in Javascript onApril 21, 2016

前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么。
jQuery ZTree是国内非常不错的JQuery插件,功能齐全,文档和API也非常的友好,之前项目上常用此插件。
AngularJS 功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于 directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能。
因此,花了一点时间做了一个例子将ZTree应用到AngularJS中。

zTree和后台数据的交互
首先,肯定是在页面中引入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和后台数据的交互。

利用指令集成ZTree的实例

<!doctype html> 
<html lang="en" ng-app="app"> 
<head> 
 <meta charset="utf-8"> 
 <title>ZTree</title> 
 <link rel="stylesheet" href="css/app.css"> 
 <link rel="stylesheet" href="css/bootstrap.css"> 
 <link rel="stylesheet" href="css/animations.css"> 
 <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css"> 
   
 <script src="lib/jquery-1.10.2.min.js"></script> 
 <script src="lib/jquery.ztree.all-3.5.js"></script> 
 <script src="lib/angular.min.js"></script> 
 <script src="app.js"></script> 
</head> 
<body> 
 
  <body ng-controller='MyController'> 
    <ul tree class="ztree" ng-model="selectNode"></ul> 
  </body> 
  <pre> 
    {{selectNode | json}} 
  </pre> 
 
</body> 
</html>

 app.js

'use strict'; 
 
/* App Module */ 
var appModule = angular.module('app', []); 
appModule.directive('tree', function () { 
  return { 
    require: '?ngModel', 
    restrict: 'A', 
    link: function ($scope, element, attrs, ngModel) { 
      //var opts = angular.extend({}, $scope.$eval(attrs.nlUploadify)); 
      var setting = { 
        data: { 
          key: { 
            title: "t" 
          }, 
          simpleData: { 
            enable: true 
          } 
        }, 
        callback: { 
          onClick: function (event, treeId, treeNode, clickFlag) { 
            $scope.$apply(function () { 
              ngModel.$setViewValue(treeNode); 
            }); 
          } 
        } 
      }; 
 
      var zNodes = [ 
        { id: 1, pId: 0, name: "普通的父节点", t: "我很普通,随便点我吧", open: true }, 
        { id: 11, pId: 1, name: "叶子节点 - 1", t: "我很普通,随便点我吧" }, 
        { id: 12, pId: 1, name: "叶子节点 - 2", t: "我很普通,随便点我吧" }, 
        { id: 13, pId: 1, name: "叶子节点 - 3", t: "我很普通,随便点我吧" }, 
        { id: 2, pId: 0, name: "NB的父节点", t: "点我可以,但是不能点我的子节点,有本事点一个你试试看?", open: true }, 
        { id: 21, pId: 2, name: "叶子节点2 - 1", t: "你哪个单位的?敢随便点我?小心点儿..", click: false }, 
        { id: 22, pId: 2, name: "叶子节点2 - 2", t: "我有老爸罩着呢,点击我的小心点儿..", click: false }, 
        { id: 23, pId: 2, name: "叶子节点2 - 3", t: "好歹我也是个领导,别普通群众就来点击我..", click: false }, 
        { id: 3, pId: 0, name: "郁闷的父节点", t: "别点我,我好害怕...我的子节点随便点吧...", open: true, click: false }, 
        { id: 31, pId: 3, name: "叶子节点3 - 1", t: "唉,随便点我吧" }, 
        { id: 32, pId: 3, name: "叶子节点3 - 2", t: "唉,随便点我吧" }, 
        { id: 33, pId: 3, name: "叶子节点3 - 3", t: "唉,随便点我吧" } 
      ]; 
      $.fn.zTree.init(element, setting, zNodes); 
    } 
  }; 
}); 
appModule.controller('MyController', function ($scope) {   
});

实现功能:定义tree这个属性,使<ul tree class="ztree" ng-model="selectNode"></ul>自动变成一个有数据的tree,点击树节点,自动变更model 的selectNode。

在AngularJS中使用jQuery的zTree插件的方法

Javascript 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 #Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 #Javascript
javascript常见数字进制转换实例分析
Apr 21 #Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 #Javascript
动态加载js文件简单示例
Apr 21 #Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 #Javascript
jQuery插件datatables使用教程
Apr 21 #Javascript
You might like
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
PHP运行模式的深入理解
2013/06/03 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
python网络编程学习笔记(四):域名系统
2014/06/09 Python
基于python的字节编译详解
2017/09/20 Python
用Python实现读写锁的示例代码
2018/11/05 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
linux面试相关问题
2012/08/11 面试题
个人简历的自荐信
2013/10/23 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
义卖募捐活动总结
2015/05/09 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB