場景

效果

jstree官網

https://www.jstree.com/

實現

引用CSS樣式

使用cdn或者將其下載

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> <link rel="stylesheet" href="dist/themes/default/style.min.css" />

引用jquery

因為jstree依賴于jquery，所以要在頁面中引入jquery。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

引用jstree

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

或者

<script src="dist/jstree.min.js"></script>

頁面元素

在html頁面中設置同一個div，作為樹出現的容器。

<div class="col-lg-3"><h5>架構管理</h5><div id="org_tree"></div> </div>

js代碼

創建實例

$(function () { $('#org_tree').jstree(); });

監聽事件

$('org_tree').on("changed.jstree", function (e, data) {console.log(data.selected); });

事件清單

https://www.jstree.com/api/#/?q=.jstree%20Event&f=init.jstree

與實例交互

當實例準備就緒后，可以在上調用方法。

$('button').on('click', function () {$('#jstree').jstree(true).select_node('child_node_1');$('#jstree').jstree('select_node', 'child_node_1');$.jstree.reference('#jstree').select_node('child_node_1'); });

可用方法清單

https://www.jstree.com/api/

以上是官方簡單 示例代碼。

實現與SpringBoot交互獲取數據

html頁面代碼

<div class="row"><div class="col-lg-12"><div class="ibox "><div class="ibox-title"><h5>架構管理頁面</h5><div class="col-sm-2"><div class="form-group"><label class="col-form-label" for="IsOpened">是否啟用</label><select class="form-control" id="IsOpened" name="IsOpened" ><option value="1">是</option><option value="2">全部</option></select></div></div><button class="btn btn-info " type="button" onclick="orgSearch()"><i class="fa fa-refresh"></i>搜索</button></div><div class="ibox-content"><div class="row"><div class="col-lg-3"><h5>架構管理</h5><div id="org_tree"></div></div><div class="col-lg-9"><ul class="sortable-list connectList agile-list ui-sortable"><li class="success-element ui-sortable-handle "><h5>架構詳情</h5><P><button class="btn btn-info " type="button" data-toggle="modal" onclick="orgAdd()"><i class="fa fa-save"></i> 新增</button><button class="btn btn-info " type="button" onclick="orgEdit()"><i class="fa fa-paste"></i> 編輯</button><button class="btn btn-info " type="button" onclick="orgOpen()"><i class="fa fa-trash-o"></i>啟用</button><button class="btn btn-info " type="button" onclick="orgClose()"><i class="fa fa-trash-o"></i>禁用</button><button class="btn btn-info " type="button" onclick="orgRefresh()"><i class="fa fa-refresh"></i> 刷新</button></P><div class="project-list"><table class="table table-hover" id="orgDetailDisplay"><tbody><tr><td class="project-status w-10"><span class="label label-primary">架構編號</span></td><td class="project-title"><span id="num">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">架構名稱</span></td><td class="project-title"><span id="text">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">架構圖標</span></td><td class="project-title"><span id="icon">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">分類</span></td><td class="project-title"><span id="orgClassify">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">是否啟用</span></td><td class="project-title"><span id="opened">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">是否失效</span></td><td class="project-title"><span id="disabled">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">是否選中</span></td><td class="project-title"><span id="selected">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">是否頂級</span></td><td class="project-title"><span id="isTopLevel">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">備注</span></td><td class="project-title"><span id="remark">--</span></td></tr></tbody></table></div></li></ul></div></div></div></div></div></div>

注：

頁面布局是左邊是一個jstree的容器

<div id="org_tree"></div>

然后右邊是點擊具體某一個節點時顯示的詳情顯示

js代碼

$(document).ready(function() {//初始化數據initJsTree(); }); function initJsTree(IsOpened) {if(IsOpened==undefined){/*如果是首次進入則默認查啟用的*/IsOpened=1;}var url = "/sysEnterpriseOrg/doListOrgRecursion.do";//獲取Cookie中存取的選中的節點var select_id = Cookies.get("select_id");//后臺請求數據時傳遞的參數var data = {selectedId:select_id,IsOpened:IsOpened};//向后臺發送post請求$.post(url,data).done(function (res) {//如果響應狀態為trueif(res.status){//先清空數據$('#org_tree').data('jstree', false).empty();//給jstree賦值$('#org_tree').jstree({'core':{'data': res.data,"multiple" : false, // 設置不能多選，即只能單選}}).on("ready.jstree", function (e, data) { // jstree節點加載完成后調用的監聽函數var inst = data.instance;//獲取選中的子節點對象var obj = inst.get_node(e.target.firstChild.firstChild.lastChild);//如果選中的值未定義，則將最底層的賦予選中的值if(typeof(select_id) == "undefined"){select_id = obj.id;}//將選中的id封裝成json值var jsonData = {"id" : select_id};//設置定時器，0.2秒請求數據setTimeout(function () {$.post("/sysEnterpriseOrg/doGetSingleOrgDetails.do",jsonData).done(function (res) {if(res.status){//給詳情部分賦值$("#num").text(res.data.num);$("#text").text(res.data.text);//圖標賦值$("#icon").html('<i class="'+res.data.icon+' modal-icon pr-1"></i>'+res.data.icon);//根據返回的數字顯示相應的中文switch(res.data.orgClassify){case 0:$("#orgClassify").text("集團");break;case 1:$("#orgClassify").text("公司");break;case 2:$("#orgClassify").text("工廠");break;case 3:$("#orgClassify").text("部門");break;case 4:$("#orgClassify").text("崗位");break;default:$("#orgClassify").text("未知分類");}$("#opened").text(1==res.data.opened?"是":"否");$("#disabled").text(1==res.data.disabled?"是":"否");$("#selected").text(1==res.data.selected?"是":"否");$("#isTopLevel").text(1==res.data.isTopLevel?"是":"否");$("#remark").text(res.data.remark);//刷新data.instance.refresh();}}).fail(function (err) {//數據加載失敗后alert("數據加載失敗，請重新嘗試！");});},200);}).on("activate_node.jstree", function (e, data) { // 此事件是獲取當前活動狀態節點（獲取當前被點擊的節點）Cookies.set("select_id",data.node.id);var data = {"id" : data.node.id};$.post("/sysEnterpriseOrg/doGetSingleOrgDetails.do",data).done(function (res) {if(res.status){$("#num").text(res.data.num);$("#text").text(res.data.text);$("#icon").html('<i class="'+res.data.icon+' modal-icon pr-1"></i>'+res.data.icon);switch(res.data.orgClassify){case 0:$("#orgClassify").text("集團");break;case 1:$("#orgClassify").text("公司");break;case 2:$("#orgClassify").text("工廠");break;case 3:$("#orgClassify").text("部門");break;case 4:$("#orgClassify").text("崗位");break;default:$("#orgClassify").text("未知分類");}$("#opened").text(1==res.data.opened?"是":"否");$("#disabled").text(1==res.data.disabled?"是":"否");$("#selected").text(1==res.data.selected?"是":"否");$("#isTopLevel").text(1==res.data.isTopLevel?"是":"否");$("#remark").text(res.data.remark);data.instance.refresh();}}).fail(function (err) {alert("數據加載失敗，請重新嘗試！");});})}else{swal({type: 'error',title: '錯誤提示',text: '接口訪問異常，請聯系管理員！'})}}).fail(function (err) {swal({type: 'error',title: '錯誤提示',text: '權限數據加載失敗，請重新嘗試！'})}); }

后臺代碼

獲取樹形結構的請求接口

?

@Description("獲取架構樹形結構")@RequestMapping(value = "/doListOrgRecursion.do", method = RequestMethod.POST)@ResponseBodypublic Json doListOrgJsTree(String selectedId,String IsOpened){try {ResultDTO resultDTO = this.mSysEnterpriseOrgService.doListOrgJsTree(selectedId,IsOpened);return Json.getInst().success(resultDTO.getData());} catch (Exception e) {Log.getInst(this).debug("架構Tree",e);return Json.getInst().fail();}}

其中Json是封裝的json請求類

package com.ws.sys.vo;import lombok.Data;import java.io.Serializable;@Data public class Json implements Serializable {//默認未失敗狀態private static Json instance;private String msg = "接口訪問失敗";private String title = "失敗提示";private boolean status = false;private int code = 300;private Object data = null;public synchronized static Json getInst() {if(instance==null){instance = new Json();}return instance;}public Json() {super();}public Json success(Object data){this.title = "成功提示";this.msg = "接口訪問成功";this.status = true;this.code = 200;this.data = data;return this;}public Json success(){this.title = "成功提示";this.msg = "接口訪問成功";this.status = true;this.code = 200;this.data = null;return this;}public Json fail(Object data){this.title = "失敗提示";this.msg = "接口訪問失敗";this.status = false;this.code = 300;this.data = data;return this;}public Json fail(){this.title = "失敗提示";this.msg = "接口訪問失敗";this.status = false;this.code = 300;this.data = null;return this;} }

ResultDTO是封裝的結果類

package com.ws.sys.dto;import lombok.Data;import java.io.Serializable;@Data public class ResultDTO implements Serializable{//默認未失敗狀態private static ResultDTO instance;private String msg = "數據返回失敗";private boolean status = false;private Object data = null;public synchronized static ResultDTO getInst() {if(instance==null){instance = new ResultDTO();}return instance;}public ResultDTO() {super();}public ResultDTO success(Object data){this.msg = "數據返回成功";this.status = true;this.data = data;return this;}public ResultDTO success(){this.msg = "數據返回成功";this.status = true;this.data = null;return this;}public ResultDTO fail(Object data){this.msg = "數據返回失敗";this.status = false;this.data = data;return this;}public ResultDTO fail(){this.msg = "數據返回失敗";this.status = false;this.data = null;return this;}}

具體實現類

public ResultDTO doListOrgJsTree(String selectedId,String IsOpened) {if(StringUtils.isBlank(selectedId)) {IPage<SysEnterpriseOrg> sysEnterpriseOrgIPage? = page(new Page<SysEnterpriseOrg>(0, 1), new QueryWrapper<SysEnterpriseOrg>().eq("is_delete", Constants.IS_NOT_DELETE));if (!(sysEnterpriseOrgIPage.getRecords() != null && !sysEnterpriseOrgIPage.getRecords().isEmpty()))return ResultDTO.getInst().fail();selectedId = sysEnterpriseOrgIPage.getRecords().get(0).getId().toString();}List<TreeJsonVO> treeVOList = new ArrayList<TreeJsonVO>();//查詢啟用的if(IsOpened.trim().equals("1")){treeVOList= this.baseMapper.listOrgJsTreeOpened(selectedId);}//查詢全部的if(IsOpened.trim().equals("2")){treeVOList= this.baseMapper.listOrgJsTree(selectedId);}return ResultDTO.getInst().success(treeVOList);}

其中TreeJsonVO是封裝的樹型數據類

package com.ws.sys.vo;import com.fasterxml.jackson.annotation.JsonIgnoreProperties; import lombok.Data; import lombok.NoArgsConstructor;import java.io.Serializable;@Data @NoArgsConstructor @JsonIgnoreProperties({ "handler","hibernateLazyInitializer" }) public class? TreeJsonVO implements Serializable {// 主鍵private String id;// 父類主鍵private String parent;// 圖標private String icon;// 名稱private String text;// 編碼private String code;/*** 跳轉地址*/private String url;/*** 等級（權限的層次等級）*/private Integer permissionLevel;/*** 類型（用來區分菜單0和按鈕操作1）*/private Integer permissionType;/*** 屬性菜單的折疊狀態（0折疊，1展開）*/private Integer foldState;private String selectedId;// 是否打開private TreeJsonStateVO state; }

執行查詢的sql部分

?<!--查詢全部的--><select id="listOrgJsTree" resultMap="menuMap">SELECTid,ISNULL(CAST (pid AS VARCHAR ( 50 )),CAST ('#' AS VARCHAR ( 50 ))) parent,icon,text,num,org_classify,is_top_level, CASEWHEN id =#{selectedId} THEN1 ELSE 0END selected,opened,disabled,creator,modifier FROMsys_enterprise_org WHEREis_delete = 0 ORDER BYid ASC</select><!--查詢啟用的--><select id="listOrgJsTreeOpened" resultMap="menuMap">SELECTid,ISNULL(CAST (pid AS VARCHAR ( 50 )),CAST ('#' AS VARCHAR ( 50 ))) parent,icon,text,num,org_classify,is_top_level,CASEWHEN id =#{selectedId} THEN1 ELSE 0END selected,opened,disabled,creator,modifierFROMsys_enterprise_orgWHEREis_delete = 0 and opened = 1ORDER BYid ASC</select>

數據庫設計

根據每條記錄的pid（負極節點ID）字段來區分分支關系。

?

總結

以上是生活随笔為你收集整理的SpringBoot+Jquery+jsTree实现页面树型结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。