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" />
<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>
1
2
3
####②、接下来，页面上需要放一个dom元素。
<div id="procitytree" style="height: 400px;overflow-y :scroll;"></div>
1
通过设置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); }); } } } });
