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比较文档位置
Apr 08 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
js随机生成一个验证码
Jun 01 Javascript
vue 中swiper的使用教程
May 22 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
python3生成随机数实例
2014/10/20 Python
python实现给数组按片赋值的方法
2015/07/28 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
python清除函数占用的内存方法
2018/06/25 Python
python如何实现代码检查
2019/06/28 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
numpy实现RNN原理实现
2021/03/02 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
电影建党伟业观后感
2015/06/01 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python