解决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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
js获取 type=radio 值的方法
May 09 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
vue路由教程之静态路由
Sep 03 Javascript
JS简单表单验证功能完整示例
Jan 26 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
thinkphp分页实现效果
2016/10/13 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
13个PHP函数超实用
2015/10/21 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
详解Vue之计算属性
2020/06/20 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
Python的Django框架使用入门指引
2015/04/15 Python
Python进程间通信Queue实例解析
2018/01/25 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
医药代表个人的求职信分享
2013/12/08 职场文书
购房意向书
2014/04/01 职场文书
小学生评语大全
2014/04/18 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript