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 相关文章推荐
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
Apr 23 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 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环境搭建教程
2016/07/16 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
vuex实现简易计数器
2016/10/27 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
numpy matrix和array的乘和加实例
2018/06/28 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
python+django+rest框架配置创建方法
2019/08/31 Python
python如何查看安装了的模块
2020/06/23 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
实习自荐信
2013/10/13 职场文书
市场专员岗位职责
2014/02/14 职场文书
幼师求职自荐信
2014/05/31 职场文书
委托培训协议书
2014/11/17 职场文书
劳模事迹材料范文
2014/12/24 职场文书
优秀班组事迹材料
2014/12/24 职场文书
蜗居观后感
2015/06/11 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
javascript的var与let,const之间的区别详解
2022/02/18 Javascript