Angularjs的directive封装ztree
一般我们做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不会被 ...
随机推荐
- 微信小程序中用setData修改一个对象的属性值
原创文章 1. Page({ data: { items:{ //items为一个对象,is_like和like分别为其两个属性 is_like: 0, like: 0 ...
- ECharts动态获取后台传过来的json数据进行多个折线图的显示，折线的数据由后台传过来
ECharts 多个折线图动态获取json数据 效果图如下: 一.html部分 <p id="TwoLineChart" style="width:100%; he ...
- vue项目优化之路由懒加载
const login = () =>import('@/views/login'); export default new Router({ routes:[ { path:'/login', ...
- c#cardview 把record 去掉,控件cardview的cardCaption标题
private void cardView1_CustomDrawCardCaption(object sender, DevExpress.XtraGrid.Views.Card.CardCapti ...
- ActiveMq unsupported major.minor version 52.0
网上是说ActiveMq已经编译好的版本和运行的java版本不一致导致的,看了一下MF文件 用的Jdk版本是1.8,而我们当前系统的java版本是1.7,所以尝试重新下载之前的ActiveMq的版本. ...
- python面向对象的三大特征
1.封装: 封装就是对类和对象的成员访问进行限制,设定可以访问的方式和不可以访问的方式. 分类: 私有化的封装:当前类/对象种可以使用,类/对象外和子类/对象都不可以用 受保护的封装:当前类/对象和子 ...
- 会话和http请求
一次HTTP请求和响应的过程 域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求,浏览器得到html代码 --> ...
- 常用的 composer 命令
一.列表内容 composer composer list二.查看当前镜像源 composer config -l -g [repositories.packagist.org.type] compo ...
- match
//清空数据match (n) detach delete n (一)查询节点1.查询所有节点 //查询数据库中的所有节点 match(n)return n 2.查询带有某个标签的所有节点 //查询数 ...
- 室内设计类网站Web原型制作分享——Dinzd
Dinzd是一家德国室内设计网站,网站内涵盖全球设计精品资讯以及优秀案列.网站布局简单直观,内容丰富. 此原型模板所用到的交互动作有结合弹出面板做下拉菜单效果,鼠标按下文字按钮跳转页面,按钮hover ...