15:45 提问
ztree中json类型数据如何在前台显示？
后台从数据库中获取到相应数据，存储到list，然后将list转换为json类型，返回到前台，通过ajax接收
前台代码如上所示，不显示树形结构，请问是哪里出现了问题。
按赞数排序
debug一下看看json数据 ，网上有成型的 照猫画虎
已解决此问题：
请注意看上图treeNodesdata,success中传过来的是treeNodes,而我在树初始化的时候传过来的变量写的是treeNodes。直接将后台的json传到前台，前台通过success接收就可以以树形结构显示。运行效果如下所示
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐ztree要使用自定义图标字体的时候 需要自己做皮肤cssstyle，官方有文档，但是有些时候我们值需要简单的设置图标字体class样式 是没办法使用的,我们需要对两个函数进行修改。
下面是两个函数请自己看注释
expandCollapseNode是节点折叠展开的函数
expandCollapseNode: function (setting, node, expandFlag, animateFlag, callback) {
var root = data.getRoot(setting),
childKey = setting.data.key.
var tmpCb, _
if (!node) {
tools.apply(callback, []);
if (root.expandTriggerFlag) {
_callback =
tmpCb = function () {
if (_callback) _callback();
if (node.open) {
setting.treeObj.trigger(consts.event.EXPAND, [setting.treeId, node]);
setting.treeObj.trigger(consts.event.COLLAPSE, [setting.treeId, node]);
callback = tmpCb;
root.expandTriggerFlag = false;
if (!node.open && node.isParent && ((!$$(node, consts.id.UL, setting).get(0)) || (node[childKey] && node[childKey].length & 0 && !$$(node[childKey][0], setting).get(0)))) {
view.appendParentULDom(setting, node);
view.createNodeCallback(setting);
if (node.open == expandFlag) {
tools.apply(callback, []);
var ulObj = $$(node, consts.id.UL, setting),
switchObj = $$(node, consts.id.SWITCH, setting),
icoObj = $$(node, consts.id.ICON, setting);
if (node.isParent) {
node.open = !node.
if (node.iconOpen && node.iconClose) {
icoObj.attr("style", view.makeNodeIcoStyle(setting, node));
if (node.open) { //这个判断打开的时候用什么图标
view.replaceSwitchClass(node, switchObj, consts.folder.OPEN);
view.replaceIcoClass(node, icoObj, consts.folder.OPEN);//这里替换的是 span的class 进去自行修改
if (animateFlag == false || setting.view.expandSpeed == "") {
ulObj.show();
tools.apply(callback, []);
if (node[childKey] && node[childKey].length & 0) {
ulObj.slideDown(setting.view.expandSpeed, callback);
ulObj.show();
tools.apply(callback, []);
view.replaceSwitchClass(node, switchObj, consts.folder.CLOSE);
view.replaceIcoClass(node, icoObj, consts.folder.CLOSE);//这里替换的是 span的class 进去自行修改
if (animateFlag == false || setting.view.expandSpeed == "" || !(node[childKey] && node[childKey].length & 0)) {
ulObj.hide();
tools.apply(callback, []);
ulObj.slideUp(setting.view.expandSpeed, callback);
tools.apply(callback, []);
MakNodeIcoClass是加载节点生成class的函数 &如果这里像我这里修改 需要把&expandCollapseNode函数的两行代码注视掉：view.replaceIcoClass(node, icoObj, consts.folder.CLOSE)
//makeNodeIcoClass 负责加载节点的时候生成class
//我根据自己需求改了一下,注视掉的代码 都是原始代码
makeNodeIcoClass: function (setting, node) {
var icoCss = ["ico"];
if (!node.isAjaxing) {
icoCss[0] = (node.iconSkin ? node.iconSkin /*+ "_" */: "");// + icoCss[0];
if (node.isParent) {
//icoCss.push(node.open ? consts.folder.OPEN : icoCss.join('_')/*consts.folder.CLOSE*/);
//icoCss.push(consts.folder.DOCU);
return /*consts.className.BUTTON + " " +*/ icoCss.join('_');
通过上面的修改以后，我们只需要 给出&iconSkin 就可以了，iconClose 和&iconOpen 如果按照我这种改法是没办法使用的。 需要再进一步修改。
[{"id":10,"name":"test","pId":0,"iconSkin":"fa fa-link","url":"/system/Category/Details/10","iconOpen":null,"iconClose":null}]
不需要注视上面提到的两行代码，需要修改replaceIcoClass函数如下，
replaceIcoClass: function (node, obj, newName) {
if (!obj || node.isAjaxing) return;
var tmpName = obj.attr("class");
if (tmpName == undefined) return;
var tmpList = tmpName.split("_");
switch (newName) {
case consts.folder.OPEN:
tmpList[tmpList.length - 1] = node.iconO
case consts.folder.CLOSE:
tmpList[tmpList.length - 1] = node.iconC
case consts.folder.DOCU:
//tmpList[tmpList.length-1] = newN
tmpList[tmpList.length - 1] = node.iconS
//obj.attr("class", tmpList[tmpList.length - 1]);
obj.attr("class", tmpList.join("_"));
上面的改法都是根据个人需求而定，我这个是在学习 洞庭夕照（）大神的教学系列修改的。
阅读(...) 评论()zTree 常见问题
我的图书馆
zTree 常见问题
zTree 常见问题
最近已经有好几个使用了 zTree 的朋友跟我们联系过，也就开始有了一些由于 zTree 的 API 帮助文档未能更准确说明造成误解的问题。这一篇博文就专门作为总结 zTree 的常见问题解答板块了。希望能对刚开始使用 zTree 的朋友们起到一些帮助。 1. zTree一定要使用 JQuery 的核心包吗？（）答：zTree 是在 JQuery 核心包的基础上开发出来的专用于 WEB 上显示树形数据的插件。目前使用的JQuery版本是 jquery-1.4.2.js2. 为什么 zTree 无法使用我生成的 JSON 数据？（）答：请务必区分 JSON 格式的字符串 和 JSON 数据对象。 zTree 使用的是 JSON 数据对象，不是 JSON 格式的字符串。 ____举例：______（1）JSON 格式的字符串： var nodes = "[{id:1, name:'test1'}, {id:2, name:'test2'} ]";______（2）JSON 数据对象： var nodes = [{id:1, name:'test1'}, {id:2, name:'test2'} ];3. 为什么 API 文档中的 getNodes() 方法只能得到 zTree 的根节点，而不是全部节点？（）答：getNodes()方法返回值是 Array(JSON) 类型的，并不是说把全部节点转换为数组传递回来，因为这样对于树这种数据类型来说，就没有太大意义了。 之所以是Array，主要是因为根节点可能会有若干个，至于根节点下面的子节点，都保存在每个 treeNode 数据的 nodes 属性下，整个数据对象的结构没有发生任何改变。（详情请参见API文档中 参数 --& zTreeNodes详解内的各个属性说明）。____如果想遍历全部节点，请使用递归方法遍历即可——“JS操作 演示”的页面中有遍历的样例代码。4. 怎样才能获取 checkbox 上打勾的节点并传递给后台服务器？（）答：首先说如何获得全部打勾的节点——使用 getCheckedNodes(checked) 方法即可（详情请参见API文档中 方法 --& 获取 --& getCheckedNodes(checked) 内的各个属性说明）。____然后说说给服务器提交数据的问题：提交数据无非是 Get 或者 Post，一般建议使用 Post 方式。不管用哪种方式都是需要提交字符串给后台的。一般是把需要的ID排列成逗号分隔的字符串即可（例如：1,2,3等）；如果一定使用 JSON 格式提交，就将得到的 JSON 对象转换为 JSON 格式的字符串，我们建议不要将得到的整个 zTreeNode 对象全都转成 JSON 对象传递，只保留自己后台需要的数据即可。5. 为什么我的 zTree 样式乱套了？（）答：zTree 的主要样式都依靠了 css 进行设定，在你所设计的页面中，如果针对 zTree 容器的父容器有了较多的样式设定，则有可能会导致 zTree 的样式异常，这时候你需要做的是利用 css 的命名规则，编写能覆盖部分关键样式的新样式，保证 zTree 能够正常显示。当然最好的办法是尽量避免这种情况发生。举例（特别感谢 zsy619）：使用模板页，结构如下：&&&& &div id="Guide_back"&&&&&&&& &ul&&&&&&&&&&&& &li id="Guide_top"&&&&&&&&&&&&&&&& &div id="Guide_toptext"&&&&&&&&&&&&&&&&&&&& &asp:ContentPlaceHolder ID="CphTitle" runat="server"&&&&&&&&&&&&&&&&&&&& &/asp:ContentPlaceHolder&&&&&&&&&&&&&&&& &/div&&&&&&&&&&&& &/li&&&&&&&&&&&& &li id="Guide_main"&&&&&&&&&&&&&&&& &div id="Guide_box"&&&&&&&&&&&&&&&&&&&& &div class="zTreeDemoBackground"&&&&&&&&&&&&&&&&&&&&&& &ul id="treeDemo" class="tree"&&/ul&&&&&&&&&&&&&&&&&&&& &/div&&&&&&&&&&&&&&&& &/div&&&&&&&&&&&& &/li&&&&&&&& &/ul&&&& &/div&其中模板页定义了样式：#Guide_back, #Guide_back ul, #Guide_back li{&&& padding: 0&&& margin: 0&&& list-style-type:}这样将影响树型结构显示，没有层次关系了；解决方法：在页面定义以下样式：#treeDemo , #treeDemo ul, #treeDemo li{&&& margin: 0;&&& padding: 0 0 0 5&&& list-style-type:}
6. 如何在异步加载后自动选中第一个节点？（）答：这个问题首先感谢 zsy619 解决方案参考如下:定义一个全局变量 isFirst var zTreeOvar isFirst =页面加载函数中：$(document).ready(function() {isFirst =zTreeObj = $("#ulTree").zTree(setting, zNodes);});异步加载函数：function zTreeOnAsyncSuccess(event, treeId, msg) {if (isFirst) {var nodes = zTreeObj.getNodes();zTreeObj.selectNode(nodes[0]);}}补充：至于是否需要在 zTreeOnAsyncSuccess 中重新把isFirst设置成false呢？ 这就看你的需求了，是每次异步加载都要自动选择第一个节点还是说仅仅第一次的异步加载后自动选择。
[转]&[转]&
喜欢该文的人也喜欢使用zTree进行数据动态显示
因为公司项目的需要，现学了一下zTree的使用。
下面是我项目的结构图：
baseDao类vcD4KPHA+PHByZSBjbGFzcz0="brush:">package com.wiseweb.zT
import java.sql.C
import java.sql.DriverM
import java.sql.PreparedS
import java.sql.ResultS
import java.sql.SQLE
import java.sql.S
public class BaseDao {
public static Connection getConnection(){
Class.forName("com..jdbc.Driver") ;
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/crud", "root", "root") ;
System.out.println("------------打开连接---------------");
} catch (SQLException e) {
System.out.println("------------连接失败---------------");
e.printStackTrace();
} catch (ClassNotFoundException e) {
System.out.println("-----------------驱动加载失败---------------");
e.printStackTrace();
public static void closeConnection(ResultSet rs,Statement st,Connection conn){
if(rs != null){
rs.close() ;
if(st != null){
st.close() ;
if(conn != null){
conn.close() ;
System.out.println("----------------关闭连接----------------");
} catch (SQLException e) {
System.out.println("----------------关闭连接失败----------------");
e.printStackTrace();
实体Competence类
package com.wiseweb.zT
public class Competence {
private int pI
private int isP
public int getId() {
public void setId(int id) {
public int getpId() {
return pId;
public void setpId(int pId) {
this.pId = pId;
public int getIsParent() {
return isP
public void setIsParent(int isParent) {
this.isParent = isP
public String getName() {
public void setName(String name) {
this.name =
public int getOpen() {
public void setOpen(int open) {
this.open =
Test类package com.wiseweb.zT
import java.sql.C
import java.sql.SQLE
import java.util.ArrayL
import java.util.L
public class Test extends BaseDao{
public List getAllAuthorize(){
List authorizes = new ArrayList() ;
Connection conn = getConnection() ;
pstm = conn.prepareStatement("select * from competence") ;
rs = pstm.executeQuery() ;
while(rs.next()){
Competence authorize = new Competence() ;
authorize.setId(rs.getInt("id")) ;
authorize.setName(rs.getString("name")) ;
authorize.setIsParent(rs.getInt("isParent")) ;
authorize.setOpen(rs.getInt("open")) ;
authorize.setpId(rs.getInt("pId")) ;
authorizes.add(authorize) ;
} catch (SQLException e) {
System.out.println("-----------查询competence失败-------------");
e.printStackTrace();
closeConnection(rs,pstm,conn) ;
public String getJsonData(){
List list = getAllAuthorize() ;
StringBuffer json = new StringBuffer("[") ;
String data = "" ;
int length = list.size() ;
for(int i=0;i<i++){
json.append("{id:" + list.get(i).getId() + ",") ;
json.append("pId:" + list.get(i).getpId() + ",") ;
json.append("name:\"" + list.get(i).getName() + "\",") ;
if(list.get(i).getIsParent() != 0){
json.append("isParent:" + list.get(i).getIsParent() + ",") ;
if(list.get(i).getOpen() != 0){
json.append("open:" + list.get(i).getOpen() + ",") ;
data = json.substring(0,json.lastIndexOf(",")) + "}," ;
json = new StringBuffer(data) ;
data = json.substring(0,json.length()-1) + "]" ;
System.out.println(data);
public static void main(String[] args) {
new Test().getJsonData() ;
asynload.html
&script type="text/javascript"&
function setFontCss(treeId,treeNode){
return treeNode.level==0?{color:"red"}:{};
var setting = {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId:0,
showLine: false,//是否显示连接线
//showIcon: false,//是否显示节点图标
//showTitle: false,//是否显示节点的title提示信息
fontCss: setFontCss,//改变字体颜色和样式
var zNodes = [
{id:1, pId:0, name:"父节点1-展开", open:true, iconOpen:"WEB-INF/image/1_open.png", iconClose:"WEB-INF/image/1_close.png"},
{id:11, pId:1, name:"父节点11-折叠", icon:"WEB-INF/image/2.png"},
{id:111, pId:11, name:"叶子节点111",url:"https://www.baidu.com"},//超链接
{id:112, pId:11, name:"叶子节点112"},
{id:113, pId:11, name:"叶子节点113"},
{id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
{ id:2, pId:0, name:"父节点2 - 折叠"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 - 折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"),setting,zNodes) ;
最简单的树--简单的json数据
浏览器输入https://localhost:8080/testZtree进行显示21:26 提问
ztree异步加载设置isParent:true后没有子节点的父节点循环加载整棵树
问下有没有什么解决方案？
按赞数排序
服务器点判断没有子节点设置isParent为false不就好了？
setting.async.otherParam = {"zTreeIsLoad":false};
function onAsyncSuccess(event, treeId, treeNode, msg){
var treeObj = $.fn.zTree.getZTreeObj(treeId);//树
//初始化后不再取新的数据
treeObj.setting.async.otherParam = {"zTreeIsLoad":true};
如果服务端收到zTreeIsLoad为true则返回"[]"，即空数组。
我的解决方案是，判断节点没有子节点的时候，给它加一个隐藏的子节点。
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐}