bootstrap treeview树形展示走过的坑
程序员文章站
2022-06-08 14:59:41
...
bootstrap 树形展示从开始采坑到最后成功展示
-
开始（思路一）
-
@RequestMapping("/Tree") @ResponseBody public void getCodeTree(HttpServletResponse response) throws IOException { // JsonObject jlist = new JsonObject(); JsonArray jlist = new JsonArray(); //pid为0的对象，第一层 List<CodeTree> codeTreeList = codeTreeService.getCodeTreeByPid("0"); JsonArray codeTreeByPid = getCodeTreeByPid(codeTreeList, jlist); for (int i = 0; i < codeTreeList.size(); i++) { JsonObject jsonObject0 = new JsonObject(); jsonObject0.addProperty("text", codeTreeList.get(i).getMc()); List<CodeTree> codeTree = getCodeTreeId(codeTreeList.get(i).getBm()); //是否有第二层 if (codeTree.size() != 0) { JsonArray jsonArray1 = new JsonArray(); for (int j = 0; j < codeTree.size(); j++) { JsonObject idJsonObject1 = new JsonObject(); idJsonObject1.addProperty("text", codeTree.get(j).getMc()); List<CodeTree> codeTreeList1 = getCodeTreeId(codeTree.get(j).getBm()); //是否有第三层 if (codeTreeList1.size() != 0) { JsonArray jsonArray2 = new JsonArray(); for (int k = 0; k < codeTreeList1.size(); k++) { JsonObject idJsonObject2 = new JsonObject(); idJsonObject2.addProperty("text", codeTreeList1.get(k).getMc()); List<CodeTree> codeTreeList2 = getCodeTreeId(codeTree.get(k).getBm()); 是否有第四层 if (codeTreeList2.size() != 0) { JsonArray jsonArray3 = new JsonArray(); for (int q = 0; q < codeTreeList2.size(); q++) { JsonObject idJsonObject3 = new JsonObject(); idJsonObject3.addProperty("text", codeTreeList2.get(q).getMc()); List<CodeTree> codeTreeList3 = getCodeTreeId(codeTree.get(q).getBm()); //是否有第五层 if (codeTreeList3.size() != 0) { JsonArray jsonArray4 = new JsonArray(); for (int r = 0; r < codeTreeList3.size(); r++) { JsonObject idJsonObject4 = new JsonObject(); idJsonObject4.addProperty("text", codeTreeList3.get(r).getMc()); List<CodeTree> codeTreeList4 = getCodeTreeId(codeTree.get(r).getBm()); //是否有第六层 if (codeTreeList4.size() != 0) { JsonArray jsonArray5 = new JsonArray(); for (int t = 0; t < codeTreeList4.size(); t++) { JsonObject idJsonObject5 = new JsonObject(); idJsonObject5.addProperty("text", codeTreeList4.get(t).getMc()); // List<CodeTree> codeTreeList5 = getCodeTreeId(codeTree.get(t).getBm()); //是否有第六层 jsonArray5.add(idJsonObject5); } idJsonObject3.add("nodes", jsonArray5); } jsonArray4.add(idJsonObject4); } idJsonObject3.add("nodes", jsonArray4); } jsonArray3.add(idJsonObject3); } idJsonObject2.add("nodes", jsonArray3); } jsonArray2.add(idJsonObject2); } idJsonObject1.add("nodes", jsonArray2); } jsonArray1.add(idJsonObject1); } jsonObject0.add("nodes", jsonArray1); } jlist.add(jsonObject0); } response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(codeTreeList.toString()); }总结：这种方法造成tomcat运行不起来
-
改过之后（思路二）
-
@RequestMapping("/Tree") @ResponseBody public void getCodeTree(HttpServletResponse response) throws IOException { // JsonObject jlist = new JsonObject(); JsonArray jlist = new JsonArray(); //pid为0的对象，第一层 List<CodeTree> codeTreeList = codeTreeService.getCodeTreeByPid("0"); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(codeTreeList.toString()); } //递归实现 public JsonArray getCodeTreeByPid(List<CodeTree> codeTreeList,JsonArray jlist){ for (int i = 0; i < codeTreeList.size(); i++) { JsonObject jsonObject = new JsonObject(); jsonObject.addProperty("text", codeTreeList.get(i).getMc()); List<CodeTree> codeTree =codeTreeService.getCodeTreeByPid(codeTreeList.get(i).getBm()); if (codeTree.size() != 0) { JsonArray jsonArray = new JsonArray(); JsonArray codeTreeByPid = getCodeTreeByPid(codeTree, jsonArray); jsonObject.add("nodes", codeTreeByPid); } jlist.add(jsonObject); } return jlist; }
·
- 总结：树形结构的数据全部拼接加载时间过长
- 最终的成功版本（思路三）
- jsp页面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/css/bootstrap-treeview.css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/layer/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/utils.js"></script>
*<script src="${pageContext.request.contextPath}/js/bootstrap-treeview.js"></script>*
</head>
<body>
<div id="tree" style="width:500px;display: none;">
<div class="tip">树形结构</div>
<div class="modal-header-user ">
<button type="button" class="close">
×
</button>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
$.ajax({
type: "get",
url: "../CodeTree/Tree.do",
data: {bm: "0"},
success: function (data) {
var tree = new Array();
$.each(data, function (index, item) {
tree[index] = {text: item.name, comId: parseInt(item.id)};
})
$('#tree').treeview({
data: tree, //节点数据
emptyIcon: "glyphicon glyphicon-plus"//设置图标样式
})
$('#tree').on('nodeSelected', function (event, data) {
//var index = $("li.node-selected").index() + 1;
// $('#tree').treeview('getChecked',nodeId);
var index = $('#tree').treeview('getSelected');
getChildCom(data.comId, data.nodeId);
})
}
});
}
)
//获取子公司信息
function getChildCom(cmpId, indexVal) {
if (typeof ($('#tree').treeview('getSelected')[0].nodes) != "undefined") {
//这里判断当前节点下是否有值了，有就不再添加数据return防止重复添加
//$('#tree').treeview('getSelected')取得当前选中的数据
if ($('#tree').treeview('getSelected')[0].nodes.length > 0) {
return;
}
}
var data = {bm: cmpId}
$.ajax({
type: "get",
url: "../CodeTree/Tree.do",
dataType: "json",
data: data,
success: function (data) {
$.each(data, function (index, item) {
var addNodes = new Array();
addNodes[0] = indexVal;
addNodes[1] = {node: {text: item.name, comId: item.id, selectable: true}};
$("#tree").treeview("addNode", addNodes);
$('#tree').treeview('expandAll', {levels: 10, silent: true});
});
}
});
}
</script>
</html>
- sql：
javaselect PID,BM,ZZSSL,SPBMJC,MC from bwjf_spbm where BM in( select BM from bwjf_spbm where PID =#{bm} ) order by BM - 总结一定要以引bootstrap的js （代码当中有）
经历了九九八十难，真心不容易