bootstrap-treeview實(shí)現(xiàn)多級(jí)樹(shù)形菜單 后臺(tái)JSON格式如何組織?
更新時(shí)間：2019年07月26日 09:28:30 作者：虎皮青椒沒(méi)虎皮
這篇文章主要介紹了bootstrap-treeview實(shí)現(xiàn)多級(jí)樹(shù)形菜單，后臺(tái)JSON格式如何組織，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
樹(shù)形列表菜單的數(shù)據(jù)組織形式一般有兩種：一種是一次性向服務(wù)器請(qǐng)求所有節(jié)點(diǎn)的數(shù)據(jù)，一種是先請(qǐng)求根目錄的節(jié)點(diǎn)，當(dāng)用戶(hù)點(diǎn)擊該節(jié)點(diǎn)時(shí)，再去請(qǐng)求該節(jié)點(diǎn)的子葉節(jié)點(diǎn)的數(shù)據(jù)。這里我們的需求是第一種。
樹(shù)形菜單是我們經(jīng)常會(huì)用到的一種菜單展現(xiàn)方式，這里我推薦bootstrap-treeview，它是一款效果非常酷的基于bootstrap的jQuery多級(jí)列表樹(shù)插件。該jQuery插件基于Twitter Bootstrap，以簡(jiǎn)單和優(yōu)雅的方式來(lái)顯示一些繼承樹(shù)結(jié)構(gòu)，如視圖樹(shù)、列表樹(shù)等。
前端頁(yè)面的編寫(xiě)，比較簡(jiǎn)單，故簡(jiǎn)略描述，我們著重將后端如何按照要求組織返回所需的Json。
使用方法
首先要在頁(yè)面中引入依賴(lài)的css樣式和 bootstrap-treeview.js文件。
<!-- Required Stylesheets --> <link href="./css/bootstrap.css" rel="external nofollow" rel="stylesheet"> <!-- Required Javascript --> <script src="./js/jquery.js"></script> <script src="./js/bootstrap-treeview.js"></script>
可以使用任何HTML DOM元素來(lái)作為該列表樹(shù)的容器：
<div id="tree"></div>
調(diào)用
<script type="text/javascript">
$(function() {$.ajax({
type: "Get",
url: "doctype/FarmDoctypeLoadTreeNodes.do",
data: {id: ""},
dataType: "json",
success: function (result) {
$("#tree").treeview({
data: result.nodes, // 數(shù)據(jù)源
levels:1, //設(shè)置繼承樹(shù)默認(rèn)展開(kāi)的級(jí)別
showTags: true, //是否在每個(gè)節(jié)點(diǎn)右邊顯示tags標(biāo)簽。tag值必須在每個(gè)列表樹(shù)的data結(jié)構(gòu)中給出
onNodeSelected: function (event, data) {
/* console.log(data); */
/* alert(data.nodeId); */
window.location = basePath + "webtype/view"
+ data.id + "/Pub1.html";
}
});
},
error: function () {
alert("加載失敗！")
}
});
});
</script>
數(shù)據(jù)源要求的數(shù)據(jù)格式：
var tree = [
{
text: "Parent 1",
tags: ['2'],
nodes: [
{
text: "Child 1",
tags: ['3'],
nodes: [
{
text: "Grandchild 1",
tags: ['1']
},
{
text: "Grandchild 2",
tags: ['1']
}
]
},
{
text: "Child 2",
tags: ['1']
}
]
},
{
text: "Parent 2",
tags: ['1']
},
{
text: "Parent 3",
tags: ['1']
},
{
text: "Parent 4",
tags: ['1']
},
{
text: "Parent 5",
tags: ['1']
}
];
看到這個(gè)數(shù)據(jù)結(jié)構(gòu)，我們首先想到的是數(shù)據(jù)結(jié)構(gòu)中的二叉樹(shù)。歐拉，我們不妨可以把它理解成，這樣的數(shù)據(jù)結(jié)構(gòu)：
創(chuàng)建一個(gè)實(shí)例，組織所需要的數(shù)據(jù)結(jié)構(gòu)的json.
public class BootstrapUiTreeNode implements Serializable {
private static final long serialVersionUID = 1L;
static final Logger log = Logger.getLogger(BootstrapUiTreeNode.class);
private String id;
private String parentId;
private String text;
//子葉節(jié)點(diǎn)
private List<BootstrapUiTreeNode> nodes = new ArrayList<>();
//統(tǒng)計(jì)該節(jié)點(diǎn)分類(lèi)下文檔的數(shù)量
private List<String> tags = new ArrayList<>(); // tags: ['NUM']
public BootstrapUiTreeNode(String id, String parentId, String text) {
super();
this.id = id;
this.parentId = parentId;
this.text = text;
}
public BootstrapUiTreeNode(String id, String parentId, String text, List<BootstrapUiTreeNode> nodes) {
super();
this.id = id;
this.parentId = parentId;
this.text = text;
this.nodes = nodes;
}
public String getParentId() {
return parentId;
}
public void setParentId(String parentId) {
this.parentId = parentId;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public List<BootstrapUiTreeNode> getNodes() {
return nodes;
}
public void setNodes(List<BootstrapUiTreeNode> nodes) {
this.nodes = nodes;
}
public List<String> getTags() {
return tags;
}
public void setTags(List<String> tags) {
this.tags = tags;
}
/**
* 加載第一層樹(shù)節(jié)點(diǎn) 父節(jié)點(diǎn)的根目錄的父id必須為"NONE",包含字段名ID,PARENTID,NAME
*
* @param parentId
* 父親節(jié)點(diǎn)id
* @param SortTitle
* 排序字段index
* @param tableTitle
* 表名index
* @param id_title
* 表id的index
* @param parentId_title
* 表parentid的index
* @param name_title
* 表name的index
* @param icon_title
*/
public static List<Map<String, Object>> queryTreeNodeOne(String parentId, String SortTitle, String tableTitle, String id_title,
String parentId_title, String name_title) {
if (StringUtils.isEmpty(parentId)) {
parentId = "NONE";
}
DataResult nodeResult = null;
DBSort sort = new DBSort("a." + SortTitle, "ASC");
DataQuery query = DataQuery.getInstance("1",
id_title
+ ","
+ parentId_title
+ " as "
+ parentId_title
+ ","
+ name_title
+ " as "
+ name_title,
tableTitle + " a");
query.setPagesize(100);
query.addSort(sort);
DataQuerys.wipeVirus(parentId);
query.setSqlRule("and " + parentId_title + "='" + parentId + "'");
try {
nodeResult = query.search();
} catch (SQLException e) {
log.error(e.getMessage());
}
return nodeResult.getResultList();
}
public static List<TypeBrief> getPopTypesForReadDoc() {
DataQuery query = DataQuery.init(new DataQuery(),
"(SELECT a.NAME as NAME,a.SORT as SORT, a.ID as ID, a.READPOP as READPOP,a.WRITEPOP AS WRITEPOP, a.AUDITPOP AS AUDITPOP, a.PARENTID AS PARENTID, (SELECT COUNT(B1.ID) FROM FARM_DOC B1 LEFT JOIN FARM_RF_DOCTYPE B2 ON B1.ID = B2.DOCID LEFT JOIN FARM_DOCTYPE B3 ON B3.ID = B2.TYPEID WHERE B1.STATE='1' and B3.TREECODE LIKE CONCAT(A.TREECODE,'%') AND B1.STATE='1') AS NUM,f.oid as OID,f.FUNTYPE as FUNTYPE FROM farm_doctype AS a left join FARM_DOCTYPE_POP as f on f.TYPEID=a.ID WHERE 1 = 1 AND (TYPE = '1' OR TYPE = '3') AND PSTATE = '1' ) AS e",
"NAME,ID,PARENTID,NUM,OID,READPOP,AUDITPOP,WRITEPOP,FUNTYPE,SORT");
query.setPagesize(1000);
query.setNoCount();
query.setCache(Integer.valueOf(0), CACHE_UNIT.second);
query.addSort(new DBSort("SORT", "ASC"));
try {
DataResult result = query.search();
//利用反射獲取對(duì)象集合
return result.getObjectList(TypeBrief.class);
} catch (SQLException e) {
log.error(e.toString());
return new ArrayList<TypeBrief>();
}
}
/**
* 遍歷集合獲得對(duì)象
*
* @param nodeList
* @return
*/
public static List<BootstrapUiTreeNode> findNode(List<TypeBrief> typeBriefs, List<Map<String, Object>> data, String id_title,
String parentId_title, String name_title) {
List<BootstrapUiTreeNode> nodeList = new ArrayList<>();
try {
for (Map<String, Object> node : data) {
if (node.get(id_title) == null) {
continue;
}
BootstrapUiTreeNode item = new BootstrapUiTreeNode(node.get(id_title).toString(),
node.get(parentId_title).toString(), node.get(name_title).toString());
//統(tǒng)計(jì)該節(jié)點(diǎn)下分類(lèi)的文檔數(shù)
for(TypeBrief typeBrief : typeBriefs) {
if(typeBrief.getId().equals(node.get(id_title).toString())) {
item.getTags().add(typeBrief.getNum() + "");
break;
}
}
nodeList.add(item);
}
} catch (Exception e) {
throw new RuntimeException(e);
}
return nodeList;
}
/**
* 先用遞歸構(gòu)造除第一層幾個(gè)根節(jié)點(diǎn)外的類(lèi)多叉樹(shù)結(jié)構(gòu)
* @param node
* @param parentId
* @param sortTitle
* @param tableTitle
* @param id_title
* @param parentId_title
* @param name_title
* @return
*/
public static BootstrapUiTreeNode createSubtreeTreeNodes(List<TypeBrief> typeBriefs, BootstrapUiTreeNode node, String parentId, String sortTitle, String tableTitle, String id_title,
String parentId_title, String name_title) {
//獲取該根節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
List<Map<String, Object>> data = queryTreeNodeOne(parentId, sortTitle, tableTitle, id_title, parentId_title, name_title);
List<BootstrapUiTreeNode> roots = findNode(typeBriefs, data, id_title, parentId_title, name_title);
if(null != roots && roots.size() > 0) {
//遞歸繼續(xù)查詢(xún)
for(BootstrapUiTreeNode child : roots) {
BootstrapUiTreeNode treeNode = createSubtreeTreeNodes(typeBriefs, child, child.getId(), sortTitle, tableTitle, id_title, parentId_title, name_title);
node.getNodes().add(treeNode);
}
} else {
node.setNodes(null);
}
return node;
}
/**
* 補(bǔ)上第一層的幾個(gè)根節(jié)點(diǎn)
* @param parentId
* @param sortTitle
* @param tableTitle
* @param id_title
* @param parentId_title
* @param name_title
* @return
*
* 注意：所以會(huì)存在葉子節(jié)點(diǎn)中的nodes沒(méi)有數(shù)據(jù)的情況，這個(gè)時(shí)候會(huì)出現(xiàn)葉子節(jié)點(diǎn)是可以伸縮的，
* 因?yàn)閚odes屬性就是一個(gè)對(duì)象數(shù)組，它會(huì)被認(rèn)為它還有子節(jié)點(diǎn)，其實(shí)是沒(méi)有的。
*
*/
public static List<BootstrapUiTreeNode> createTreeNodes(String parentId, String sortTitle, String tableTitle, String id_title,
String parentId_title, String name_title) {
//統(tǒng)計(jì)所有節(jié)點(diǎn)分類(lèi)對(duì)應(yīng)的文檔數(shù)目
List<TypeBrief> typeBriefs = getPopTypesForReadDoc();
List<BootstrapUiTreeNode> nodes = new ArrayList<>();
//查詢(xún)第一層根節(jié)點(diǎn)
List<Map<String, Object>> data = queryTreeNodeOne(parentId, sortTitle, tableTitle, id_title, parentId_title, name_title);
List<BootstrapUiTreeNode> treeNodes = findNode(typeBriefs, data, id_title, parentId_title, name_title);
for(BootstrapUiTreeNode node : treeNodes) {
BootstrapUiTreeNode treeNode = createSubtreeTreeNodes(typeBriefs, node, node.getId(), sortTitle, tableTitle, id_title, parentId_title, name_title);
nodes.add(treeNode);
}
return nodes;
}
}
控制器：
@RequestMapping("/FarmDoctypeLoadTreeNodes")
@ResponseBody
public Map<String, Object> loadTreeNodes(DataQuery query, HttpServletRequest request, String id) {
query = EasyUiUtils.formatGridQuery(request, query);
try {
List<BootstrapUiTreeNode> treeNodes = BootstrapUiTreeNode.createTreeNodes(id, "SORT", "FARM_DOCTYPE", "ID", "PARENTID", "NAME");
return ViewMode.getInstance().putAttr("nodes", treeNodes).returnObjMode();
} catch (Exception e) {
log.error(e.getMessage());
return ViewMode.getInstance().setError(e.getMessage()).returnObjMode();
}
}
訪(fǎng)問(wèn)結(jié)果：
最終樹(shù)形菜單效果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
IE瀏覽器下JS腳本提交表單后，不能自動(dòng)提示問(wèn)題解決方法
這篇文章主要介紹了IE瀏覽器下JS腳本提交表單后，不能自動(dòng)提示問(wèn)題解決方法,涉及IE瀏覽器配置與javascript事件處理操作技巧,需要的朋友可以參考下2019-06-06
這篇文章介紹了JS實(shí)現(xiàn)深拷貝的幾種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
JavaScript中的this總是讓人迷惑，應(yīng)該是js眾所周知的坑之一。 個(gè)人也覺(jué)得js中的this不是一個(gè)好的設(shè)計(jì)，由于this晚綁定的特性，它可以是全局對(duì)象，當(dāng)前對(duì)象，或者…有人甚至因?yàn)榭哟蠖挥胻his2015-12-12
arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動(dòng)彈回(實(shí)現(xiàn)思路)
這篇文章主要介紹了arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動(dòng)彈回，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
JS前端知識(shí)點(diǎn)總結(jié)之頁(yè)面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(huán)和分支
這篇文章主要介紹了JS前端知識(shí)點(diǎn)總結(jié)之頁(yè)面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(huán)和分支,結(jié)合實(shí)例形式總結(jié)分析了JS頁(yè)面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(huán)和分支所涉及的相關(guān)事件、函數(shù)及操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼
像平時(shí)購(gòu)物選擇地址時(shí)一樣，通過(guò)選擇的省動(dòng)態(tài)加載城市列表，通過(guò)選擇的城市動(dòng)態(tài)加載縣區(qū)列表，從而可以實(shí)現(xiàn)省市縣的三級(jí)聯(lián)動(dòng)，下面使用原生的JavaScript來(lái)實(shí)現(xiàn)這個(gè)功能，需要的朋友參考下吧2016-02-02
這篇文章主要為大家整理了關(guān)于Bootstrap排版的慕課筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
js實(shí)現(xiàn)無(wú)縫滾動(dòng)雙圖切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無(wú)縫滾動(dòng)雙圖切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
springMvc 前端用json的方式向后臺(tái)傳遞對(duì)象數(shù)組方法
今天小編就為大家分享一篇springMvc 前端用json的方式向后臺(tái)傳遞對(duì)象數(shù)組方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了js簡(jiǎn)單的分頁(yè)器插件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09