Home > Developer > Web Develop
I've been looking at Angularjs for a while, and it feels like a good frame, and I want to have a chance to try and do something about it.
jquery Ztree is a very good jquery plugin in the country, full-featured, documentation and API is also very friendly, before the project used this plugin.
Although the Angularjs feature is very powerful, the plug-ins provided on the UI are not as large as jquery, and only the extended UI plug-in can be defined through directive, although some of the directive-based tree features have been implemented abroad, but not as powerful as Ztree , and tree is a basic function that is used for a long time in the project.
Therefore, it took a little time to do an example to apply Ztree to Angularjs.
Page code
<!doctype html>App.js
' Use strict ';/* App Module */var appmodule = angular.module (' app ', []); Appmodule.directive (' Tree ', function () {return {RE Quire: '? 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: "Normal parent node", T: "I am ordinary, casually point me", Open:true},{id:11, pid:1, Name: "Leaf node-1", T: "I am ordinary, Just a little bit of me. "},{id:12, Pid:1, Name:" Leaf node-2 ", T:" I am very ordinary, casually point me "},{id:13, Pid:1, Name:" Leaf node-3 ", T:" I am ordinary, casually point me "},{ID: 2, pid:0, Name: "NB parent node", T: "Point I can, but can't point my child node, have the ability to point one you try?" ", Open:true},{id:21, Pid:2, Name:" Leaf node 2-1 ", T:" which unit of yours? " Can you just point me? Be careful. ", Click:false},{id:22, Pid:2, Name:" Leaf node 2-2 ", T:" I have my dad in the hood, click My watch carefully. ", Click:false},{id:23, Pid:2, Nam E: "Leaf node 2-3", T: "At least I am also a leader, not the ordinary masses onTo click on me ..., Click:false},{id:3, pid:0, Name: "Depressed parent Node", T: "Don't point me, I'm so scared ..." My sub-node casually point ... ", Open:true, Click:false},{id:31, Pid:3, Name:" Leaf node 3-1 ", T:" Oh, just take me, "},{id:32, Pid:3, Name:" Leaf Festival Dot 3-2 ", T:" Oh, just a little bit of me "},{id:33, Pid:3, Name:" Leaf node 3-3 ", T:" Oh, just click on Me "}];$.fn.ztree.init (element, setting, znodes);} ;}); Appmodule.controller (' Mycontroller ', function ($scope) {});Page Effect Address: http://twobugerphp.jd-app.com/ztree.html
Implementation function: Define tree This attribute, make <
ultreeclass="ztree"ng-model="selectNode"></ul>自动变成一个有数据的tree，点击树节点，自动变更modelselectnode.This article is from the "Twobuger" blog, so be sure to keep this source http://twobuger.blog.51cto.com/8898161/1409004
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
