解决Jstree 选中父节点时被禁用的子节点也会选中的问题


Posted in Javascript onDecember 27, 2017

问题描述:

最近用jstree遇到一个问题,父节点选中时,被禁用的子节点也会选中如下

解决Jstree 选中父节点时被禁用的子节点也会选中的问题

解决方案:

1、 将jstree升级到最新的版本,v3.3.4及以上就可以

2、 修改checkbox插件配置,将cascade_to_disabled设置为false(注:需要将配置脚本放jstree.min.js的后面)

<script src="./../../dist/jstree.min.js"></script>
<script>
$.jstree.defaults.checkbox = {
      visible: true,
      three_state: true,
      whole_node: true,
      keep_selected_style: true,
      cascade: '',
      tie_selection: true,
      /**
      * This setting controls if cascading down affects disabled checkboxes
      * @name $.jstree.defaults.checkbox.cascade_to_disabled
      * @plugin checkbox
      */
      cascade_to_disabled : false,
      cascade_to_hidden : true
};
 
 
$('#data').jstree({
    'core' : {
      'data' : [
        { "text" : "Root node", "children" : [
            { "text" : "Child node 1", "state": { "disabled": true } },
            { "text" : "Child node 2" },
            { "text" : "Child node 3" },
            { "text" : "Child node 4" },
            { "text" : "Child node 5" },
            { "text" : "Child node 6" }
        ]}
      ]
    }
    ,"plugins" : [ "checkbox" ]
  });
</script>

修改后当选中父节点时,子节点会跳过禁用子节点如下:

解决Jstree 选中父节点时被禁用的子节点也会选中的问题

以上这篇解决Jstree 选中父节点时被禁用的子节点也会选中的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
js自定义事件代码说明
Jan 31 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
Vue 过滤器filters及基本用法
Dec 26 #Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 #Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 #Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 #Javascript
Webpack实战加载SVG的方法
Dec 26 #Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 #Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 #Javascript
You might like
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
浅析vue数据绑定
2017/01/17 Javascript
原生js开发的日历插件
2017/02/04 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python中操作符重载用法分析
2016/04/29 Python
Python学习小技巧总结
2018/06/10 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
实习鉴定范文
2013/12/19 职场文书
办理护照介绍信
2014/01/16 职场文书
门诊手术室工作制度
2014/01/30 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
导游词之岳阳楼
2019/09/25 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python