回覆列表
-
1 # 慎談奧秘
-
2 # 琉璃若夢
從java角度的確可以組裝出樹形結構資料，但是有更高效巧妙的值傳遞方式可以實現。上程式碼：
本方法利用了java的值傳遞，將所有資料放入hashMap中，在調通addChild方法時操作的都是這個map中所引用的物件。不用遞迴，理論上一個核心迴圈就解決了任何樹形結構的組裝。只需要保證輸入的資料有上下級關係即可。
從java角度的確可以組裝出樹形結構資料，但是有更高效巧妙的值傳遞方式可以實現。上程式碼：
本方法利用了java的值傳遞，將所有資料放入hashMap中，在調通addChild方法時操作的都是這個map中所引用的物件。不用遞迴，理論上一個核心迴圈就解決了任何樹形結構的組裝。只需要保證輸入的資料有上下級關係即可。
大概思路：樹形檢視使用的是vue官方事例程式碼，java負責封裝資料，按照vue官方事例的資料結構封裝資料即可。有兩個需要關注的點：1.官方事例的資料結構是一個物件裡面包含著集合，而不是一個集合物件 2.遞迴演算法
上程式碼：
前端：html+js
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="${ctx}/core-plugins/ew/depend/jquery/jquery.min.js" type="text/javascript"></script>
<style>
body {
font-family: Menlo, Consolas, monospace;
color: #444;
}
.item {
cursor: pointer;
}
.bold {
font-weight: bold;
}
ul {
padding-left: 1em;
line-height: 1.5em;
list-style-type: dot;
}
</style>
<script type="text/x-template">
<li>
<div :class="{bold: isFolder}" @click="toggle" @dblclick="makeFolder">
{{ item.name }}
<span v-if="isFolder">[{{ isOpen ? "-" : "+" }}]</span>
</div>
<ul v-show="isOpen" v-if="isFolder">
<tree-item
class="item"
v-for="(child, index) in item.children"
:key="index"
:item="child"
@make-folder="$emit("make-folder", $event)"
@add-item="$emit("add-item", $event)"
></tree-item>
<li @click="$emit("add-item", item)">+</li>
</ul>
</li>
</script>
</head>
<body>
<div>
<ul >
<tree-item :item="treeData" @make-folder="makeFolder" @add-item="addItem"> </tree-item>
</ul>
</div>
</body>
</html>
<script>
Vue.component("tree-item", {
template: "#item-template",
props: {
item: Object
},
data: function () {
return {
isOpen: false
}
},
computed: {
isFolder: function () {
return this.item.children &&
this.item.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.isOpen = !this.isOpen
};
},
makeFolder: function () {
if (!this.isFolder) {
this.$emit("make-folder", this.item)
this.isOpen = true
}
}
}
})
var demo = new Vue({
el: "#demo",
data: {
treeData: {}
},
methods: {
makeFolder: function (item) {
Vue.set(item, "children", [])
this.addItem(item)
},
addItem: function (item) {
item.children.push({
name: "new stuff"
})
},
searchData:function(){
debugger;
axios.get("menuRoleLimitBLH_searchMenus.do?pageType=1")
.then(response => (
this.treeData = response.data.json.menuMaps
))
.catch(error => console.log(error));
}
},
created() {
this.searchData();
},
})
</script>
後臺：java +mysql，一共三個方法，分別是：1.獲取請求 2獲取所有選單 3遞迴選單的父子關係
/**
* Purpose:選單列表頁面
* @author JaxWan
* @param req
* @return IZrarResponse
*/
public IZrarResponse searchMenus(IZrarRequest req){
IZrarResponse res = new ZrarResponse();
String pageType = req.getParameter("pageType");
if(StringUtil.isNotNull(pageType)){
List<EwTreeVO> EwTreeVOs = dao.selectList("selectAllMenuTree");
List<Map<String, Object>> menus = this.getMenusList(EwTreeVOs);
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", 1);
map.put("name", 2);
map.put("children", menus);
res.addJson("menuMaps", map);
}else {
res.addPage("pages/ewsys/dept/menu_role_limit.jsp").addJSTL("isExtForm", false).addJSTL("isEmptyForm", false);
}
return res;
}
/**
* Purpose:獲取選單集合
* @author JaxWan
* @param EwTreeVOs
* @return List<Map<String,Object>>
*/
public List<Map<String, Object>> getMenusList(List<EwTreeVO> EwTreeVOs){
List<Map<String, Object>> menus = new ArrayList<Map<String,Object>>();
for (int i = 0; i < EwTreeVOs.size(); i++) {
EwTreeVO ewTreeVO = EwTreeVOs.get(i);
String id = ewTreeVO.getId();
String name = ewTreeVO.getName();
String pId = ewTreeVO.getpId();
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", id);
map.put("name", name);
map.put("pId", pId);
Map<String, Object> map2 = this.digui(id, EwTreeVOs,map);
menus.add(map2);
}
return menus;
}
/**
* Purpose:遞迴父子關係
* @author JaxWan
* @param id 父節點id
* @param EwTreeVOs2 選單集合
* @param mapResult 結果集
* @param lists 孩子集合
* @return Map<String,Object>
*/
public Map<String, Object> digui(String id,List<EwTreeVO> EwTreeVOs2,Map<String, Object> mapResult){
List<Map<String, Object>> lists = new ArrayList<Map<String,Object>>();
for (int j = 0; j < EwTreeVOs2.size(); j++) {
EwTreeVO ewTreeVO2 = EwTreeVOs2.get(j);
String id2 = ewTreeVO2.getId();
String name2 = ewTreeVO2.getName();
String pId2 = ewTreeVO2.getpId();
if(id.equals(pId2)){
Map<String, Object> map2 = new HashMap<String, Object>();
map2.put("id", id2);
map2.put("name", name2);
map2.put("pId", pId2);
lists.add(map2);
EwTreeVOs2.remove(j);
j--;
}
}
mapResult.put("children", lists);
for (int i = 0; i < lists.size(); i++) {
Map<String , Object> tempMap = lists.get(i);
String id1 = (String) tempMap.get("id");
this.digui(id1,EwTreeVOs2,tempMap);
}
return mapResult;
———————————————— 河南新華