使用公司封裝的前端框架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)