解决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 相关文章推荐
用js遍历 table的脚本
Jul 23 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
用于table内容排序
2006/07/21 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
浅析Jquery操作select
2016/12/13 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
Python中使用动态变量名的方法
2014/05/06 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python如何输出整数
2020/06/07 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
Python自动化操作实现图例绘制
2020/07/09 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
生产管理的三大手法
2013/11/11 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
关于打架的检讨书
2014/01/17 职场文书
导游个人求职信范文
2014/03/23 职场文书
小学语文教研活动总结
2014/07/01 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
公民代理授权委托书
2014/09/24 职场文书
硕士学位论文评语
2014/12/31 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书