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

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.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进行初始化了。

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

如果用户已经保存过一部分节点，那么初次展示的时候就需要通过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的应用

不要⑤就够了吗？

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

就像效果图中那样。

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简单而优雅的树结构组件实例解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap  # tree  # view  # 树结构  # 组件  # webpack中引用jquery的简单实现  # Webpack 实现 AngularJS 的延迟加载  # Vue.js中用webpack合并打包多个组件并实现按需加载  # zTree树形插件异步加载方法详解  # 浅析webpack 如何优雅的使用tree-shaking（摇树优化）  # 市级  # 全选  # 不被  # 小编  # 有一个  # 的是  # 都是  # 判断是否  # 这是  # 是因为  # 我还  # 就像  # 都要  # 也没  # 在此  # 遍历  # 设为  # 这段  # 这两个  # 数据结构 

相关文章： Bpmn 2.0的XML文件怎么画流程图  如何制作一个表白网站视频,关于勇敢表白的小标题？  深入理解Android中的xmlns:tools属性  建站168自助建站系统：快速模板定制与SEO优化指南  如何在云虚拟主机上快速搭建个人网站？  兔展官网 在线制作,怎样制作微信请帖？  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  如何挑选最适合建站的高性能VPS主机？  文字头像制作网站推荐软件,醒图能自动配文字吗？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  自助网站制作软件,个人如何自助建网站？  小程序网站制作需要准备什么资料,如何制作小程序？  如何在IIS7上新建站点并设置安全权限？  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  建设网站制作价格,怎样建立自己的公司网站？  如何在云主机快速搭建网站站点？  如何快速生成凡客建站的专业级图册？  宝华建站服务条款解析：五站合一功能与SEO优化设置指南  小说建站VPS选用指南：性能对比、配置优化与建站方案解析  微信推文制作网站有哪些,怎么做微信推文，急？  教育培训网站制作流程,请问edu教育网站的域名怎么申请？  用v-html解决Vue.js渲染中html标签不被解析的问题  建站主机系统SEO优化与智能配置核心关键词操作指南  太平洋网站制作公司,网络用语太平洋是什么意思？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  建站之星代理如何优化在线客服效率？  无锡营销型网站制作公司,无锡网选车牌流程？  青浦网站制作公司有哪些,苹果官网发货地是哪里？  武汉网站如何制作,黄黄高铁武穴北站途经哪些村庄？  正规网站制作公司有哪些,目前国内哪家网页网站制作设计公司比较专业靠谱？口碑好？  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  广东企业建站网站优化与SEO营销核心策略指南  制作证书网站有哪些,全国城建培训中心证书查询官网？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  Python文件管理规范_工程实践说明【指导】  C#如何在一个XML文件中查找并替换文本内容  建站之家VIP精选网站模板与SEO优化教程整合指南  如何在腾讯云免费申请建站？  建站之星云端配置指南：模板选择与SEO优化一键生成  小自动建站系统：AI智能生成+拖拽模板，多端适配一键搭建  北京营销型网站制作公司,可以用python做一个营销推广网站吗？    深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  如何选择高效响应式自助建站源码系统？  实例解析angularjs的filter过滤器  如何在建站宝盒中设置产品搜索功能？  广州建站公司哪家好？十大优质服务商推荐  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  网站制作新手教程,新手建设一个网站需要注意些什么？  ,怎么用自己头像做动态表情包？