angular ztree 梯形结构json配置、点击节点事件、默认展开所有

最新推荐文章于 2023-02-27 17:22:44 发布

转载最新推荐文章于 2023-02-27 17:22:44 发布 · 203 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.mk2048.com/blog/blog.php?id=hhk02c1bihbb&title=angular+ztree+%E6%A2%AF%E5%BD%A2%E7%BB%93%E6%9E%84json%E9%85%8D%E7%BD%AE%E3%80%81%E7%82%B9%E5%87%BB%E8%8A%82%E7%82%B9%E4%BA%8B%E4%BB%B6%E3%80%81%E9%BB%98%E8%AE%A4%E5%B1%95%E5%BC%80%E6%89%80%E6%9C%

收录于

前端

本文详细介绍了如何在AngularJS应用中整合ZTree插件，实现动态加载和操作复杂的树形数据结构。通过$http发起POST请求获取树数据，利用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: ''
                        }
                    },
　　　　　　　　　　　 check:{
　　　　　　　　　　　　　　enable:true,//开启树的checkbox，也可以设置为radio
　　　　　　　　　　　 },
                    callback: {
                        onClick: zTreeOnCheck //点击节点时 回调
                    }
                };
                var zTree = $.fn.zTree.init($("#functionLimitList"),setting,$scope.zNodes);//初始化
                var functionLimitList = $.fn.zTree.getZTreeObj("functionLimitList");
                functionLimitList.expandAll(true);//默认展开所有

　　　　　　　　　 functionLimitList.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };//checkbox 选中/取消选中的时候关联到父子节点 p-父 s-子


            }).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;
 
};

默认选中节点：(备注：默认选中的方法应该在树成功以后调用才能保证每次check成功)

        $scope.roleZtreeDafultNodes = function () {
            var url = '/';//接口名
            var params = {
                // 参数
            };
            $http.post(url,params).success(function(res){
                var list = [110101,110102];//res.data里 获取到的节点id
                for(var i=0;i<list.length;i  ){
                    var node = zTree.getNodeByParam("id",list[i]);
                    zTree.checkNode(node);
                    zTree.expandNode(node, true, true,true);
                    zTree.selectNode(node);
                };
            }).error(function(){});

        };
        $scope.roleZtreeDafultNodes();