jstree中的checkbox默认选中和隐藏示例代码


Posted in Javascript onDecember 29, 2019

jstree复选框自定义显示隐藏和初始化默认选中

首先需要配置 Checkbox plugin

"plugins" : ['checkbox']

设置默认选中状态(checkbox 选中)

state: {checked: true}
$.jstree.defaults.checkbox.tie_selection

示例:

$('#demo_tree').jstree({
 "core" : {
  'data': [
   { "id" : "ajson1", "parent" : "#", "text" : "Simple root node", state: {checked: true}},
   { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
   { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
   { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
  ]
 },
 "plugins" : ['checkbox'],
 "checkbox" : {
  "tie_selection": false,
 }
});

jstree复选框自定义显示隐藏

jstree 本身不支持在节点中隐藏 checkbox,国外有个大佬给出一个利用 css 来隐藏的解决方案:

首先来一段 css

.no_checkbox>i.jstree-checkbox{display:none}

然后在 data 的 json 数据结构中

$('#demo_tree').jstree({
 "core" : {
  'data': [
   { "id" : "ajson1", "parent" : "#", "text" : "Simple root node", state: {checked: true}},
   { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
   { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" , a_attr: {class: "no_checkbox"}},
   { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
  ]
 },
 "plugins" : ['checkbox'],
});

效果:

jstree version => 3.3.8

参考:

https://stackoverflow.com/questions/6112567/jstree-hide-checkbox

总结

以上所述是小编给大家介绍的jstree中的checkbox默认选中和隐藏示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 #Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 #Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 #Javascript
Vue页面刷新记住页面状态的实现
Dec 27 #Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 #Javascript
Vue中axios拦截器如何单独配置token
Dec 27 #Javascript
JavaScript获取当前url路径过程解析
Dec 27 #Javascript
You might like
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
php注册登录系统简化版
2020/12/28 PHP
js 页面输出值
2008/11/30 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
详解jQuery选择器
2016/12/21 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python 实时遍历日志文件
2016/04/12 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python带参数打包exe及调用方式
2019/12/21 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
python 追踪except信息方式
2020/04/25 Python
详解python的super()的作用和原理
2020/10/29 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
外贸英语毕业生自荐信
2013/11/14 职场文书
简易离婚协议书范本
2014/10/24 职场文书
单位租房协议书样本
2014/10/30 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
毕业赠语大全
2015/06/23 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
Redis性能监控的实现
2021/07/09 Redis