一般我们做web开发都会用到树，恰好ztree为我们提供了多种风格的树插件。
接下来就看看怎么用Angularjs的directive封装ztree
<!DOCTYPE html>
<html ng-app="ceshiapp" ng-controller="ceshicontroller">
<head>
<title>liuxu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../cstorage/plugins/zTreeStyle.css"
type="text/css"></link>
<link rel="stylesheet"href="../standard/plugins/bootstrap/css/bootstrap.css" type="text/css"></link>
</head>
<body> <zcheckboxtree id="tree" async="true" binding="/unit/user"datatype="json" text="Name" kind="get" ng-model="checked"
ng-click="auth_treenode_onclick(checked)"></zcheckboxtree>
<div>
<h1>已选择</h1>
[list]
<li ng-repeat="item in user track by $index">{{item.Name}}</li>
[/list]
</div>
</body>
<script type="text/javascript"
src="../standard/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../cstorage/plugins/ztree/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript"
src="../standard/plugins/ztree/js/jquery.ztree.all.js"></script>
<script type="text/javascript"
src="../standard/plugins/angular/angular.js"></script>
<script type="text/javascript">
var ceshiapp = angular.module("ceshiapp", []);
//动态加载模板的指令
ceshiapp.directive('zcheckboxtree',function(){
var option = {
restrict : 'E',
require: '?ngModel',
replace : true,
transclude: true,
template : "<ul class='ztree' ></ul> ",
scope:true,
link : function($scope, $element, $attrs, ngModel) {
$scope.config={};
$scope.config.id = $attrs.id; // 控件id
$scope.config.async = $attrs.async; // 是否异步加载，默认异步加载
$scope.config.binding = "/api/1.0/unit/user"; // 绑定数据的url
$scope.config.kind = $attrs.kind; // 请求数据方式post get
$scope.config.datatype = $attrs.datatype; //提交数据方式json
$scope.config.text = $attrs.text; //提交数据方式json
$scope.config.user = []; //选中用户信息
$scope.config.flag = true; //标志位
if ($scope.async == "true" || $scope.async == undefined) {
var setting = {
async : {
enable : true,
url : '/api/1.0/unit/user',
autoParam : [ "id" ],
type : 'get'
},
check : {
enable : true,
chkStyle : "checkbox",
chkboxType : {
"Y" : "s",
"N" : "ps"
},
},
data : {
simpleData : {
enable : true,
idKey : "id", // 指定节点属性名
pIdKey : "parentid", // 指定父节点属性名
rootPId : -1
},
key : {
name : "Name"
}
},
callback : {
onCheck : function(event, treeId, treeNode) {
if (treeNode.checked == false) {
cancelParentNodeChecked(treeNode);
}
getRootOnde();
treeNode.expand=false;
treeNode.user=$scope.config.user;
$scope.$apply(function() {
ngModel.$setViewValue(treeNode);
});
},
onExpand : function(event, treeId, treeNode) {
//父节点展开勾选子节点
if (treeNode.checked && treeNode.isParent) {
cancelChecked(treeNode);
}
}
}
}; //为了实现百度网盘的分享人员树，自定义方法
//递归去除父类节点的选中
function cancelParentNodeChecked(node) {
zTree = $.fn.zTree.getZTreeObj("tree");
if (node.getParentNode()) {
zTree.checkNode(node.getParentNode(), false, false);
cancelParentNodeChecked(node.getParentNode());
}
}
//递归勾选子类
function cancelChecked(node) {
if (node.isParent) {//判断是否为父节点
if (node.zAsync) {//判断该节点是否异步加载过子节点（有木有展开）
zTree = $.fn.zTree.getZTreeObj("tree");
var childs = node.children;
for ( var i = 0; i < childs.length; i++) {
zTree.checkNode(childs[i], true, false);//勾选子节点
cancelChecked(childs[i]);
}
}
}
}
function getRootOnde() {
$scope.config.user = [];
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getCheckedNodes(true);
for ( var i = 0; i < nodes.length; i++) {
var node = nodes[i].getParentNode();
if (node == null || nodes[i].getParentNode().checked == false) {
angular.forEach($scope.config.user, function(item, index) {
if (nodes[i].id == item.id && $scope.config.flag) {
$scope.config.flag = false;
}
});
if ($scope.config.flag) {
$scope.config.user.push(nodes[i]);
}
$scope.config.flag = true;
} else {
while (node != null) {
if (node.getParentNode() == null
|| node.getParentNode().checked == false) {
angular.forEach($scope.config.user, function(item, index) {
if (node.id == item.id && $scope.config.flag) {
$scope.config.flag = false;
}
});
if ($scope.config.flag) {
$scope.config.user.push(node);
}
$scope.config.flag = true;
break;
}
node = node.getParentNode();
}
}
}
$scope.$apply();
}
// 初始化树
eval("$.fn.zTree.init($('#"+ $scope.config.id+"'), setting)");
} else { }
}
};
return option;
}); ceshiapp.controller("ceshicontroller", function($scope, $http) {
$scope.user = [];
$scope.auth_treenode_onclick=function(checked){
if (checked.expand == false || checked.expand == undefined) {
$scope.user =checked.user;
checked.expand = true;
} else {
return;
}
};
});
</script> </html>
Angularjs的directive封装ztree的更多相关文章
-
前端angularJS利用directive实现移动端自定义软键盘的方法
最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后 ...
-
AngularJS之directive
AngularJS之directive AngularJS是什么就不多舌了,这里简单介绍下directive.内容基本上是读书笔记,所以如果你看过<AngularJS up and runnin ...
-
Angularjs之directive指令学习笔记（二）
1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...
-
angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope *享属性.使用隔离 scope 的时候,无法从父 scope *享属性.在 ...
-
AngularJS的directive（指令）配置选项说明
js代码如下: var appModule = angular.module("appModule", []); appModule.controller("Ctrl&q ...
-
angularjs的directive详解
Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操 ...
-
AngularJS自定义Directive
(编辑完这篇之后,发现本篇内容应该属于AngularJS的进阶,内容有点多,有几个例子偷懒直接用了官方的Demo稍加了一些注释,敬请见谅). 前面一篇介绍了各种常用的AngularJS内建的Direc ...
-
详谈AngularJS的Directive
指令Directive是AngularJS最重要的核心.我用AngularJS用的并不是很深,一直以来也是在使用中摸索,从一开始的什么都不懂,查不到系统的资料,到开始使用一些简单的数据绑定{{}},到 ...
-
angularJS中directive与directive 之间的通信
上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...
随机推荐
-
C# 特性详解
特性(attribute)是被指定给某一声明的一则附加的声明性信息. 在C#中,有一个小的预定义特性集合. using System; public class AnyClass { [Obsolet ...
-
提高FOR插入数据库动作的优化代码
await Task.Factory.StartNew(() => Parallel.ForEach(result.data.o, s => { sql = "insert in ...
-
webpack资料
https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazine http://www.cnblogs.com/tugenhua070 ...
-
BZOJ 1211 树的计数
http://www.lydsy.com/JudgeOnline/problem.php?id=1211 思路:每一个prufer编码都代表了一棵树,而点的度数,代表了它在prufer编码中出现的次数 ...
-
CodeForces 747E Comments
栈,模拟. 手动写一个栈模拟一下过程即可. #include<cstdio> #include<cstring> #include<string> #include ...
-
出去html中的标签
C#写法 public static string StripHTML(string strHtml) { string strOutput = strHtml; Regex regex = new ...
-
centos 6.5 ftp服务配置及客户端使用
一.ftp服务简介 FTP是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”.用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Ap ...
-
解决MySQL Slave 触发 oom-killer
最近经常有收到MySQL实例类似内存不足的报警信息,登陆到服务器上一看发现MySQL 吃掉了99%的内存,God ! 有时候没有及时处理,内核就会自己帮我们重启下MySQL,然后我们就可以看到 dme ...
-
利用jstack 找到异常代码
1.top找出耗时pid进程或ps -ef |grep xxx 找出pid 2.ps p 3036 -L -o pcpu,pid,tid,time,tname,cmd 3036为pid 3.prin ...
-
submit按钮修改宽高的坑
近些天对h5非常感兴趣,边工作边学习,虽然比较累,但过得很踏实.每天都要学习一点东西,这样才能对得起自己.好了,废话不多说,进入今天的主题. 今天遇到了一个非常有趣的东西,就是在修改submit按钮的 ...