jstree动态添加节点时怎么刷新

var UITree = function () {

var contextualMenuSample = function() {

$.jstree.destroy ("#tree_3")

$('#tree_3').jstree({

"core" : {

"themes": {

"responsive": false

},

"check_callback": true,

"force_text": true,

"cache": false,

'state':open,

'data': {

"url": function() {

return "/authority/showOnlyTheme"

},

"data":function(node){

return {"id" : node.id}

}

}

},

"plugins": [ "contextmenu", "ui"]

/*'contextmenu':{

'items':{

'edit':null

}

}*/

}).bind("loaded.jstree", function () {

jQuery("#tree_3").jstree("open_all")

}).bind("create_node.jstree",function(event,data){

createCategory(event,data)

}).bind("rename_node.jstree",function(event,data){

rename(event,data)

}).bind("delete_node.jstree",function(event,data){

reMove(event,data)

})

}

return {

init: function () {

contextualMenuSample()

}

}

function createCategory(event,data){

var str = data.parent

var parentId = str.substring(1)

if(!str.match(/^c\d+/g)){

parentId = -1

}

var newNodeName = data.node.text

var params = {"parentId":parentId,"name":newNodeName,"rootId":parentId}

$.ajax({

'url':"/categoryManager/addOrUpdate",

'type':"post",

'dataType':'json',

'cache':false,

'data':params,

'timeout':1000*10

}).done(function(json){

var id = data.node.id

var categoryId = json.data

$(data.node).attr("id",categoryId)//此处修改成后台返回的id

}).fail(function(e){

Metronic.unblockUI()

alert("亲出错了，请稍后再试")

})

}

function rename(event,data) {

var str = data.node.id

if(str.match("#")) {

alert("不能修改根节点")

return

}

var id = str.substring(1)

var name = data.text

var params = {"id":id,"name":name}

$.ajax({

'url':'/categoryManager/updateName',

'type':'post',

'dataType':'json',

'data':params,

'cache':false,

'timeout':1000*10

}).fail(function(){

Metronic.unblockUI()

alert("亲出错了，请稍后再试~")

})

}

function reMove(event,data) {

var str = data.node.id

if(str.match("#")) {

alert("亲，不能删除根节点")

return

}

var id = str.substring(1)

var params = {"id":id}

$.ajax({

'url':"/categoryManager/del",

'type':"post",

'dataType':"json",

'data':params,

'cache':false,

'timeout':1000*10

}).done(function(json){

if(json.ret==false) {

alert(json.errmsg)

}

}).fail(function(json){

Metronic.unblockUI()

alert("亲出错了，请稍后再试~")

})

}

}()

JsTree是一个基于JQuery的框架，实现简单，功能比较齐全。项目中急于修改树控件，现学现卖，实现了简单的功能，仅包含异步加载，动态设置节点样式图标，靠着自己看帮助文档，多次尝试一步步完成。

1. 实现异步加载

$("#tvBox").tree({

data : {

async : true,

type : "xml_flat",

[color=red]opts : {

url : URL

}

},

types : {

"default" : {

renameable : false,

deletable : false,

creatable : false,

draggable : false

}

},

ui:{

theme_name : "classic"

},

callback : {

beforedata : function(NODE, TREE_OBJ) {

setParams(NODE, TREE_OBJ)// 获取参数信息

//向服务器传递参数

return { type : type_id, dyj : dyj_id, bdz : bdz_id, jg : jg_id, ept : ept_id }

},//end beforedata

onselect : function(NODE, TREE_OBJ) { // 单击函数，点击设备节点名称的时候在右边显示信息

setParams(NODE, TREE_OBJ)// 获取参数信息

var ids = $(NODE).attr("id").split("-")

// alert(ids[6])

var subType = ids[1]

var dydj = ids[2]

//alert(type_id+" -- "+ept_id)

var nodeParam="type="+type_id+"&subType="+subType+"&bdz="+bdz_id+"&dydj="+dydj+"&ept="+ept_id

if (type_id == EptType.dyj) {//点击的是电业局节点

var dyj_url = "pages/omds/ept/dyj/dyj.jsp?dyj="+dyj_id+"&"+nodeParam

//alert(dyj_url+" -- "+dyj_name)

top.doCreateTabItem(dyj_url,

dyj_name,

dyj_url+"&random="+Math.random(),

dyj_name)//在'主页'标签中显示

}

}, //end onselect

// 只在树第一次加载的时候调用

onload : function(TREE_OBJ) {

$("#tvBox ul li a:first-child ins").hide()//电业局节点不显示图标

}

}// end callback

})// end tree()

JsTree支持多种格式的数据源，这里使用了xml格式，其实json格式更好。data中代码即可实现异步加载，通过设置UI参数可以修改主题，callback参数可以对一些事件作出响应，如beforedata可以在发送异步请求之前添加url参数，onselect可以响应生成的树中节点的单击事件，还有open在节点被打开的时候被调用，等等，可以帮助实现很多功能……

--1 碰到比较麻烦的事情是展开子节点向后台传递参数时需要用到父节点的id等信息，需要用到parent函数。

--2 另外，当展开一个节点从后台没有查询到子节点时需要返回<root></root>，不能使<root>,我当时用jdom生成xml碰到后者，出现了问题。

--3 callback中的事件需要自己去尝试才能知道什么时候被触发

2. 实现节点换肤

项目中涉及到得是电业局--变电站--间隔--设备，对于后三者节点图标必须与其状态对应，且状态是动态的，所以需要后台在生成xml的时候设置icon属性

如果需要用原生js动态的加载另外一个js文件，可以使用原生js的document.createElement方法创建script节点，然后更改该节点的type和src属性,最后通过appendChild方法将该节点动态添加到html中，这样就可以了，参考代码如下：

var new_element = document.createElement("script")//创建新的script节点new_element.setAttribute("type", "text/javascript")new_element.setAttribute("src", "../js/jquery.js")document.body.appendChild(new_element)//添加到body节点的末尾

上例中是在body的最末尾添加的，当然同样可以在head中添加引用该js的标签：document.head.appendChild(new_element)

---