解决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在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 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分页示例代码
2007/03/19 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
JS高级笔记
2011/07/13 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
django使用图片延时加载引起后台404错误
2017/04/18 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
地理教师岗位职责
2014/03/16 职场文书
高效课堂标语
2014/06/26 职场文书
就业意向书范本
2015/05/11 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers