jsp使用zTree的详解

第一次使用zTree这种树型结构，记录一下方便以后查看。

zTree官网api地址：http://www.treejs.cn/v3/api.php

下载地址：npm i @zTree/ztree_v3

当然建议用yarn下载 yarn add @zTree/ztree_v3

先说一下可能遇到的问题

1、用idea引入js的话，如果一直给你报404，在确定引入没有问题的情况下，重启idea就可以解决。
2、如果要用复选框需要引入 jquery.ztree.excheck-3.5.js 这个文件，不然就是在setting中配置了也不会显示，而且没有任何提示。
3、引入zTree的css文件 zTreeStyle.css 不然不显示。

使用详情
我用的是3.5的版本，如果是其他版本可能会有些许的差别

引入文件后，首先要有一个容器来装这棵树

<div>
	<ul id='prjzTree' class='ztree'></ul>
	//class必须是ztree，这是组件的class名
</div>

然后是js部分

var zTree;//定义一个
    $(document).ready(function(){
    //setting属于树的配置项，可以对照官网api进行详细的配置
        var setting = {
            view: {
                showLine: true,
                showIcon: true
            },
            check: {
                enable: true,//显示复选框
                chkStyle: "checkbox",
                chkboxType: { "Y": "ps", "N": "ps" }
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",//第一级别的id
                    pIdKey: "pId"//判断第二级别的归属，pId应该等于第一级id
                },
                key:{//这是用来防止数据嵌套的，如果数据嵌套children表示子项，如果没有嵌套，所有的数据都是平级可以不加
                    name:'name',
                    children:'subProject'
                }
            },
            edit: {
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false
            },
             callback: {
                 beforeDrag: zTreeBeforeDrag,
                 onClick: zTreeOnClick, //点击内容触发的函数
                 onCheck:zTreeOnCheck   //点击复选框触发的内容
             }
        };
        var zTreeNodes =<%=request.getAttribute("11111")%>;
        //zTreeNodes 数据的来源
        zTree = $.fn.zTree.init($("#prjtree"), setting, zTreeNodes);
        //加载zTree
    })
    //提交数据
    function submit(){
	 var selNode = zTree.getCheckedNodes(true);//如果你用的复选框，能获取到你勾选上的数据，然后再提交数据就可
	 $.ajax({
		、、、、、、
	})
}

如果数据需要回填显示的话，前端页面不用更改，后端只要修改数据中的checked字段为true就可以默认勾选上。

标签：ztree,复选框,zTree,jsp,var,true,setting,详解
来源： https://blog.csdn.net/jhaglkl/article/details/115007350