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 相关文章推荐
模拟select的代码
Oct 19 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
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
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
Python多进程multiprocessing用法实例分析
2017/08/18 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
python中if及if-else如何使用
2020/06/02 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
市场营销毕业生自荐信
2013/11/23 职场文书
会计专业自荐信范文
2013/12/02 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
大足石刻导游词
2015/02/02 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android