一般我们用jstree主要实现树的形成，并且夹杂的邮件增删重命名刷新的功能
下面是我在项目中的运用，采用的是异步加载
$('#sensor_ul').data('jstree', false).empty();//先销毁清空
function getSensors(){
$("#sensor_ul").jstree({
"core" : {
"animation" : 0,
"check_callback" : true,
"themes" : {
"theme" : "classic",
"dots" : true,
"icons" : true,
"stripes" : true
},
'data':{
'url':function(node){
if(node.id === '#'){//异步加载
return root+"/jsPlumb1/getDeviceTreeRoot";
}else{
return root+"/jsPlumb1/getDeviceTreeChild/"+node.id;
}
},
'data':function (node){
if(node.id === '#'){
return{
'id':node.id
}
}else{
return{
'id':node.original.id,
'a_attr':node.original.a_attr 自定义属性放在这里或者li_attr，让后台给你返回来
};
}
}
}
},
"types" : {
"#" : {
"max_children" : 1,
"max_depth" : 10000,
"valid_children" : []
},
"deviceTreeDatasource":{
"icon": "assets/tree/chart_organisation.png",
"valid_children" : ['deviceTreeDatapoint']
},
"deviceTreeDatapoint":{
"icon": "assets/tree/Electricity_Error.png",
"valid_children" : []
}
},
"checkbox" : {
"keep_selected_style" : false,
"real_checkboxes" : true
},
"plugins" : [
"state", "search", "types", "wholerow","checkbox","contextmenu","search"
],
"contextmenu": {
"items": {
"create": null,
"ccp": null,
"remove": {
"label": "删除设备",
"icon": "assets/tree/action_delete.gif",
"action": function(data) {
layer.open({
content: '确定要删除此设备？删除后不可恢复。'
,btn: ['是', '取消']
,resize:false
,yes: function(index, layero){
layer.close(index);
var ref = $('#sensor_ul').jstree(true);//获得整个树
nodeidArr = ref.get_selected(); //获得所有选中节点，返回值为数组
$.ajax({
async: true,
type: 'post',
url:root+"/VirtualPoint/deleteVirtualUnit",
dataType: 'json',
data: {
nodeidArr:nodeidArr
},
success: function(data) {
// alert(typeof data.names);
if(data.names == null){
jQuery("#sensor_ul").jstree("refresh");
layer.msg("删除设备成功！",{icon:1,time:1500});
}else{
layer.msg(data.names+"设备删除失败！",{icon:5,time:1500});
}
}
});
},btn2: function(index, layero){
//按钮【按钮二】的回调
layer.close(index);
//return false 开启该代码可禁止点击该按钮关闭
},cancel: function(){
//右上角关闭回调
layer.close();
//return false 开启该代码可禁止点击该按钮关闭
}
})
}
},
"rename": {
"label": "重命名设备",
"icon": " assets/tree/edit.gif",
"action":function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.edit(obj);
}
},
"refresh": {
"label": "刷新设备",
"icon": " assets/tree/arrow_refresh.png",
"action":function (data) {
jQuery("#sensor_ul").jstree("refresh");
}
},
}
}
});
$('#sensor_ul').on("rename_node.jstree",function(e,d){
var oldName = d.old;
var newName = d.text;
var nodeId = d.node.id;
var parentnodeId = d.node.parent;
var datapointId = d.node.a_attr.source;
$.ajax({
async: true,
type: 'post',
url:root+"/VirtualPoint/updateVirtualUnit",
dataType: 'json',
data: {
nodeId:nodeId,
datapointId:datapointId,
newName:newName
},
success: function(data) {
if(data.success == "1"){
layer.msg("重命名设备成功！",{icon:1,time:1500})
jQuery("#sensor_ul").jstree("#"+parentnodeId);
// jQuery("#sensor_ul").jstree("refresh");
}else if(data.success == "0_1"){
layer.msg("获取请求参数失败！",{icon:5,time:1500})
}else{
layer.msg("重命名失败！",{icon:5,time:1500})
}
}
});
});
$('#sensor_ul').on("after_open.jstree", function (e, data) { //节点被打开，并且动画加载完都显示
})