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

看了别人的答案，我觉得应该纠正下，你其实就是想统一父节点显示的样式，在ZTree里面treeNode
的节点数据规范有个icon这个属性，这个属性就是控制节点的样式，你还可以通过样式文件css来修改，利用iconSkin这个属性，具体方式你自己看下API吧！

1首先在页面上有<ul/>标签
<ul id="tree" class="ztree"></ul>
2定义ztree的配置参数
var setting = {
//check属性放在data属性之后，复选框不起作用
check: {
enable: true
},
data: {
simpleData: {
enable: true
},
}
};
3获得ztree所要绑定的数据,可以使用静态数据也可以使用ajax获取的数据
a)Ztree的数据有两种格式,标准格式如下:
标准的 JSON 数据需要嵌套表示节点的父子包含关系
例如：
var nodes = [
{
name: "父节点1",
open:true,
children: [
{name: "子节点1"},
{name: "子节点2"}
]
}
];

b)简单数据格式如下(推荐使用):
简单模式的 JSON 数据需要使用 id/pId表示节点的父子包含关系，如使用其他属性设置父子关联关系请参考settingdatasimple内各项说明
例如：
var nodes = [
{id:1, pId:0, name: "父节点1"},
{id:11, pId:1, name: "子节点1"},
{id:12, pId:1, name: "子节点2"}
];
简单数据的id,pId,name,title都可以在setting的data中进行配置,指定相应的字段。
在setting的data中配置simpleData为enable:true即表示使用简单数据格式,不配置或配置为false则为标准数据格式
var setting = {
data: {
simpleData: {
enable: true
}
}
};
4初始化ztree生成树
$fnzTreeinit($("#tree"), setting, nodes);
第一个参数是<ul/>id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据

JS中双击和单击事件冲突的解决方法及案例
问题前置条件：
        在JS中，针对同一DOM *** 作中有时会同时用到单击、双击事件（ps：单击和双击事件执行不同的函数），但通常会遇到一个问题，就是在双击的时候即执行了一次双击事件，而且还执行了两次单击事件。此类冲突在ZTree中经常遇到（下面附有案例）。
解决办法：
        想要解决两个事件冲突，需要对单击事件进行延时，如果在此延时中又监测到单击事件，那么认为此两次单击属于一个双击事件，则只执行双击事件，并第一时间将延时定时器清理，以防止第二次单击时生效。
结合zTree插件案例：
三级树形结构，当单击任何一级树结构时回显数据，当双击时展开所点击的树结构
function initEventLbTree() {
var eventSetting = {
view : {
dblClickExpand : true
},
data : {
key : {
name : 'text'
},
simpleData : {
enable: true,
idKey: "id",
pIdKey: "pid",
rootPId:null,
}
},
callback : {
onClick : OnClick,//单击事件
onDblClick: OnDblClick//双击事件
}
};
createTree("incDealName","/groupAction/getGroupsAndUserByCtis",{geogIds:$("#geogid")val(),
flowCode:$("#processType")val()},null,null,null,eventSetting);//创建树结构
}
var clickFlag = null;//是否点击标识（定时器编号）
function OnClick(e,treeId, treeNode) {
if(clickFlag) {//取消上次延时未执行的方法
clickFlag = clearTimeout(clickFlag);//清除定时器，防止第二次点击生效
    }
    clickFlag = setTimeout(function() {//单击事件，回显点击项到输入框
        var nodes;
        var parentsNode;
        var grandParentNode;
        loadClickNodes(e, treeId, treeNode);
        var zTree = $fnzTreegetZTreeObj(treeId);
        nodes = zTreegetSelectedNodes();
        parentsNode = nodes[0]getParentNode();
        grandParentNode = parentsNodegetParentNode();
       if (nodes[0] == null) { return;
        } else {
            parentsNode = nodes[0]getParentNode();
            if (parentsNode == null) {
                var incDealName = nodes[0]text; s
                etInputValue(incDealName,nodes[0]id);
            } else {
                grandParentNode = parentsNodegetParentNode();
           if (grandParentNode == null) {
                var incDealName = parentsNodetext + "/" + nodes[0]text;
                 setInputValue(incDealName,nodes[0]id);
            } else {
                var incDealName = grandParentNodetext + "/" + parentsNodetext + "/" + nodes[0]text; setInputValue(incDealName,nodes[0]id);
    } } } $("#" + treeId)trigger("selected"); }, 300);//延时300毫秒执行}
    function OnDblClick(e, treeId, treeNode) {//双击事件：清除定时器，展开点击的树结构
        if(clickFlag) {//取消上次延时未执行的方法
            clickFlag = clearTimeout(clickFlag);//清除定时器，防止第二次点击生效 }
        var treeObj = $fnzTreegetZTreeObj(treeId);
        var nodes = treeObjgetSelectedNodes();
        if (nodeslength>0) {
            treeObjexpandNode(nodes[0], true, true, true);//展开点击的树结构
}}
登录后复制
乒乓球桌求转让,价钱可议
精选推荐
广告
解决双击事件和单击事件绑定同一个元素的冲突
1786阅读·1评论·1点赞
2019年11月27日
元素拖拽异常以及与点击事件冲突解决方法
1307阅读·0评论·1点赞
2021年7月27日
JS中解决单击双击事件的冲突的问题
82阅读·0评论·0点赞
2022年12月3日
jQueryjQuery双击事件与单击事件的冲突解决
3843阅读·0评论·2点赞
2016年10月21日
JS事件汇总
2343阅读·0评论·3点赞
2022年6月29日
ztree显示
495阅读·0评论·0点赞
2017年5月31日
方舟生存进化版公测来了！不肝不氪，轻松出SSR！
精选推荐
广告
双击事件（dblclick）时，不触发单击事件(click)
1799阅读·1评论·1点赞
2018年12月26日
鼠标双击事件
4646阅读·0评论·0点赞
2013年5月12日
JS中解决单击双击事件的冲突
1324阅读·0评论·0点赞
2022年1月10日
前端单击事件与双击事件冲突问题解决
325阅读·0评论·0点赞
2022年11月22日
js 实现单击、双击事件
10W阅读·0评论·2点赞
2021年3月3日
关于ztree双击
1154阅读·0评论·0点赞
2012年7月5日
Js *** 作树节点自动折叠展开
4338阅读·0评论·0点赞
2014年4月23日
zTree学习笔记二：展开树和收起树
13W阅读·1评论·2点赞
2017年6月12日
zTree使用时expandAll()折叠全部方法和expandNode()同时使用时节点显示问题记录
17W阅读·1评论·0点赞
2017年11月13日
node-expand_使用dotenv-expand掌握Nodejs上的环境变量
2405阅读·0评论·1点赞
2020年9月17日
JS 之Node节点的 属性、方法 &获取
23W阅读·1评论·5点赞
2016年10月22日
js的node对象(节点的使用)
3410阅读·0评论·3点赞
2018年3月16日
去首页
看看更多热门内容

1、首先准备一个ztree结构树，如下图所示。

2、接下来看一下这里的代码，如下图所示，这里用的是angular和ztree的搭配。

3、接着可以通过getCheckedNodes来获取所有选中的节点，如下图所示。

4、然后可以打断点看一下，这里获取的是所有选中的节点，包括父节点，如下图所示。

5、接着可以看某一条记录里面都有isParent属性，这是判断是不是父节点的属性，如下图所示。

6、最后就可以通过上面的线索获取所有的最后一级节点了，如下图所示。

---