jquery ztree如何让没有子节点的父节点样式显示为文件夹?

1、新建一个html文件，命名为testhtml。

2、在testhtml文件中，使用div标签创建一个模块，再使用p标签，b标签创建测试的内容。

3、在testhtml文件中，设置b标签的id属性为son，主要用于下面通过该id获得b标签对象。

4、在testhtml文件中，使用button标签创建一个按钮，按钮名称为“获得父节点的父节点的兄弟节点内容”。

5、在testhtml文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行getcon（）函数。

6、在js标签内，创建getcon()函数，在函数内，通过id（son）获得b标签对象 ，重复使用parent()方法获得b标签的父节点的父节点，再使用siblings()获得b标签的父节点的父节点的兄弟节点，通过eq(0)获得第一个兄弟节点，使用text()获得兄弟节点的内容。最后，使用alert()方法将内容输出。

有插件，z-tree轻量级，简单易用
>

首先在页面上有<ul/>标签
<ul id="tree" class="ztree"></ul>

2、定义ztree的配置参数

var setting = {
//check属性放在data属性之后，复选框不起作用
check: {
enable: true
},
data: {
simpleData: {
enable: true
},
}
};
核心参数：zTreeNodes

zTree

的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息

zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式

①带有父子关系的标准
zTreeNodes 举例:
Js代码
var zTreeNodes = [
{"id":1, "name":"test1",
"nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111,
"name":"test111"}
]},
{"id":12, "name":"test12"}
]},

];

②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例：
Js代码
var
treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1,
"name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111,
"pId":11, "name":"test111"},

];
实例一(Java代码)

①在页面引用zTree的js和css：
Html代码
<!-- ZTree树形插件
-->
<link rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeStylecss"
type="text/css">
<!-- <link rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeIconscss"
type="text/css"> -->
<script type="text/javascript"
src="<%=root%>/Web/common/js/jquery-ztree-25minjs"></script>
②在script脚本中定义setting和zTreeNodes
Java代码
var setting = {
isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "id",
//在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId",
//在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable
: true //每个节点上是否显示 CheckBox
};
var treeNodes = [
{"id":1,
"pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12,
"pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
];
③在进入页面时生成树结构：
Js代码
var zTree;
Js代码
$(function() {
zTree =
$("#tree")zTree(setting, treeNodes);
});

---