jstree的简单用法

一般我们用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) {   //节点被打开，并且动画加载完都显示

})