jstree单选功能的实现方法


Posted in Javascript onJune 07, 2017

在选择部门时,因为每个人只有一个部门,因此要实现单选。

在jstree的core里加入 “multiple”: false,

注意是写在core

如下所示

'plugins': ["wholerow", "checkbox", "types"],
'core': {
    "multiple": false,//单选
    "themes": {
       "responsive": false
    },

如果只选择子节点的话,这样实现是没有问题的。

jstree单选功能的实现方法

注意:如果选择父节点的话,还是会选中下面的子节点

jstree单选功能的实现方法

如果想选择父节点时不全选子节点,就需要加上下面这句

"checkbox": {
        "three_state": false
      },

注意这个是和plugins,core平级的

'plugins': ["wholerow", "checkbox", "types"],
'checkbox': {
     "three_state": false//父子级不关联选中
 },
'core': {
   "multiple": false,//单选
   "themes": {
   "responsive": false
 },

效果如下:

jstree单选功能的实现方法

这是可以看到选中了父节点,子节点已经不会选中了。

Javascript 相关文章推荐
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
纯js实现倒计时功能
Jan 06 Javascript
vue组件生命周期详解
Nov 07 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 #jQuery
webpack打包单页面如何引用的js
Jun 07 #Javascript
vue使用Axios做ajax请求详解
Jun 07 #Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 #Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 #Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 #Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 #Javascript
You might like
php返回json数据函数实例
2014/10/09 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
js 目录列举函数
2008/11/06 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
护士进修自我鉴定
2014/02/07 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
售后求职信范文
2014/03/15 职场文书
老公保证书范文
2014/04/29 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers
Golang 实现WebSockets
2022/04/24 Golang
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis