jstree 實現異步加載子節點

 

<!-- jsTree -->
<link rel="stylesheet" href="${ctx}/static/dists/themes/default/style.min.css" />
<script src="${ctx}/static/dists/libs/jquery.js"></script>
<script src="${ctx}/static/dists/jstree.min.js"></script>

 

------------------------------------------------------------------------------------------------------------------------------

數據格式: [{"text":"a","children":true,"id":"a","icon":"folder"}]   json對象

-------------------------------------------------------------------------------------------------------------------------

實體類對應數據格式     用於返回數據

public class StandardizedCoding {
private String id;

private String text;

private Boolean children;

private String icon;

public String getText() {
return text;
}

public void setText(String text) {
this.text = text;
}

public Boolean getChildren() {
return children;
}

public void setChildren(Boolean children) {
this.children = children;
}

public String getIcon() {
return icon;
}

public void setIcon(String icon) {
this.icon = icon;
}

public String getId() {
return id;
}

public void setId(String id) {
this.id = id;
}
}

-----------------------------------------------------------------------------------------------------------

頁面js

<style type="text/css">
#stand .folder { background:url('${ctx}/static/images/stand.png') no-repeat; }  //加載文件夾圖片

</style>

<div class="box box-warning" id="stand" style="height: 450px; overflow:auto;">

</div>

    $(function () {

$('#stand')
.jstree({
'core' : {
'data' : {
'url' : '${ctx}/stand/retrunjson',      //底層封裝url
'data' : function (node) {
return { 'id' : node.id};
}
},
},
'plugins' : ['wholerow']
})

.on("activate_node.jstree", function (obj, e) {
var id = e.node.id;
if(id.charAt(0)==4){                   //判斷字符串第一個字符是否為4      字符串下標以0開頭
$("#editcode").append(id.substring(id.indexOf("_")+1));        //點擊事件   此方法為第四層時向文本添加字符串切割下划線之后的內容  字符串操作包含頭不包含尾
}
});
var to = false;                                                         //自帶搜索功能
$('#search').click(function () {
if(to) { clearTimeout(to); }
to = setTimeout(function () {
var v = $('#searchname').val();
$('#edittree').jstree(true).search(v);
}, 250);
});

});

------------------------------------------------------------------------------------------------------------------------------------

controller方法返回數據集合

@RequestMapping("/retrunjson")
@ResponseBody
public List<StandardizedCoding> retrunsoc(Model model,
@RequestParam(value = "id", required = false,defaultValue="0") String id,        //底層封裝url傳遞的參數  id為String類型
 
HttpServletRequest request,
HttpSession session) {
List<StandardizedCoding> jsonlist =null;
//System.out.println(id);
if("#".equals(id)){                                              
jsonlist=standardizedcodingservice.selectsoclist();
}else if("1".equals(id.substring(0,1))){                                       //分割拼接的字符串    _前面為層數   后面為id   
String pid = id.substring(id.indexOf("_")+1);
int soccode = Integer.parseInt(pid);                                             //String類型id轉成需要的int類型
jsonlist=standardizedcodingservice.selecthlgtlistbysoccode(soccode);
}else if("2".equals(id.substring(0,1))){
String pid = id.substring(id.indexOf("_")+1);
int hlgtcode = Integer.parseInt(pid);
jsonlist=standardizedcodingservice.selecthltbyhlgt(hlgtcode);
}else if("3".equals(id.substring(0,1))){
String pid = id.substring(id.indexOf("_")+1);
int hltcode = Integer.parseInt(pid);
jsonlist=standardizedcodingservice.selectptbyhlt(hltcode);
}else if("4".equals(id.substring(0,1))){
String pid = id.substring(id.indexOf("_")+1);
int ptcode = Integer.parseInt(pid);
jsonlist=standardizedcodingservice.selectlltbypt(ptcode);
}
return jsonlist;
}

----------------------------------------------------------------------------------------------------------------------------------

業務邏輯層      拼接需要傳遞到前台的數據   層數+id

public List<StandardizedCoding> selectsoclist() {
List<StandardizedCoding> soclist =standardizedmapper.selectsoclist();
String id="";
for(StandardizedCoding soc :soclist){
id="1_"+soc.getId();
soc.setChildren(true);
soc.setIcon("folder");
soc.setId(id);
}
return soclist;
}