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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
微信小程序实现手指触摸画板
Jul 09 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
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连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
python Django模板的使用方法
2016/01/14 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
谈谈python中GUI的选择
2018/03/01 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
详解Python中的type和object
2018/08/15 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python字典按照value排序方法
2020/12/28 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
劳动模范事迹材料
2014/01/19 职场文书
高三毕业寄语
2014/04/10 职场文书
《学会合作》教学反思
2014/04/12 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
mysq启动失败问题及场景分析
2021/07/15 MySQL