解决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+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
javascript的数组和常用函数详解
May 09 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
javascript常用方法总结
May 14 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
JavaScript字符串对象
2017/01/14 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
详解Python的单元测试
2015/04/28 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
浅谈Python处理PDF的方法
2017/11/10 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
基于python绘制科赫雪花
2018/06/22 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
日语专业推荐信
2013/11/12 职场文书
优秀演讲稿范文
2013/12/29 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
营销计划书范文
2015/01/17 职场文书
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python