解决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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
微信小程序实现手势滑动效果
Aug 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
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php之readdir函数用法实例
2014/11/13 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
node后端服务保活的实现
2019/11/10 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
Python实现字典的key和values的交换
2015/08/04 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
python交易记录链的实现过程详解
2019/07/03 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
护理学中专毕业生求职信
2013/11/11 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
建设工程授权委托书
2014/09/22 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android