解决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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
深入理解javascript中的this
Feb 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 mvc开发模式的感想
2011/06/28 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
js仿360开机效果
2019/12/26 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
简单了解python中的与或非运算
2019/09/18 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
新任教师自我鉴定
2014/02/24 职场文书
六五普法规划实施方案
2014/03/21 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
2014年体育工作总结
2014/11/24 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL