jstree 动态增加节点问题

SavantStart 2015-10-05 12:06:32
最近再做一个项目需要用到jstree来做树形展示,在进行动态添加子节点的时候,jstree,那个create_node.jstree事件,一点击就异步到后台,但是此时的node名称还没有修改,修改node名称之后,回车就触发rename_node事件,那么问题来了,此时jstree自动生成的节点id是随机生成的,跟我数据中要的id不一样,这时我就在create_node事件中做回调,得到后天返回的节点id,然后用$(data.node.attr("id",后台返回的id)),给他换了,然后就出问题了,数据库中可以修改成功,但是前提会失败,刷新之后才正常显示,研究了很久,也没出来,请懂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("亲出错了,请稍后再试~");
})

}





}();



...全文
9114 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
jdong001 2017-03-29
  • 打赏
  • 举报
回复
我也遇到了类似问题,jstree版本为3.3.3,在返回json数据时增加“response.setContentType("application/json; charset=utf-8");”可以解决此问题。
hsj1213522415 2017-03-21
  • 打赏
  • 举报
回复
请问楼主解决了吗,同样遇到这个问题
dtrink1 2017-01-17
  • 打赏
  • 举报
回复
可以参考一下这个思路,重新加载jstree架构 https://www.ip21.cn/2016/04/jstree更改内容后仅刷新jstree的dom结构/
wwei466 2016-06-13
  • 打赏
  • 举报
回复
楼主找到解决方案了吗
重拾jA 2015-12-20
  • 打赏
  • 举报
回复
你好 最近也在研究jstree,想请教一下 有没有直接新建node并且编辑了正确的nodename之后,才触发的方法
孟子E章 2015-10-05
  • 打赏
  • 举报
回复
创建节点,一般都是ajax执行,不刷新页面的。 官网的demo https://www.jstree.com/demo/
SavantStart 2015-10-05
  • 打赏
  • 举报
回复
没人啊,都玩去了吗啊

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧