解决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 回调函数中变量作用域的讨论
Sep 11 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
10分钟学会js处理json的常用方法
Dec 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
PHP 获取ip地址代码汇总
2015/07/05 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
python求解水仙花数的方法
2015/05/11 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
什么是GWT的Module
2013/01/20 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
计算机网络专业推荐信
2013/11/24 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
五好关工委申报材料
2014/05/31 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
个人党性分析材料
2014/12/19 职场文书
房屋维修申请报告
2015/05/18 职场文书
第一军规观后感
2015/06/12 职场文书
高中政治教师教学反思
2016/02/23 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
宝塔更新Python及Flask项目的部署
2022/04/11 Python