解决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六种数据类型以及特殊注意点
Dec 20 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
JS中常用的正则表达式
Sep 29 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
Three.JS实现三维场景
Dec 30 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
PHP循环获取GET和POST值的代码
2008/04/09 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
node跨域请求方法小结
2017/08/25 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
python中enumerate函数用法实例分析
2015/05/20 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
自动化专业职业生涯规划书范文
2014/01/16 职场文书
项目经理任命书
2014/06/04 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
校长个人总结
2015/03/03 职场文书
驳回起诉裁定书
2015/05/19 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
解析redis hash应用场景和常用命令
2021/08/04 Redis
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
JavaScript 定时器详情
2021/11/11 Javascript