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实现智能感知连接外网搜索
May 21 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
vue实现简单学生信息管理
May 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 fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
Augularjs-起步详解
2016/07/08 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
js中的面向对象入门
2017/03/06 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python sys.argv用法实例
2015/05/28 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
python微信撤回监测代码
2019/04/29 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
python实现动态数组的示例代码
2019/07/15 Python
django框架forms组件用法实例详解
2019/12/10 Python
计算机专业应届毕业生自荐信
2013/09/26 职场文书
毕业自我鉴定
2013/11/05 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
小学主题班会教案
2015/08/17 职场文书