Javascript jstree-重命名功能问题(单击重命名后,节点上的文本输入不接受更改)
我正在使用jquery.jstree插件,唯一的问题是,在右键单击一个节点并重命名它之后,文本输入框会打开,让我输入新名称。然后我键入新名称,但文本输入的值没有改变,就像冻结一样。如果我按enter按钮,它会将相同的文本发布到服务器,但我无法修改文本输入中的值 我在firefox和chrome上都复制了这个问题。js控制台上没有警报或错误消息 此外,当我专注于树时,其他输入也不起作用,如tab按钮、ctrl+f5等 你知道这个问题吗 我的jstree代码如下:Javascript jstree-重命名功能问题(单击重命名后,节点上的文本输入不接受更改),javascript,jquery,css,jstree,Javascript,Jquery,Css,Jstree,我正在使用jquery.jstree插件,唯一的问题是,在右键单击一个节点并重命名它之后,文本输入框会打开,让我输入新名称。然后我键入新名称,但文本输入的值没有改变,就像冻结一样。如果我按enter按钮,它会将相同的文本发布到服务器,但我无法修改文本输入中的值 我在firefox和chrome上都复制了这个问题。js控制台上没有警报或错误消息 此外,当我专注于树时,其他输入也不起作用,如tab按钮、ctrl+f5等 你知道这个问题吗 我的jstree代码如下: $(function () {
$(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();
}
});
});
});
});
$(函数(){
$(“#树容器”)
.bind(“before.jstree”,函数(e,数据){
$(“#alog”).append(data.func+”
);
})
jstree先生({
//活动插件列表
“插件”:[
“主题”、“json_数据”、“ui”、“crrm”、“cookies”、“dnd”、“搜索”、“类型”、“上下文菜单”
],
//我通常先配置处理数据的插件
//本例使用JSON,因为它是最常见的
“json_数据”:{
//这棵树支持ajax,因为这是最常见的,而且可能有点复杂
//所有选项几乎与jQuery的AJAX相同(阅读文档)
“ajax”:{
//获取数据的URL
“url”:“/backoffice/categorytree/getchildren”,
//“data”函数在实例的作用域中执行
//该参数是正在加载的节点
//(加载根节点时可能为-1、0或未定义)
“数据”:功能(n){
//结果被反馈到AJAX请求'data'选项
返回{
“ParentCategoryId”:n.attr?n.attr(“id”)。替换(“节点_uu3;,”):1
};
}
}
},
//配置搜索插件
“搜索”:{
//因为这是一个常见的问题-异步搜索
//与上面相同,`ajax`config选项实际上是jQuery的ajax对象
“ajax”:{
“url”:“/backoffice/categorytree/search”,
//您可以将搜索字符串作为参数获取
“数据”:功能(str){
返回{
“搜索字符串”:str
};
}
}
},
//使用类型-大多数情况下,这是一种过度使用
//仔细阅读文档以决定是否需要类型
“类型”:{
//我将这两个选项都设置为-2,因为我不需要深度和子项计数检查
//这两个检查可能会大大降低jstree的速度,因此仅在需要时使用
“最大深度”:-2,
“max_儿童”:-2,
//我只希望'drive'节点是根节点
//这将阻止将任何其他类型移动或创建为根节点
“有效的_子项”:[“驱动器”],
“类型”:{
//默认类型
“默认值”:{
//我希望此类型没有子节点(因此只有叶节点)
//就我而言,这些都是文件
“有效_子项”:“无”,
//如果我们为默认类型指定一个图标,它将覆盖主题图标
“图标”:{
“图像”:http://www.jstree.com/static/v.1.0pre/_demo/file.png"
}
},
//“文件夹”类型
“文件夹”:{
//其中可以包含文件和其他文件夹,但不能包含“驱动器”节点
“有效的子项”:[“默认”,“文件夹”],
“图标”:{
“图像”:http://www.jstree.com/static/v.1.0pre/_demo/folder.png"
}
},
//“驱动器”节点
“驱动器”:{
//可以包含文件和文件夹,但不能包含其他“驱动器”节点
“有效的子项”:[“默认”,“文件夹”],
“图标”:{
“图像”:http://www.jstree.com/static/v.1.0pre/_demo/root.png"
},
//它们阻止在“drive”节点上使用同名函数
//内部使用“before”事件
“开始拖动”:false,
“移动节点”:false,
“删除_节点”:false,
“移除”:false
}
}
},
//UI&core-最初选择并打开的节点将被cookie插件覆盖
//UI插件-它处理选择/取消选择/悬停节点
“用户界面”:{
//这将使ID为node_4的节点被选中为onload
“初始选择”:[“节点4”]
},
//核心插件-这里没有太多选项
“核心”:{
//打开这两个节点
//由于这是一个支持AJAX的树,因此这两个树都将从服务器下载
“初始打开”:[“节点2”、“节点3”]
}
})
.bind(“create.jstree”,函数(e,数据){
美元邮政(
“/backoffice/categorytree/createtreeitem”,
{
“id”:data.rslt.parent.attr(“id”).replace(“node_”),“”,