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;
}