bootstrap-treeview實現(xiàn)多級樹形菜單 后臺JSON格式如何組織?
更新時間：2019年07月26日 09:28:30 作者：虎皮青椒沒虎皮
這篇文章主要介紹了bootstrap-treeview實現(xiàn)多級樹形菜單，后臺JSON格式如何組織，具有一定的參考價值，感興趣的小伙伴們可以參考一下
樹形列表菜單的數(shù)據(jù)組織形式一般有兩種：一種是一次性向服務(wù)器請求所有節(jié)點的數(shù)據(jù)，一種是先請求根目錄的節(jié)點，當(dāng)用戶點擊該節(jié)點時，再去請求該節(jié)點的子葉節(jié)點的數(shù)據(jù)。這里我們的需求是第一種。
樹形菜單是我們經(jīng)常會用到的一種菜單展現(xiàn)方式，這里我推薦bootstrap-treeview，它是一款效果非?？岬幕赽ootstrap的jQuery多級列表樹插件。該jQuery插件基于Twitter Bootstrap，以簡單和優(yōu)雅的方式來顯示一些繼承樹結(jié)構(gòu)，如視圖樹、列表樹等。
前端頁面的編寫，比較簡單，故簡略描述，我們著重將后端如何按照要求組織返回所需的Json。
使用方法
首先要在頁面中引入依賴的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元素來作為該列表樹的容器：
<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è)置繼承樹默認展開的級別
showTags: true, //是否在每個節(jié)點右邊顯示tags標(biāo)簽。tag值必須在每個列表樹的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']
}
];
看到這個數(shù)據(jù)結(jié)構(gòu)，我們首先想到的是數(shù)據(jù)結(jié)構(gòu)中的二叉樹。歐拉，我們不妨可以把它理解成，這樣的數(shù)據(jù)結(jié)構(gòu)：
創(chuàng)建一個實例，組織所需要的數(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é)點
private List<BootstrapUiTreeNode> nodes = new ArrayList<>();
//統(tǒng)計該節(jié)點分類下文檔的數(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;
}
/**
* 加載第一層樹節(jié)點 父節(jié)點的根目錄的父id必須為"NONE",包含字段名ID,PARENTID,NAME
*
* @param parentId
* 父親節(jié)點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();
//利用反射獲取對象集合
return result.getObjectList(TypeBrief.class);
} catch (SQLException e) {
log.error(e.toString());
return new ArrayList<TypeBrief>();
}
}
/**
* 遍歷集合獲得對象
*
* @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)計該節(jié)點下分類的文檔數(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)造除第一層幾個根節(jié)點外的類多叉樹結(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é)點下的所有子節(jié)點
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ù)查詢
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;
}
/**
* 補上第一層的幾個根節(jié)點
* @param parentId
* @param sortTitle
* @param tableTitle
* @param id_title
* @param parentId_title
* @param name_title
* @return
*
* 注意：所以會存在葉子節(jié)點中的nodes沒有數(shù)據(jù)的情況，這個時候會出現(xiàn)葉子節(jié)點是可以伸縮的，
* 因為nodes屬性就是一個對象數(shù)組，它會被認為它還有子節(jié)點，其實是沒有的。
*
*/
public static List<BootstrapUiTreeNode> createTreeNodes(String parentId, String sortTitle, String tableTitle, String id_title,
String parentId_title, String name_title) {
//統(tǒng)計所有節(jié)點分類對應(yīng)的文檔數(shù)目
List<TypeBrief> typeBriefs = getPopTypesForReadDoc();
List<BootstrapUiTreeNode> nodes = new ArrayList<>();
//查詢第一層根節(jié)點
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();
}
}
訪問結(jié)果：
最終樹形菜單效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了IE瀏覽器下JS腳本提交表單后，不能自動提示問題解決方法,涉及IE瀏覽器配置與javascript事件處理操作技巧,需要的朋友可以參考下2019-06-06
這篇文章介紹了JS實現(xiàn)深拷貝的幾種方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
JavaScript中的this總是讓人迷惑，應(yīng)該是js眾所周知的坑之一。 個人也覺得js中的this不是一個好的設(shè)計，由于this晚綁定的特性，它可以是全局對象，當(dāng)前對象，或者…有人甚至因為坑大而不用this2015-12-12
arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動彈回(實現(xiàn)思路)
這篇文章主要介紹了arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動彈回，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
JS前端知識點總結(jié)之頁面加載事件，數(shù)組操作，DOM節(jié)點操作，循環(huán)和分支
這篇文章主要介紹了JS前端知識點總結(jié)之頁面加載事件，數(shù)組操作，DOM節(jié)點操作，循環(huán)和分支,結(jié)合實例形式總結(jié)分析了JS頁面加載事件，數(shù)組操作，DOM節(jié)點操作，循環(huán)和分支所涉及的相關(guān)事件、函數(shù)及操作注意事項,需要的朋友可以參考下2019-07-07
原生JavaScript實現(xiàn)動態(tài)省市縣三級聯(lián)動下拉框菜單實例代碼
像平時購物選擇地址時一樣，通過選擇的省動態(tài)加載城市列表，通過選擇的城市動態(tài)加載縣區(qū)列表，從而可以實現(xiàn)省市縣的三級聯(lián)動，下面使用原生的JavaScript來實現(xiàn)這個功能，需要的朋友參考下吧2016-02-02
這篇文章主要為大家整理了關(guān)于Bootstrap排版的慕課筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)無縫滾動雙圖切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
springMvc 前端用json的方式向后臺傳遞對象數(shù)組方法
今天小編就為大家分享一篇springMvc 前端用json的方式向后臺傳遞對象數(shù)組方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了js簡單的分頁器插件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09