Jquery plugins jstree节点来编辑值

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

因为我使用JSON插件并从数据库中提取树，所以我从服务器发送数据，到目前为止，我已经设法将html添加到数据中。这呈现了我想要的布局，但由于每一次都在一个标记内，因此当我单击输入框（即：屏幕转到顶部）或试图捕捉按钮上的单击事件时，我会遇到严重的问题

有人能告诉我用jstree做这件事的正确方法吗？我已经在论坛和文档上爬了三天多了，我开始相信我的大脑早就出问题了，而且我刚刚注意到了。）

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

后来

$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;

---

再次感谢。

首先-欢迎来到SO。发布代码片段时，请使用代码标签格式化代码。
另外，我确实认为截图有助于澄清问题。
对于您的问题-我认为将文本框、按钮等控件放置在树节点内并不是真正的标准。
考虑为这些控件使用不同的面板（请参阅附加图像（删除细节以避免使用适当的问题），我使用JStrue进行编辑）。

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

---

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

非常感谢您的回答，sJohnny，以及您的欢迎信息。我在代码中添加了格式，并试图添加屏幕截图，但它拒绝了我，因为我是新的（不到10）。很抱歉。关于您对设计标准的建议，我们非常感谢。我自己做了很多工作，所以同事们的输入是一笔财富。我将在代码的下一版本中实现您提出的抽象层。至于面板，看起来似乎超出了我的需要，这就是为什么我在节点中尝试了输入框。好吧，我们必须同意在面板问题上存在分歧。在这种情况下，我给你的最好建议是使用firebug或类似的工具来查看和调整呈现的html，并准确地查看问题所在。我这样做了，发现问题，正如我在帖子中所说的，可能是节点周围的问题。问题是我不知道如何使用jstree修复它。不管怎么说，现在时间不是我的朋友，所以我会继续，接受你善意的回答（我真的很感谢），做小组讨论，也许有一天我们可以想出一个更好的解决方案。再次非常感谢。这个论坛太棒了。好吧，让我给你最后一个想法：你已经在论坛上爬了3天了，试图让这个相当复杂的解决方案发挥作用。另一方面，实施我建议的简单解决方案需要一天左右的时间，即使是一个绝对的初学者，也可以让你省去很多头痛。。。这是亲吻原则的一个很好的例子。。。无论如何，祝你好运。

$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))