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

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

A simple and elegant solution to displaying hierarchical tree structures (iKzQCBgLygc.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

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

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

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

Java端非常简单：

@RequestMapping(value = "loadProcitysInfo")

public void loadProcitysInfo(HttpServletResponse response) {

logger.debug("获取所有省市");

try {

List 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.getMhttp://essage(), e);

logger.error(e.getMessage());

renderJsonError(response, Constants.SERVER_ERROR);

}

}

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

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

protected void renderJsonDone(HttpServletResponse response, final Object value) {

Map 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对数据进行组装保存。

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, valKzQCBgLygcue) {

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。