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

蔚落 2023-10-18 19:23 115阅读 0赞

## 场景 ##

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/90897251][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_90897251]

### 效果 ###

![Image 1][]![20190605113432601.gif][]

## 实现 ##

### 前提 ###

已经搭建完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= "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值并在编辑后的保存时

提交到后台。

编辑按钮的点击事件

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

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_90897251]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90897251
[Image 1]: 
[20190605113432601.gif]: https://img-blog.csdnimg.cn/20190605113432601.gif