jstree Nodes to edit a value

I'm building a jstree开发者_运维问答 whose node titles are made of product categories (say 'cars'), and that contain, besides that title ('cars'), an input box (modifiable) with the price, and three buttons which sending commands to the server and some JS on the client, can perform 'delete','save' and 'add new' functions. (i'd put a picture of the layout but dont think it adds much to the clarity of the question, but let me know).

Since I'm using JSON plugin and pulling the tree from a database, I'm sending the data from server and, so far, I've managed to add the html to the data. That renders the layout I want, but since everyting is inside an tag, I have nasty problems when, for instance, I click on the input box (i.e.: the screen goes to top), or when I try to catch the click event on the buttons.

Can someone, please, point me in the right way of doing this with jstree? I've been crawling over forums and docs for over 3 days now, and start to believe my brain has cooked up some time ago and just noticed it. :)

Some (summarized and "pseudoized") code:

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

and later on...

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

And that's it...

die(json_encoed($MyTree))

Thanks again.

---

firstly- welcome to SO. When posting a code snippet please use the code tags to format your code.
also I do think that a screenshot would help clarify things.
to your question- I think that placing controls such as textboxes, buttons etc. inside tree nodes is not really standard.
consider using a different panel for those controls (see attached image (details deleted to avoid propriety issues) of the way I use jsTree for editing).

Also- when you create the JSON data on the server side, you create a tight coupling between your chosen jQuery plugin and your server side code.
That means that if you decide to switch from jQuery to a different framework, or even switch from jsTree to a different plugin- your server code would have to change.
Ideally, you'd like the changes in the UI to be limited to the UI layer.

What I do in my project, is retrieve regular objects from the server side, and convert them to jsTree format on the client side. That way, if anything changes on the UI side, only the js code would have to change.