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

场景

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

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

效果

实现

前提

已经搭建完jsTree的引入之后，能正常显示树形结构以及详情明细的情况V下，实现点击编辑也能

选择树形结构并能更改。

点击编辑显示弹窗

在同一个页面设置添加和编辑共用的页面隐藏。

        

            

                

                    ×Close
                    
                    
添加架构
                    
                
                

                    

                        

                            
                            
                           
                            
                            

                                架构名称
                                
                            
                            

                                架构排序
                                
                            
                            

                                架构图标
                                
                            
                            

                                架构编号
                                
                            
                            
架构分类
                                
                                   集团
                                   公司
                                   工厂
                                   部门
                                   岗位
                                
                            

                            
是否展开
                                
                                   折叠
                                   展开
                                
                            

                            
是否是顶级
                                
                                   是
                                   否
                                
                            
                            

                                归属机构
                                
                                
                                
                                

                            
                            

                                备注
                                
                            
                        
                    
                    

                        取消
                        保存
                    
                
            
        
    

注：

在归属机构这里设置了几个隐藏的input框，用于获取被选中的节点的id值并在编辑后的保存时

提交到后台。

编辑按钮的点击事件

 编辑

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更改即可。