場景

SpringBoot+Jquery+jsTree實現頁面樹型結構：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90897251

效果

實現

前提

已經搭建完jsTree的引入之后，能正常顯示樹形結構以及詳情明細的情況V下，實現點擊編輯也能

選擇樹形結構并能更改。

點擊編輯顯示彈窗

在同一個頁面設置添加和編輯共用的頁面隱藏。

<div class="modal inmodal" id="orgAddModel" tabindex="-1" role="dialog"? aria-hidden="true"><div class="modal-dialog modal-lg" id="addDiv" th:fragment="addDiv"><div class="modal-content animated fadeIn"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><i class="fa fa-plus-circle modal-icon pl-1p75"></i><h4 class="modal-title" th:text="${orgAddTitle}">添加架構</h4><small><span th:text="${orgAddName}"></span></small></div><form id="orgAdd"? role="form" action=""><div class="modal-body"><div class="form-row"><input type="hidden" class="form-control" name= "id"th:value="${sp==null?'':sp.id}"/><input type="hidden" class="form-control" name="op" th:value="${op}"/><!-- <input type="hidden" class="form-control" name= "orgLevel"th:value="${sp==null?'':sp.orgLevel}"/>--><input type="hidden" class="form-control" name= "pid"th:value="${sp==null?'':sp.pid}"/><div class="form-group col-md-4"><label>架構名稱</label><input type="text" placeholder="請輸入架構名稱" class="form-control" name= "text"th:value="${sp==null?'':sp.text}"/></div><div class="form-group col-md-4" th:if="${sp} ne null"><label>架構排序</label><input type="number" placeholder="請輸入排序號碼" class="form-control" name= "sortNum"onkeyup="this.value= this.value.replace(/\D/g,'')"onafterpaste="this.value= this.value.replace(/\D/g,'')"th:value="${sp==null?'':sp.sortNum}"/></div><div class="form-group col-md-4"><label>架構圖標</label><input type="text" placeholder="請輸入圖標信息" class="form-control" name= "icon"th:value="${sp==null?'':sp.icon}"/></div><div class="form-group col-md-4"><label>架構編號</label><input type="text" placeholder="請輸入架構編號" class="form-control" name= "num"th:value="${sp==null?'':sp.num}"/></div><div class="form-group col-md-4"><label>架構分類</label><select class="form-control m-b" name="orgClassify"><optionth:selected="${sp==null?true:0==sp.orgClassify ? true:false}" value="0">集團</option><optionth:selected="${sp==null?false:1==sp.orgClassify ? true:false}" value="1">公司</option><optionth:selected="${sp==null?false:2==sp.orgClassify ? true:false}" value="2">工廠</option><optionth:selected="${sp==null?false:3==sp.orgClassify ? true:false}" value="3">部門</option><optionth:selected="${sp==null?false:4==sp.orgClassify ? true:false}" value="4">崗位</option></select></div><div class="form-group col-md-4"><label>是否展開</label><select class="form-control m-b" name="opened"><optionth:selected="${sp==null?true:0==sp.opened ? true:false}"value="0">折疊</option><optionth:selected="${sp==null?true:1==sp.opened ? true:false}" value="1">展開</option></select></div><div class="form-group col-md-4"><label>是否是頂級</label><select class="form-control m-b" name="isTopLevel" id="isTopLevel"><optionth:selected="${sp==null?true:1==sp.isTopLevel ? true:false}"value="1">是</option><optionth:selected="${sp==null?true:0==sp.isTopLevel ? true:false}" value="0">否</option></select></div><div class= "form-groupcol-md-4"th:if="${sp!=null && sp.isTopLevel==0}"><label>歸屬機構</label><input id="belong_org_id" type="hidden" name="belongOrgId"/><input id="belong_org_ids" type="hidden" name="belongOrgIds"/><input id="belong_org_des" type="text" readonly placeholder="請選擇一項歸屬機構" class="form-control" name= "belongOrgDes"th:value="${rm==null || rm.sysRole ==null?'':rm.sysRole.remark}"/><div id="belong_org_jstree"></div><div class="form-group col-md-4"><label>備注</label><textarea? rows="4" placeholder="請輸入備注" class="form-control" name= "remark"th:text="${sp==null?'':sp.remark}"></textarea></div></div></div><div class="modal-footer"><button type="button" class="btn btn-white" data-dismiss="modal">取消</button><button type="submit" class="btn btn-primary">保存</button></div></form></div></div></div> </div>

注：

在歸屬機構這里設置了幾個隱藏的input框，用于獲取被選中的節點的id值并在編輯后的保存時

提交到后臺。

編輯按鈕的點擊事件

<button class="btn btn-info " type="button" onclick="orgEdit()"><i class="fa fa-paste"></i> 編輯</button>

js代碼

// 編輯操作 function orgEdit() {//獲取選中的節點var ref = $('#org_tree').jstree(true),sel = ref.get_selected();//如果為空，則提示請選擇if(!sel.length) {swal({type: 'error',title: '錯誤提示',text: '請選擇一個架構！'})return false;}sel = sel[0];var url = '/sysEnterpriseOrg/orgAdd.do';//將選中的節點以及標識為編輯的標識變量傳遞到后臺var data = {"id":sel,"op":"editAction"};//編輯的modal框加載要編輯數據，根據傳遞的選中的節點的id$('#addDiv').load(url, data, function () {//加載編輯頁面的歸屬結構的樹形結構var ajaxUrl = "/sysEnterpriseOrg/doListOrgRecursion.do";$.post(ajaxUrl,data).done(function (res) {if(res.status){//設置歸屬機構的樹形結構$('#belong_org_jstree').data('jstree', false).empty();$('#belong_org_jstree').jstree({'core':{'data': res.data,"multiple": false,//單選"themes": {"responsive": false}},"checkbox" : {"keep_selected_style" : false,"three_state":false,"cascade":"undetermined"},"plugins" : [ "checkbox","changed" ]}).on("changed.jstree", function (e, data,node) {var undeterminedsArr =$("#belong_org_jstree").jstree(true).get_undetermined(); //使用get_checked方法var checkedArr = $("#belong_org_jstree").jstree(true).get_checked();choseOrgArr = undeterminedsArr.reverse().concat(checkedArr);choseOrgTextArr = [];choseOrgIdsArr = [];choseOrgArr.forEach(function (value,index,array) {var text = $("#belong_org_jstree").jstree(true).get_node(value).text;var id = $("#belong_org_jstree").jstree(true).get_node(value).id;var textArr = text.split("(");choseOrgTextArr.push(textArr[0]);choseOrgIdsArr.push(id);})$("#belong_org_des").val(choseOrgTextArr.join("/").toString());$("#belong_org_id").val(checkedArr[0]);$("#belong_org_ids").val(choseOrgIdsArr.join(",").toString());})$("#belong_org_jstree").fadeOut();$("#belong_org_des").focus(function(){$("#belong_org_jstree").fadeIn();})$("#belong_org_des").blur(function(){$("#belong_org_jstree").fadeOut();})}else{swal({type: 'warning',title: '異常提示:',text: '獲取歸屬機構數據失敗，請重新嘗試！',confirmButtonColor: "#1ab394",})}}).fail(function (err) {swal({type: 'warning',title: '異常提示:',text: '獲取歸屬機構數據異常！',confirmButtonColor: "#1ab394",})});initOrgAddFormValidate("editAction");$("#orgAddModel").modal('show');}); }

注：

在實現jsTree時數據庫中層級關系的依據是pid字段即父級節點id。

所以在編輯時改變其父節點就是要獲取最后選中的節點的id，并將其傳遞給后臺，后臺將其pid更改即可。

總結

以上是生活随笔為你收集整理的SpringBoot+JsTree实现在编辑时能选择树形结构并获取选中的ID的全部內容，希望文章能夠幫你解決所遇到的問題。

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