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",//第一级别的idpIdKey: "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就可以默认勾选上。

jsp使用zTree的详解相关推荐

java做jsp问题_java/jsp中中文问题详解
java/jsp中中文问题详解更新时间:2006年10月13日 00:00:00 作者: 预备知识: 1.字节和unicode Java内核是unicode的,就连class文件也是,但是很多 ...
hbuilder在服务器端打开网页,HBuilderX配置tomcat外部服务器查看编辑jsp界面的方法详解...
本文关键详细介绍了HBuilderX配置tomcat外界服务器查看编辑jsp界面的方式,文中根据案例文图紧密结合给大伙儿详细介绍的十分详尽,对大伙儿的学习培训或工作中具备一定的参照效仿使用价值,必须的 ...
JSP的基本构成详解
例:  <%@ page language="java" contentType="text/html; chars ...
JSP中四大作用域详解
在学习时读到一篇好文章,分享给大家~~ 转自https://www.cnblogs.com/WindSun/p/10209534.html 四大作用域为了在页面.请求.和用户之间传递和共享数据,JS ...
jsp执行原理（详解）
1. jsp的工作模式 jsp的工作模式是请求/相应模式,客户端首先发出HTTP请求,jsp程序收到请求后会进行处理并返回处理结果.在一个jsp文件第一次被请求时,jsp引擎(容器)把该jsp文件转换 ...
JSP基础知识学习详解！
JSP基础知识学习一.JSP是什么 JSP(全称JavaServer Pages)是由[Sun](https://baike.baidu.com/item/Sun Microsystems)公司主导 ...
JSP六个动作详解...
原文地址:http://blog.sina.com.cn/s/blog_6267d71d0100pjdk.html JSP中6个动作为:1.Include. 2.Forward.3.UseBean. ...
生成jsp验证码的代码详解(servlet版)
package util; import java.util.*; import java.io.*; import java.awt.*; import java.awt.image.*; impo ...
JSP网页弹窗代码详解
[1.普通的弹出窗口] 其实代码非常简单: <SCRIPT LANGUAGE=javascript>  ...