关于ztree的基本使用

最新推荐文章于 2024-01-25 12:00:00 发布

终于可以独立写bug了

最新推荐文章于 2024-01-25 12:00:00 发布

阅读量169

点赞数

文章标签： ztree

本文链接：https://blog.csdn.net/weixin_42261421/article/details/83828556

版权

<link rel="stylesheet" href="__PUBLIC__/admin/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="__PUBLIC__/admin/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
    var setting = {
        view: {
            showIcon: true,//是否显示图标
            dblClickExpand: false,//是否双击展开/收起
            selectedMulti: false,//是否允许同时选中多个节点
            expandSpeed: 'fast',//展开速度fast、slow
            showTitle: true, //是否显示节点的title提示信息
            showLine: true,//是否显示节点间的连线
            nameIsHTML: true //设置 name 属性是否支持 HTML 脚本
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
            onClick: function (event, treeId, treeNode, clickFlag) {
                // 判断是否父节点
                if (!treeNode.isParent) {
                    //alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
                    $.post("url",{id:treeNode.id},function (data) {
						//此处写自己的代码
                    });
                }
            }
        }
    };

    function initTree() {
        jQuery.ajax({
            url: "url",
            data: {},
            type: "POST",
            dataType: "json",
            cache: false,
            success: function (data) {
                //返回的数据格式
                /*var zNodes =[
                    { id:1, pId:0, name:"一级分类", open:true},
                    { id:11, pId:1, name:"二级分类"},
                    { id:111, pId:11, name:"三级分类"},
                    { id:112, pId:11, name:"三级分类"},
                    { id:113, pId:11, name:"三级分类"},
                    { id:114, pId:11, name:"三级分类"},
                    { id:115, pId:11, name:"三级分类"},
                    { id:12, pId:1, name:"二级分类 1-2"},
                    { id:121, pId:12, name:"三级分类 1-2-1"},
                    { id:122, pId:12, name:"三级分类 1-2-2"},
                ];*/
                data = eval(data);//ztree只认js对象，而不是字符串，所以eval转换下
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
                $.fn.zTree.init($("#treeDemo"), setting, data);
                var treeObj = $.fn.zTree.getZTreeObj("tree");
            }
        });
    }


    $(document).ready(function () {
        initTree();
    });


</script>