Ztree树形控件使用总结及创建带有复选框的树

最新推荐文章于 2021-09-21 15:39:45 发布

Lear_博客

最新推荐文章于 2021-09-21 15:39:45 发布

阅读量947

点赞数 1

分类专栏：前端开发 - 第三方插件文章标签： zTree 复杂数据转换为ztree识别的简化数据 ztree复选框获取选中的复选框节点选中复选框

本文链接：https://blog.csdn.net/qq_39292868/article/details/102695614

版权

前端开发 - 第三方插件专栏收录该内容

9 篇文章 0 订阅

订阅专栏

网页需要引用的链接

<link rel="stylesheet" href="css/dataAnalysis/zTreeStyle.css?v=<%=version %>">
<script src="js/lib/jquery.ztree.core.js?v=<%=version %>"></script>
<script src="js/lib/jquery.ztree.excheck.js"></script>

html页面元素

<html>
<body>
    <div>
         <ul id="treeDemo" class="ztree"></ul>   <!--要记得写class="ztree"-->
    </div>
</body>
</html>

javascript逻辑代码

function initTree(dataList){
   //配置
    var setting = {
        view: {
            showLine: false,    //设置 zTree 是否显示节点之间的连线。
            fontCss: {   //字体样式
                "font-size": "14px !important",
                height: "25px"
            },
            showIcon : false,       //设置 zTree 是否显示节点的图标。
            selectedMulti : true,   //设置是否允许同时选中多个节点。
            expandSpeed : 'fast',   //节点展开、折叠时的动画速度
            dblClickExpand : true   //双击节点时，是否自动展开父节点的标识
        },
        check: {
            enable: true,            //true / false 分别表示 显示 / 不显示 复选框或单选框
            autoCheckTrigger: true,   //true / false 分别表示 触发 / 不触发 事件回调函数
            chkStyle: "checkbox",     //勾选框类型(checkbox 或 radio）
            chkboxType:{ "Y": "ps", "N": "ps" } //勾选 checkbox 对于父子节点的关联关系
        },
        data: {
            simpleData: { //简化数据格式
                enable: true,  //true / false 分别表示 使用 / 不使用 简单数据模式
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        // callback : {   //回调函数
        //     beforeClick : '',
        //     onCheck : ''
        // }
    };
    var zNodes=[];
    //调用函数，将接口返回的数据转化为ztree可以使用的简单数据模式
    ZNodesEach(dataList,0,0);
    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
}

调用下方递归函数，处理数据：

    /**
     * 递归函数，将复杂数据处理成简单数据模式
     */
    function ZNodesEach(jsonA,PID,DIR){
        for (var i=0;i<jsonA.length;i++){
            var obj={};
            if("name" in jsonA[i]){
                obj.name=jsonA[i].name;
                if(jsonA[i].pid ==0){
                    obj.isParent=true;
                }else{
                    obj.isParent=false;
                }
            }
            obj.pId=PID;
            if(obj.pId==0){
                DIR=0;
            }
            obj.dir=DIR;
            obj.id=jsonA[i].id;
            obj.open=true;
            zNodes.push(obj);
            if(jsonA[i].child!=''){
                var Cdir=DIR+1;
                var newNode=jsonA[i].child;
                ZNodesEach(newNode,obj.id,Cdir);
            }
        }
    }

简单数据格式

//open:true 表示默认展开节点
var nodes = [

 {id:1, pId:0, name: "父节点1"，open:true},

 {id:11, pId:1, name: "子节点1",open:true},

 {id:12, pId:1, name: "子节点2",open:true}

];

方法使用：

//1.设置ztree节点复选框选中
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var node = zTree.getNodeByParam("id",1);
zTree.checkNode(node, true, true);
zTree.updateNode(node); //设置完之后要更新节点


//2.获取ztree选中的节点
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
console.log(nodes);

注：使用ztree的api方法时，不同的api可能需要依赖不同的ztree插件，详情请自行查阅ztree官网，官网地址：http://www.treejs.cn/v3/api.php

Lear_博客

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Ztree树形控件使用总结及创建带有复选框的树

网页需要引用的链接<link rel="stylesheet" href="css/dataAnalysis/zTreeStyle.css?v=<%=version %>"><script src="js/lib/jquery.ztree.core.js?v=<%=version %>"></script><scri...
复制链接

扫一扫

专栏目录