Bootstrap Tree View简单而优雅的树结构组件实例解析


Posted in Javascript onJune 15, 2017

A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer.

这是Bootstrap Tree View在git上的简介。

注意simple、elegant,简单而优雅,我喜欢这两个词。

那么今天的实例是通过Bootstrap Tree View来制作一款省市级菜单的应用。

一、效果图

Bootstrap Tree View简单而优雅的树结构组件实例解析 
Bootstrap Tree View简单而优雅的树结构组件实例解析 
Bootstrap Tree View简单而优雅的树结构组件实例解析 
Bootstrap Tree View简单而优雅的树结构组件实例解析

二、应用

①、首先,项目需要引入bootstrap.css、jquery.js、bootstrap-treeview.js

<link type="text/css" rel="stylesheet" href="${ctx}/components/bootstrap/css/bootstrap.min.css" rel="external nofollow" />
<script type="text/javascript" src="${ctx}/components/jquery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="${ctx}/components/treeview/js/bootstrap-treeview.js"></script>

②、接下来,页面上需要放一个dom元素。

<div id="procitytree" style="height: 400px;overflow-y :scroll;"></div>

通过设置height和overflow-y,使treeview能够在垂直方向上出现滚动条。

③、由于省市级数据一般都是固定不变的,那么页面初次加载时,我们把省市级数据先拿到。

Java端非常简单:

@RequestMapping(value = "loadProcitysInfo")
public void loadProcitysInfo(HttpServletResponse response) {
 logger.debug("获取所有省市");
 try {
  List<Provincial> provincials = provincialService.getProvincials();
  for (Provincial provincial : provincials) {
   List<City> citys = cityService.getCitysByProvincialId(provincial.getId());
   provincial.setCitys(citys);
  }
  renderJsonDone(response, provincials);
 } catch (Exception e) {
  logger.error(e.getMessage(), e);
  logger.error(e.getMessage());
  renderJsonError(response, Constants.SERVER_ERROR);
 }
}

这段代码需要优化,通过mybatis其实可以一次就获得省级和市级的集合。

获取数据后,通过json写入到response中。

protected void renderJsonDone(HttpServletResponse response, final Object value) {
 Map<String, Object> map = new HashMap<String, Object>();
 map.put("statusCode", 200);
 map.put("result", value);
 String jsonText = JSON.toJSONString(map);
 PrintWriter writer = null;
 try {
  response.setHeader("Pragma", "no-cache");
  response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Expires", 0);
  response.setContentType(contentType);
  writer = response.getWriter();
  writer.write(jsonText);
  writer.flush();
 } catch (IOException e) {
  throw new OrderException(e.getMessage());
 } finally {
  if (writer != null)
   writer.close();
 }
}

前端通过ajax对数据进行组装保存。

jQuery.ajax({
 url : common.ctx + "/procity/loadProcitysInfo", // 请求的URL
 dataType : 'json',
 async : false,
 timeout : 50000,
 cache : false,
 success : function(response) {
  var json = YUNM.jsonEval(response);

  if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {
   var records = json[YUNM.keys.result];
   if (!json)
    return;
   // 城市列表都存在
   if (records != null && records.length > 0) {
    // 遍历子节点
    $.each(records, function(index, value) {
     var proNode = {};
     // text是显示的内容
     proNode["text"] = value.proname;
     proNode["id"] = value.id;
     proNode["procode"] = value.procode;
     // 节点不可选中
     proNode["selectable"] = false;
     // 初始化市级节点
     proNode["nodes"] = [];

     $.each(value.citys, function(index, value) {
      var cityNode = {};
      cityNode["text"] = value.cname;
      cityNode["id"] = value.id;
      cityNode["proid"] = value.proid;
      cityNode["code"] = value.code;
      // 节点不可选中
      cityNode["selectable"] = false;

      proNode["nodes"].push(cityNode);
     });
     // 保存页面端对象中
     //YUNM._set.procityTreeData的数据结构就是二维数组。
     YUNM._set.procityTreeData.push(proNode);
    });
   }
  }
 }
});

④、拿到数据之后,就可以对treeview进行初始化了。

这里,我们讲一点更复杂的应用,如下图。

Bootstrap Tree View简单而优雅的树结构组件实例解析

如果用户已经保存过一部分节点,那么初次展示的时候就需要通过treeview展示出来了。
我们定一些规则:

节点全部选中时color为red,check框选中。

节点未全部选中时color为red,check框未选中。

节点一个也没选中时color为默认,check框未选中。

为此,我们需要增加一点css。

/* 树形省市 */
.treeview .list-group-item.node-checked {
 color: red;
}
.treeview .list-group-item.node-selected {
 color: red;
}

有了这个规则,我们在初次展开treeview的时候,就需要重新制定以下数据规则。

// 省市级数据
var procityTreeData = YUNM._set.procityTreeData;
// 用户已经选中的城市,比如河南洛阳。
var init_code = $this.next("input[name=area]").val();
// 如果用户有选中项,则对选中项进行规则展示
if (init_code) {
 // 初始化选中项目
 $.each(procityTreeData, function(index, value) {
  // 通过i和省级的节点length进行对比,判断是否全选、未全选、全未选三种状态
  var i = 0;
  $.each(value.nodes, function(index1, value1) {
   if (init_code.indexOf(value1.code) != -1) {
    // 选中时先初始化state,再把state.checked设为true
    value1["state"] = {};
    value1["state"]["checked"] = true;
    i++;
   } else {
    // 否则重置state,保证procityTreeData数据的不被更改
    // 这个地方其实有待优化,由于js我还不算精通,所以不知道怎么把数组复制到一个新数组里,保证原始属于不被更改
    value1["state"] = {};
   }
  });
  value["state"] = {};
  // 市级节点有选中,那么省级节点的状态需要变化,根据上面制定的规则来
  if (i > 0) {
   // 市级全选,那么此时省级节点打钩
   if (value.nodes.length == i) {
    value["state"]["checked"] = true;
   }
   // 根据selected来设定颜色
   value["state"]["selected"] = true;
  } else {
   value["state"]["selected"] = false;
  }
 });
}

让treeview和我们打个招呼吧!

$("#procitytree").treeview({
 data : procityTreeData,// 赋值
 highlightSelected : false,// 选中项不高亮,避免和上述制定的颜色变化规则冲突
 multiSelect : false,// 不允许多选,因为我们要通过check框来控制
 showCheckbox : true,// 展示checkbox
 }).treeview('collapseAll', {// 节点展开
 silent : true
});

⑤、节点onNodeChecked、onNodeUnchecked的应用

不要⑤就够了吗?

不够,我们还要控制节点选择框的变化。

就像效果图中那样。

Bootstrap Tree View简单而优雅的树结构组件实例解析 
Bootstrap Tree View简单而优雅的树结构组件实例解析 
Bootstrap Tree View简单而优雅的树结构组件实例解析

onNodeChecked : function(event, node) {
 YUNM.debug("选中项目为:" + node);
 // 省级节点被选中,那么市级节点都要选中
 if (node.nodes != null) {
  $.each(node.nodes, function(index, value) {
   $this.treeview('checkNode', value.nodeId, {
    silent : true
   });
  });
 } else {
  // 市级节点选中的时候,要根据情况判断父节点是否要全部选中
  // 父节点
  var parentNode = $this.treeview('getParent', node.nodeId);
  var isAllchecked = true; // 是否全部选中
  // 当前市级节点的所有兄弟节点,也就是获取省下面的所有市
  var siblings = $this.treeview('getSiblings', node.nodeId);
  for ( var i in siblings) {
   // 有一个没选中,则不是全选
   if (!siblings[i].state.checked) {
    isAllchecked = false;
    break;
   }
  }
  // 全选,则打钩
  if (isAllchecked) {
   $this.treeview('checkNode', parentNode.nodeId, {
    silent : true
   });
  } else {// 非全选,则变红
   $this.treeview('selectNode', parentNode.nodeId, {
    silent : true
   });
  }
 }
},
onNodeUnchecked : function(event, node) {
 YUNM.debug("取消选中项目为:" + node);
 // 选中的是省级节点
 if (node.nodes != null) {
  // 这里需要控制,判断是否是因为市级节点引起的父节点被取消选中
  // 如果是,则只管取消父节点就行了
  // 如果不是,则子节点需要被取消选中
  if (silentByChild) {
   $.each(node.nodes, function(index, value) {
    $this.treeview('uncheckNode', value.nodeId, {
     silent : true
    });
   });
  }
 } else {
  // 市级节点被取消选中
  var parentNode = $this.treeview('getParent', node.nodeId);
  var isAllUnchecked = true; // 是否全部取消选中
  // 市级节点有一个选中,那么就不是全部取消选中
  var siblings = $this.treeview('getSiblings', node.nodeId);
  for ( var i in siblings) {
   if (siblings[i].state.checked) {
    isAllUnchecked = false;
    break;
   }
  }
  // 全部取消选中,那么省级节点恢复到默认状态
  if (isAllUnchecked) {
   $this.treeview('unselectNode', parentNode.nodeId, {
    silent : true,
   });
   $this.treeview('uncheckNode', parentNode.nodeId, {
    silent : true,
   });
  } else {
   silentByChild = false;
   $this.treeview('selectNode', parentNode.nodeId, {
    silent : true,
   });
   $this.treeview('uncheckNode', parentNode.nodeId, {
    silent : true,
   });
  }
 }
 silentByChild = true;
},

到这里,treeview的应用已经算是非常全面了

以上所述是小编给大家介绍的Bootstrap Tree View简单而优雅的树结构组件实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
Angularjs为ng-click事件传递参数
Jun 15 #Javascript
详解原生js实现offset方法
Jun 15 #Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 #Javascript
微信小程序canvas写字板效果及实例
Jun 15 #Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 #Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 #Javascript
详解react-router如何实现按需加载
Jun 15 #Javascript
You might like
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
用Python遍历C盘dll文件的方法
2015/05/06 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
python中如何设置代码自动提示
2020/07/15 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
什么时候用assert
2015/05/08 面试题
幼儿园秋游感想
2014/03/12 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
python 逐步回归算法
2021/04/06 Python
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏