解决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 Mobile入门—多页面切换示例学习
Jan 08 Javascript
Javascript函数式编程语言
Oct 11 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 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
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
理解Javascript闭包
2013/11/01 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
JS实现的找零张数最小问题示例
2017/11/28 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
jQuery实现评论模块
2020/08/19 jQuery
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
python变量命名的7条建议
2019/07/04 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Python多进程编程常用方法解析
2020/03/26 Python
Python如何实现FTP功能
2020/05/28 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
建筑工程自我鉴定
2013/10/18 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
不假外出检讨书
2014/01/27 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
经验交流材料格式
2014/12/30 职场文书
舞出我人生观后感
2015/06/16 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技