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

发布时间：2020-12-18 00:36:40 所属栏目：安全来源：网络整理

导读：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在上的简介。注意simple、elegant，简单而优雅，我喜欢这两个词

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在上的简介。

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

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

一、效果图

这里写图片描述

二、应用

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

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

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

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

Java端非常简单：

provincials = provincialService.getProvincials(); for (Provincial provincial : provincials) { List 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中。

map = new HashMap(); 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对数据进行组装保存。

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,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的时候，就需要重新制定以下数据规则。

0) { // 市级全选，那么此时省级节点打钩 if (value.nodes.length == i) { value["state"]["checked"] = true; } // 根据selected来设定颜色 value["state"]["selected"] = true; } else { value["state"]["selected"] = false; } }); }

让treeview和我们打个招呼吧！

⑤、节点onNodeChecked、onNodeUnchecked的应用

不要⑤就够了吗？

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

就像效果图中那样。

这里写图片描述

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

以上所述是小编给大家介绍的Bootstrap Tree View简单而优雅的树结构组件实例解析。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!