SpringBoot+JsTree实现在编辑时能选择树形结构并获取选中的ID

场景

SpringBoot+Jquery+jsTree实现页面树型结构：

效果

实现

前提

已经搭建完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">×</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更改即可。