樹節點數據改變,通過js刷新jstree樹,提示找不到Render.jstree({。。。。。。}).jstree(true);方法的問題

    使用公司封裝的前端框架FUI,做樹目錄相關業務時,需求是更換樹版本,jstree樹節點數據改變,不重新加載頁面的情況下,ajax異步請求,局部刷新整個樹。


html:
<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="portlet light bordered">
    <div class="portlet-title">
        <div class="row">
            <div class="col-md-3" style="padding-left:0px;padding-right:5px;">
                <div class="portlet light bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-user"></i><span class="caption-subject font-blue sbold uppercase">組織樹版本管理</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="tree-user"></div>
                    </div>
                </div>
            </div>

            <div class="mask-text">
                <form id="sfrom">
                    <div class="col-md-3">
                        <div class="input-icon">
                            <select id="versionid" class="form-control">
                                <option value="" >----請選擇----</option>
                                <c:forEach items="${versionList}" var="item" varStatus="status" step="1">
                                    <option value="${item.id}" >${item.createdate}--${item.content}</option>
                                </c:forEach>
                            </select>
                            <div class="form-control-focus"></div>
                        </div>
                    </div>
                </form>
                <a href="javascript:;" id="btnUpdateVersion"  class="btn blue btn-sm" >
                    <i class="fa fa-plus"></i> 更換版本
                </a>
                <a href="javascript:;" id="btnDeleteVersion"  class="btn red btn-sm" >
                    <i class="fa fa-trash"></i> 刪除備份版本
                </a>
            </div>
        </div>
    </div>
</div>
js:
<script type="text/javascript" charset="utf-8">
    //初始化組織樹
    function init(treedata) {
        var name = "";
        var indexCode = "";
        if(treedata != null && treedata != '' && treedata != "undefined"){
            name = treedata.name;
            indexCode = treedata.indexCode;
        }else{
            name = "${treedata.name}";
            indexCode = "${treedata.indexCode}";
        }
        Render.jstree({
            id    : "#tree-user",
            url       : "../VideoChecking/tree.data",
            root   : name,
            fstsel : {id: "0"},
            data    :{cameraflag:"false",rootid:indexCode},
            click  : function(node){
                Redirect.forward.htmlFile({
                    "eid": "tbList-camera",
                    "url": "../apply/initList.do",
                    "data": {
                        "parentId": node.id,
                        "categoryid":"${param.categoryid}"
                    }
                });
            }
        }).jstree(true);
        $("#tree-user").css({height:$(window).height()-300,overflow:"auto"});
    }

    //刷新組織樹和下拉版本選擇框
    function refreshTree(){
        $.ajax({
            url: "../interFace/refreshTree.do",
            type: "POST",
            data: {},
            success: function (result) {
                //重新加載組織樹
                $.jstree.destroy ();    //清空節點,從 DOM 中刪除 jstree 的所有痕跡,並銷燬所有的實例。
                init(result.treedata);
                //重新加載版本下拉框
                $("#versionid").empty();    //清空節點
                var option = "<option value=''>---請選擇---</option>";
                for(var i = 0;i<result.versionList.length;i++){
                    option = option + "<option value='"+result.versionList[i].id+"'>"+result.versionList[i].createdate+"--"+result.versionList[i].content+"</option>";
                }
                $("#versionid").append(option);
            }
        });
    }

    $(function(){
        $("#btnUpdateVersion").click(function(){
            var versionid = document.getElementById("versionid").value;
            if(versionid==""){
                messager.toastr.error("提 示", "請選擇需要更換的版本!");
            }else{
                $.ajax({
                    url: "../interFace/updateTreeVersion.do",
                    type:"POST",
                    data: {
                        "versionid":versionid
                    },
                    success: function(result) {
                        refreshTree();  //局部刷新頁面數據
                        if(result.success==true){
                            messager.toastr.success("提 示", result.message);
                        }else{
                            messager.toastr.error("提 示", result.message);
                        }
                    }
                });
            }
        })
    })

    //刪除備份表版本樹信息
    $(function(){
        $("#btnDeleteVersion").click(function(){
            var versionid = $("#versionid").val();
            if(versionid==""){
                messager.toastr.error("提 示", "請選擇需要刪除的版本!");
            }else{
                messager.confirm("操作提示", "確定要刪除該版本的備份嗎!",function (data) {
                    if(data){
                        $.ajax({
                            url: "../interFace/deleteTreeVersion.do",
                            type:"POST",
                            data: {
                                "versionid":versionid
                            },
                            success: function(result) {
                                refreshTree();  //局部刷新頁面數據
                                messager.sweet.success("提 示", result.message);
                            }
                        });
                    }
                });
            }
        })
    })
    init();
</script>

    後臺操作原理:兩張表,一張樹數據表,一張備份樹數據表,更換版本時,將備份表中指定版本的樹數據更新到樹表中即可。

問題:再次調用這個加載樹的ajax時報錯,無刷新效果

原因:jstree組織樹實例化一次後,需要銷燬實例,才能再次創建jstree樹

解決:在重新請求jstree樹數據之前銷燬之前創建的實例

$.jstree.destroy ();    //清空節點,從 DOM 中刪除 jstree 的所有痕跡,並銷燬所有的實例。

附:jstree API中文文檔(https://download.csdn.net/download/cling_snail/11783563

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章