解决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 相关文章推荐
JavaScript 语言的递归编程
May 18 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
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
PHP+DBM的同学录程序(2)
2006/10/09 PHP
MYSQL环境变量设置方法
2007/01/15 PHP
php 破解防盗链图片函数
2008/12/09 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
jQuery设计思想
2017/03/07 Javascript
vue如何截取字符串
2019/05/06 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
Python单元测试实例详解
2018/05/25 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
python中doctest库实例用法
2020/12/31 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
秘书英文求职信
2014/04/16 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
承诺书样本
2014/08/30 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2015年采购员工作总结
2015/04/27 职场文书
终止合同协议书范本
2016/03/22 职场文书