jstree用于编辑值的节点

Question

我正在构建一个jstree，其节点标题由产品类别（比如'cars'）组成，除了那个标题（'cars'）之外，还包含一个带有价格的输入框（可修改）和三个按钮将命令发送到服务器和客户端上的一些JS，可以执行“删除”，“保存”和“添加新”功能。 （我会对布局进行描述，但不要认为这会增加问题的清晰度，但请告诉我。）

由于我正在使用JSON插件并从数据库中提取树，因此我从服务器发送数据，到目前为止，我已设法将html添加到数据中。这呈现了我想要的布局，但由于每个都在标签内部，所以当我点击输入框（例如：屏幕转到顶部）或者当我尝试捕获点击事件时，我会遇到令人讨厌的问题按钮。

有人可以用jstree以正确的方式指出我吗？我已经在论坛和文档上爬了超过3天了，开始相信我的大脑已经在很久以前就已经熟了，只是注意到了它。 ：）

一些（汇总和“伪”）代码：

class NewNode
    {
    var $data;
    var $attr;
    var $state;
    var $children;
    var $metadata;
    }

以后......

$NNode = new (NewNode);
$NNode->data = 'the-price-category-from-my-database';   <-- pretty much pseudo code here...
$NNode->attr['value'] = 'the-price';            <-- pretty much pseudo code here...

$htm = "<div style='position:relative; width:400; float:left;'>";
$htm .= "<div style='float:left; font-weight:bold; width:250px;'>";
$NNode->data = $htm . $NNode->data;
$NNode->data .= "</div>";
$NNode->data .= "<div style='width:100px; float:left; text-align:right;'>";
$NNode->data .= "$<input type='text' value='" . $NNode->attr['value'] . "'width='20%' style='width:50px; text-align:right;'/>";
$NNode->data .= "<button class='btn_save_price'>&nbsp;</button>";                
$NNode->data .= "<button class='btn_new_price'>&nbsp;</button>";                
$NNode->data .= "<button class='btn_delete_price'>&nbsp;</button>";                
$NNode->data .= "</div>";
$NNode->data .= "</div>";

$MyTree->children[] = $NuevoNodo;

就是这样......

die(json_encoed($MyTree))

再次感谢。

Answer 1

首先 - 欢迎来到SO。发布代码段时，请使用代码标记格式化代码 我也认为截图有助于澄清事情 对你的问题 - 我认为在树节点内放置文本框，按钮等控件并不是真正的标准 考虑使用不同的面板来控制这些控件（参见附图（删除的细节以避免适当的问题）我使用jsTree进行编辑的方式）。

此外 - 当您在服务器端创建JSON数据时，您在所选的jQuery插件和服务器端代码之间创建紧密耦合。
这意味着如果你决定从jQuery切换到另一个框架，甚至从jsTree切换到另一个插件 - 你的服务器代码将不得不改变。
理想情况下，您希望UI中的更改仅限于UI层。

我在项目中做的是从服务器端检索常规对象，并在客户端将它们转换为jsTree格式。这样，如果UI方面发生任何变化，只需更改js代码。