Geek Answers Handbook

How to create a new jsTree HTML node with the CRRM plugin?

Here is my situation: using PHP and MySQL as my backend, jQuery and jsTree for my interface.

My tree is on the left, and clicking on node will load certain information in the field located to the right of the tree. They can add / edit / delete nodes in this tree using this behavior (without reloading the page, just Ajax).

Currently, I can successfully add node to the tree. I take user input for the new node, and if everything passes the test (on the client side first, on the server side), the new "node" is added to my MySQL database, and then I update jsTree to fly with some Javascript, adding the parent to it node element (when loading a PHP page, it correctly builds an HTML tree with unordered lists and list elements).

My simple question is: how to add a new node in jsTree with the attribute "ID" for the list item ("LI")?

For reference, here is what my HTML tree looks like. This is passed to jsTree and the HTML_DATA plugin:

<ul>
    <li class="plant" id="plant_3"><a href="javascript:void();">Plant Three</a>
     </li>
    <li class="plant" id="plant_1"><a href="javascript:void();">Plant One</a>
  <ul>
          <li class="area" id="area_2"><a href="javascript:void();">Area Two</a>
       </li>
          <li class="area" id="area_1"><a href="javascript:void();">Area One</a>
    <ul>
            <li class="building" id="building_1"><a href="javascript:void();">Building One</a>
      <ul>
              <li class="floor" id="floor_2"><a href="javascript:void();">1st Floor</a>
           </li>
              <li class="floor" id="floor_3"><a href="javascript:void();">2nd Floor</a>
           </li>
              <li class="floor" id="floor_1"><a href="javascript:void();">Ground Floor</a>
           </li>
          </ul>
         </li>
        </ul>
       </li>
      </ul>
     </li>
</ul>

, node ( "plant_1", "area_3" ..). , jsTree node, ( CRRM ):

$("#my_tree").jstree("create", null, false, name, {attr : "id=plant_"+id}, true);

#my_tree :

$("#my_tree").jstree({
 "ui" : {
     "select_limit" : 1,
     "selected_parent_close" : "select_parent"
 },
 "html_data" : {
     "ajax" : {
  "url" : "file.php?action=get_my_tree",
  "data" : function (n) {
      return {
   id : n.attr ? n.attr("id"): 0
   };
  }
     }
 },
 "core" : {
     "animation" : 0
 },
 "plugins": [ "ui", "themes", "html_data", "hotkeys", "crrm"]
    });

? CRRM ( , "{attr:" id = plant _ "+ id}" ), "attr" .

jsTree + CRRM, , ​​ Javascript "create", "" LI.

, HTML, jsTree "create" :

<li class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>New Node!</a></li>
+5
1

, :

$("#my_tree").jstree("create", null, false, name, {
    attr : "id=plant_" + id
}, true);

attr Javascript . :

$("#my_tree").jstree("create", null, false, name, {
    attr : {
        id: 'plant_' + id
    },
    data: name
}, true);

, , . "id" LI ( ), , .

jsTree , JS, Javascript, .

, jsTree HTML:

<li id="plant_x" class="jstree-leaf">
    <ins class="jstree-icon">&nbsp;</ins>
    <a href="#">
        <ins class="jstree-icon">&nbsp;</ins>
        New Node!
    </a>
</li>
+8

More articles:


All Articles