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练习之表单验证实现代码
Dec 14 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
js实现简单扫雷
Nov 27 Javascript
javascript中call,apply,bind的区别详解
Dec 11 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
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
python使用cPickle模块序列化实例
2014/09/25 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python多进程读图提取特征存npy
2019/05/21 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
党员年终民主评议的自我评价
2013/11/05 职场文书
高二生物教学反思
2014/01/27 职场文书
党日活动总结
2014/05/07 职场文书
教师教学评估方案
2014/05/09 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
springboot中一些比较常用的注解总结
2021/06/11 Java/Android