I've been reading Angularjs for some time and I feel like a good frame and I want to have a chance to try to do something with it.
jquery Ztree is a very good jquery plug-in, full-featured, documents and APIs are also very friendly, before the project on the common use of this plugin.
The Angularjs feature is very powerful, but the UI provides plug-ins that are not as many as jquery, and can only be defined through directive UI Plug-ins, although some of the directive based tree functionality is available abroad, but not as powerful as Ztree , and tree is a basic function that is used for a long time in the project.
So it took a little time to do an example of applying ztree to Angularjs.
Ztree and background data interaction
first, it's definitely about introducing ANGULARJS-related scripts in the page, such as modules (e.g. app.js), controllers (e.g. controller.js), Angularjs scripts, and the use of related tags. Then introduce Ztree's style pack and Ztreed script to see the code:
<!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>
The Adds instruction tree to the UL tag above, so that in loading Angularjs, the menu data can be obtained through the instruction tree. The specific code can refer to the following code:
var app = angular.module('app', []);
//Tree structure
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) {/ / processing when clicking the menu
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
window.location.href=treeNode.url;
Return true;
}
}
}
}
//Send a message to the controller to obtain the menu data
$scope. $emit ("menu", attrs ["value"]; / / where attrs ["value"] is the value value in UL, which is used as a tag here
//Accept the message of the menu returned by the controller
$scope.$on("menuData",function(event,data){
$. FN. Ztree. Init (element, setting, data); / / initialize the tree menu
var zTree = $.fn.zTree.getZTreeObj("tree");
var selectName = $("#selectName").val();
if(typeof selectName == "undefined" || selectName == ""){
Ztree. Selectnode (ztree. Getnodebyparam ("Id", "1")); / / the first one is selected by default
$("#selectname"). Val (ztree. Getselectednodes() [0]. Code); / / assign a value
}else{
for(var i =0; i<data.length;i++){
if(data[i]["code"] == selectName ){
zTree.selectNode(zTree.getNodeByParam("code", data[i]["code"]));
}
}
}
};
}
}
};
In the above code, use $scope. $emit ("menu", attrs["value"), send the request data to the parent controller, accept the message in the controller code, and use $http to request the data in the background. and sends the data requested from the database to the child controller. The controller's code can be referenced as follows:
function Wtconfiginfo ($scope, $http) {
//Accept the message $scope sent by the child controller
. $on ("menu", function (event,params) {
$ Http.get ("/commonfuncode"). Success (function (data) {
//Send message to Child controller
$scope. $broadcast ("Menudata", Dealmenudata (Data,params));});
This completes the interaction of Ztree and background data.
An example of using instruction to integrate Ztree
<!doctype 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: "ordinary parent node", t: "I'm ordinary, just click me", open: true},
{ID: 11, PID: 1, name: "leaf node - 1", t: "I'm very ordinary, just click me"},
{ID: 12, PID: 1, name: "leaf node - 2", t: "I'm very ordinary, just click me"},
{ID: 13, PID: 1, name: "leaf node - 3", t: "I'm very ordinary, just click me"},
{ID: 2, PID: 0, name: "NB's parent node", t: "click me, but not my child node. Have the ability to click one. Would you like to have a try? ", open: true },
{ID: 21, PID: 2, name: "leaf node 2 - 1", t: "which unit do you have? Dare to order me? Be careful.. ", click: false},
{ID: 22, PID: 2, name: "leaf node 2 - 2", t: "I am covered by my father. Click my caution..", click: false},
{ID: 23, PID: 2, name: "leaf node 2 - 3", t: "I'm a leader anyway. Don't ordinary people just click on me..", click: false},
{ID: 3, PID: 0, name: "depressed parent node", t: "don't click me, I'm afraid... My child node, please click...", open: true, click: false},
{ID: 31, PID: 3, name: "leaf node 3 - 1", t: "Oh, please click me"},
{ID: 32, PID: 3, name: "leaf node 3 - 2", t: "Oh, please click me"},
{ID: 33, PID: 3, name: "leaf node 3 - 3", t: "Oh, please click me"}
];
$.fn.zTree.init(element, setting, zNodes);
}
}
};
appModule.controller('MyController', function ($scope) {
};
Implementation function: Define the tree this attribute, so that the <ul trees class= "Ztree" ng-model= "Selectnode" ></ul> automatically into a data, click the node, automatically change model of Selectnode.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
