最近做项目用到了treeview。因为涉及到多选的问题,很是棘手,于是乎,我决定查看原生JS,探个究竟。需要引用官方的bootstrap-treeview.js都知道吧,对于所需要引用的,我就不多说了。相信很多人都在网上看到了,有的人说要写showCheckbox:true;有的人又让写multiSelect:true。众说纷纭的,但是本博主试了多次,仍不起作用,最后痛下决心,看源码。要知道,看源码是很费时间的事情。我把部分关键源码贴出来。

聪明的人一眼就能看出来,default是什么意思?默认。也就是说,在默认的配置里面,并没有showCheckbox:true和multiSelect:true,那么它怎么可能起作用呢???也就是说,你引的JS,并不是你真正想要的。来来来,再来,再看一个JS。

看到了吗,这个JS才有我们想要的东西。而且十分全。注意,我的这个JS在showCheckbox后面定义的是‘!1’,那么‘!1’代表什么意思呢?给大家普及一个知识吧。大部分浏览器里,0代表false,1代表true,现在,在打开测试页,你就会发现,复选框出来了。

如果此时你的复选框还是没有出来,说明要么你数据格式不对,要么你引得JS不对,或者人家源码里定义的显示复选框的字段为A,而你偏偏写个B,那就不会出来。如果此时你没有实现复选框,那么你就不必往下看了。

接下来,我们来实现联动勾选的效果。

因为,源码里可以说确实是力量有限,在那么复杂的条件判断下做出来的,已经很厉害了,如果你读一遍,你也会发现,要写个公共的联动效果真的很难!那我们就自己实现吧!这一点,我要感谢网上某个博主,他的思路很好,帮助我实现了。先看下实现部分,再看他思路:

  1. $('#tree_ul_id').treeview({
  2. levels: 1,
  3. expandIcon: 'glyphicon glyphicon-chevron-right',
  4. collapseIcon: 'glyphicon glyphicon-chevron-down',
  5. nodeIcon: 'glyphicon glyphicon glyphicon-th-list',
  6. selectedBackColor: false,
  7. selectedColor: '#337AB7',
  8. showCheckbox: 1,//这里之所以写1,是因为我引得js源码里定义1为true
  9. multiSelect: 1,//这里之所以写1,是因为我引得js源码里定义1为true
  10. data: 这里放它需要的格式的数据,
  11. onNodeChecked: function(event, node) { //选中节点
  12. var selectNodes = getChildNodeIdArr(node); //获取所有子节点
  13. if (selectNodes) { //子节点不为空,则选中所有子节点
  14. $('#tree_ul_id').treeview('checkNode', [selectNodes, { silent: true }]);
  15. }
  16. var parentNode = $("#tree_ul_id").treeview("getNode", node.parentId);
  17. setParentNodeCheck(node);
  18. },
  19. onNodeUnchecked: function(event, node) { //取消选中节点
  20. var selectNodes = getChildNodeIdArr(node); //获取所有子节点
  21. if (selectNodes) { //子节点不为空,则取消选中所有子节点
  22. $('#tree_ul_id').treeview('uncheckNode', [selectNodes, { silent: true }]);
  23. }
  24. }
  25. });

再来看逻辑原理:

  1. function getChildNodeIdArr(node) {
  2. var ts = [];
  3. if (node.nodes) {
  4. for (x in node.nodes) {
  5. ts.push(node.nodes[x].nodeId);
  6. if (node.nodes[x].nodes) {
  7. var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
  8. for (j in getNodeDieDai) {
  9. ts.push(getNodeDieDai[j]);
  10. }
  11. }
  12. }
  13. } else {
  14. ts.push(node.nodeId);
  15. }
  16. return ts;
  17. }
  1. function setParentNodeCheck(node) {
  2. var parentNode = $("#tree_ul_id").treeview("getNode", node.parentId);
  3. if (parentNode.nodes) {
  4. var checkedCount = 0;
  5. for (x in parentNode.nodes) {
  6. if (parentNode.nodes[x].state.checked) {
  7. checkedCount ++;
  8. } else {
  9. break;
  10. }
  11. }
  12. if (checkedCount === parentNode.nodes.length) {
  13. $("#tree_ul_id").treeview("checkNode", parentNode.nodeId);
  14. setParentNodeCheck(parentNode);
  15. }
  16. }
  17. }

把以上代码直接考进去,然后改下对应的ID就完成了。这里值得一提是遍历子节点时,递归用的却是不错,由于数据量十分庞大,层层迭代,递归是不二之选。请看效果图:


我故意勾选掉了两个,仍然是我们想要的样子,为此,任务完成。

俗话说,帮人帮到底,送佛送上西。来说说,怎么样多选取值吧。一句话的事:$('#tree_ul_id').treeview('getChecked');

关于bootstrap的treeview不显示多选(复选框)的问题,以及联动选择的问题,外加多选后取值的更多相关文章

  1. bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

    h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 ​ 首先引入bootstrap和bootstrap-select的c ...

  2. bootstrap的treeview使用方法

    首先引入文件: <link href="./css/bootstrap.css" rel="stylesheet"> <script src= ...

  3. MVC实现多选下拉框,保存并显示多选项

    在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...

  4. Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。

    目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns    / ...

  5. c# 复选下拉框

    引用dll: http://pan.baidu.com/s/1qXa97UO 自定义类: namespace TMI_S { /// <summary> /// 功能描述:自定义多选下拉框 ...

  6. JS-001-单选复选按钮操作

    此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...

  7. js:jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. DropDownList单选与多选下拉框

    一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...

  9. Bootstrap3级联多选下拉框

    <!DOCTYPE html> <html> <head> <title>Bootstrap3级联多选下拉框</title> <met ...

随机推荐

  1. Jquery常用方法合集,超实用

    转自:十分钟玩转 jQuery.实例大全 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. ...

  2. deeplearning.ai学习RNN

    一.RNN基本结构 普通神经网络不能处理时间序列的信息,只能割裂的单个处理,同时普通神经网络如果用来处理文本信息的话,参数数目将是非常庞大,因为如果采用one-hot表示词的话,维度非常大. RNN可 ...

  3. Servlet笔记10--Session

    Web编程中的Session: 代码示例: package com.bjpowernode.javaweb.servlet; import java.io.IOException; import ja ...

  4. 【PE结构】恶意代码数字签名验证

    说明 恶意代码数字签名验证功能,WinverityTrust.CryptQueryObject 代码实现 WinVerifyTrust //------------------------------ ...

  5. 用Java检测远程主机是否能被连接

    有人推荐使用java的Runtime.exec()方法来直接调用系统的Ping命令.也有人完成了纯Java实现Ping的程序,使用的是Java的NIO包(native io, 高效IO包).我个人认为 ...

  6. 【转】如何使用MAT分析内存泄漏

    原文链接:http://www.lightskystreet.com/2015/09/01/mat_usage/ MAT - Memory Analyzer Tool 使用进阶 Sep 1, 2015 ...

  7. (mysql)触发器、事件、事务、函数

    1.事务操作原理:事务开启之后Start transaction,所有的操作都会临时保存到事务日志.只有在得到commit才会关闭,否则清空:2.设置回滚点: savepoint 回滚点名字:  回到 ...

  8. mybatis,genarate自动生成代码

    ---恢复内容开始--- generatorConfig.xml配置文件: <?xml version="1.0" encoding="UTF-8"?&g ...

  9. [BZOJ2616]SPOJ PERIODNI 树形dp+组合数+逆元

    2616: SPOJ PERIODNI Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 128  Solved: 48[Submit][Status][ ...

  10. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...