JSTREE - 重命名功能问题(单击重命名后,节点上的文本输入不接受更改)
jstree - rename functionality issue (text input on node, after clicking rename, does not accept changes)
我正在使用jquery.jstree插件,唯一的问题是右键单击节点并重命名后,文本输入框打开让我输入新名称。然后我输入新名称,但文本输入的值没有变化,就像冻结一样。如果我按回车按钮,它会将相同的文本发布到服务器,但我无法修改文本输入中的值。
我在火狐和铬上重现了这个问题。js 控制台上没有警报或错误消息。
此外,当我专注于树时,其他输入也不起作用,例如选项卡按钮、ctrl+f5 等。
对这个问题有任何想法吗?
我的jstree代码如下:
$(function () {
$("#tree-container")
.bind("before.jstree", function (e, data) {
$("#alog").append(data.func + "<br />");
})
.jstree({
// List of active plugins
"plugins": [
"themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "contextmenu"
],
// I usually configure the plugin that handles the data first
// This example uses JSON as it is most common
"json_data": {
// This tree is ajax enabled - as this is most common, and maybe a bit more complex
// All the options are almost the same as jQuery's AJAX (read the docs)
"ajax": {
// the URL to fetch the data
"url": "/backoffice/categorytree/getchildren",
// the `data` function is executed in the instance's scope
// the parameter is the node being loaded
// (may be -1, 0, or undefined when loading the root nodes)
"data": function (n) {
// the result is fed to the AJAX request `data` option
return {
"ParentCategoryId": n.attr ? n.attr("id").replace("node_", "") : 1
};
}
}
},
// Configuring the search plugin
"search": {
// As this has been a common question - async search
// Same as above - the `ajax` config option is actually jQuery's AJAX object
"ajax": {
"url": "/backoffice/categorytree/search",
// You get the search string as a parameter
"data": function (str) {
return {
"SearchString": str
};
}
}
},
// Using types - most of the time this is an overkill
// read the docs carefully to decide whether you need types
"types": {
// I set both options to -2, as I do not need depth and children count checking
// Those two checks may slow jstree a lot, so use only when needed
"max_depth": -2,
"max_children": -2,
// I want only `drive` nodes to be root nodes
// This will prevent moving or creating any other type as a root node
"valid_children": ["drive"],
"types": {
// The default type
"default": {
// I want this type to have no children (so only leaf nodes)
// In my case - those are files
"valid_children": "none",
// If we specify an icon for the default type it WILL OVERRIDE the theme icons
"icon": {
"image": "http://www.jstree.com/static/v.1.0pre/_demo/file.png"
}
},
// The `folder` type
"folder": {
// can have files and other folders inside of it, but NOT `drive` nodes
"valid_children": ["default", "folder"],
"icon": {
"image": "http://www.jstree.com/static/v.1.0pre/_demo/folder.png"
}
},
// The `drive` nodes
"drive": {
// can have files and folders inside, but NOT other `drive` nodes
"valid_children": ["default", "folder"],
"icon": {
"image": "http://www.jstree.com/static/v.1.0pre/_demo/root.png"
},
// those prevent the functions with the same name to be used on `drive` nodes
// internally the `before` event is used
"start_drag": false,
"move_node": false,
"delete_node": false,
"remove": false
}
}
},
// UI & core - the nodes to initially select and open will be overwritten by the cookie plugin
// the UI plugin - it handles selecting/deselecting/hovering nodes
"ui": {
// this makes the node with ID node_4 selected onload
"initially_select": ["node_4"]
},
// the core plugin - not many options here
"core": {
// just open those two nodes up
// as this is an AJAX enabled tree, both will be downloaded from the server
"initially_open": ["node_2", "node_3"]
}
})
.bind("create.jstree", function (e, data) {
$.post(
"/backoffice/categorytree/createtreeitem",
{
"id": data.rslt.parent.attr("id").replace("node_", ""),
"position": data.rslt.position,
"title": data.rslt.name,
"type": data.rslt.obj.attr("rel")
},
function (r) {
if (r.status) {
$(data.rslt.obj).attr("id", "node_" + r.id);
}
else {
$.jstree.rollback(data.rlbk);
}
}
);
})
.bind("remove.jstree", function (e, data) {
data.rslt.obj.each(function () {
$.ajax({
async: false,
type: 'POST',
url: "/backoffice/categorytree/removetreeitem",
data: {
"id": this.id.replace("node_", "")
},
success: function (r) {
if (!r.status) {
data.inst.refresh();
}
}
});
});
})
.bind("rename.jstree", function (e, data) {
$.post(
"/backoffice/categorytree/renametreeitem",
{
"id": data.rslt.obj.attr("id").replace("node_", ""),
"title": data.rslt.new_name
},
function (r) {
if (!r.status) {
$.jstree.rollback(data.rlbk);
}
}
);
})
.bind("move_node.jstree", function (e, data) {
data.rslt.o.each(function (i) {
$.ajax({
async: false,
type: 'POST',
url: "/backoffice/categorytree/movetreeitem",
data: {
"id": $(this).attr("id").replace("node_", ""),
"ref": data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("node_", ""),
"position": data.rslt.cp + i,
"title": data.rslt.name,
"copy": data.rslt.cy ? 1 : 0
},
success: function (r) {
if (!r.status) {
$.jstree.rollback(data.rlbk);
}
else {
$(data.rslt.oc).attr("id", "node_" + r.id);
if (data.rslt.cy && $(data.rslt.oc).children("UL").length) {
data.inst.refresh(data.inst._get_parent(data.rslt.oc));
}
}
$("#analyze").click();
}
});
});
});
});
这是因为我添加了旧版本的jquery.hotkeys插件。使用jstree下载附带的文件后,该问题已得到修复。
相关文章:
- 正在使用Dropzone.js删除服务器上已重命名的文件
- Angular重命名模块后未能实例化模块
- 如何使用laravel重命名已存储在服务器中的文件
- 如何使用外部Javascript库(如jQuery)重命名Google闭包样式表
- lodash:重命名对象中的键
- 阻止对的关闭重命名对象键
- gulp重命名多个文件
- Ckfinder在上传之前重命名图像
- 为什么 Google 闭包编译器会重命名对象的属性名称
- 使用 javascript 重命名数组中的对象键
- JSnice如何进行统计重命名,重命名Javascript变量
- 使用 gruntjs 自定义初始化任务重命名模板文件夹
- 重命名上传的文件Ruby On Rails
- 我正在尝试将javascript文本框的输入保存回服务器.我想从保存的弹出文本框中获得输入,以重命名文件夹
- JSTREE - 重命名功能问题(单击重命名后,节点上的文本输入不接受更改)
- 通过PHP将Javascript动态HTML输入POST(每个添加的输入都需要重命名字段's)
- 使用regex重命名输入
- 正确重命名克隆的输入JQuery
- 用输入文本字段的值重命名PHP文件
- 通过从弹出框中获取输入来重命名对象