angular ztree

// 获取树数据
        $scope.initZtreeData = function () {
            var url = ‘/bpopstation/func/queryAll.do‘;
            $http.post(url).success(function(res){
                $scope.zNodes = res.respData;//赋值
                var setting = {
                    view: {
                        dblClickExpand: false,
                        showLine: true,
                        selectedMulti: false
                    },
                    data: {
                        key: {
                            name: "funcName",//设置树显示的字段与接口里的字段对应关系
                            tId: "id",
                            children: "subFuncsList",//子节点名称与接口字段对应关系,梯形数据结构需要
                        },
                        simpleData: {
                            enable:false,//禁用简单的json数据结构,即用梯形结构
                            idKey: "funcCode",//设置id与接口字段对应关系(可以根据id找到当前节点)
                            pIdKey: "parentCode",//设置子pid与接口字段对应关系(可以根据pid找到父节点)
                            rootPId: ‘‘
                        }
                    },
                    callback: {
                        onClick: zTreeOnCheck //点击节点时 回调
                    }
                };
                var zTree = $.fn.zTree.init($("#functionLimitList"),setting,$scope.zNodes);//初始化
                var functionLimitList = $.fn.zTree.getZTreeObj("functionLimitList");
                functionLimitList.expandAll(true);//默认展开所有
            }).error(function(){});

        };
        $scope.initZtreeData();
        function zTreeOnCheck(){
            $scope.getNodeDetail();
        };

//点击节点时执行的回调
$scope.getNodeDetail = function () {    var treeObj = $.fn.zTree.getZTreeObj("functionLimitList");    var node = treeObj.getSelectedNodes();//点击节点后 获取节点数据    $scope.id = node[0].id;

};
 
时间: 2024-11-08 08:46:34

angular ztree的相关文章

改造 ztree 以便于兼容 Angular ui-router 的 ui-sref 功能

// 一.添加 ui-sref 属性 //default setting of core _setting = { treeId: "", treeObj: null, view: { ... }, data: { key: { children: "children", name: "name", title: "", url: "url", uiSref:"ui-sref" } }

Angular整合zTree

1 前提准备 1.1 新建一个angular4项目 参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网:点击前往 三少使用的版本:点击前往 2 编程步骤 从打印出zTree对象可以看出,zTree对象利用init方法来实现zTree结构:init方法接收三个参数 参数1:一个ul标签的DOM节点对象 参数2:基本配置对象 参数3:标题信息数组 2.1 在index.html中引入相关js.css <!doctype html> <html lang="e

结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽

新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功能,这里记录一下. 首先,在Angularjs+AMD+RequireJs的环境下引入插件: require.config({ baseUrl: "", urlArgs: 'ver=' + (+new Date()), waitSeconds: 0, paths: { 'jqueryUI'

angularJS结合Z-tree

/** * name: public.ztree * Version: 1.0.0 beta */angular.module('public.ztree', []).directive('tree',[function(){     return {         require: 'ngModel',         restrict: 'A',         link: function ($scope, element, attrs, ngModel) {           var

AngularJS 利用directive集成JQuery ZTree

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

项目中jquery插件ztree使用记录

最近公司要求做一个关于后台的管理系统.在这个mvvm模式横行的年代,虽然这里用jquery做项目可能有点不符合时代的潮流,但是管他呢,能做出来先在说呗(公司以后要改用angular或者vue来统一前端的制作方式),个人觉得jquery还挺好用的.废话这里就不多叙述了.下面就先来一张完成后的图片展示一下ztree可以完成的功能. 额····这边弹出层的阴影是录制软件的问题(这边的前端插件用的是layui,想用的小伙伴可以自行百度layui,顺便一提,我这里用的版本是layui 1.0的,现在lay

(简)树形ztree 与angularjs结合,实现下级数据,点击复选框 填写到输入框里

html: <link href="vendors/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> 生态系统类型* : <asp:TextBox ID="TextBox3" CssClass="form-control" runat="server" MaxLength="200" autocomplete="of

angular中模板

<!DOCTYPE html><!--调用模块--><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title>Title</title></head><

利用angular打造管理系统页面

1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目:点击前往 将AdminLTE项目的精简版本源代码复制到adminSystem应用主模块的主组件的模板中 AdminLTE项目的精简版本效果图 <!DOCTYPE html> <!-- This is a starter template page. Use this page to star