1

I am using jsTree and so far it's looking good.

I have a list of nodes whose id gets incremented with every new node like(g1,g2,g3 ...and some other nodes like k1,k2,k3)

I can open a specific node on document load by using

              "core": { 
                "animation": 0,
                "open_parents": true,
                "initially_open": ['g1']
                },

But i want to open all the nodes that start with 'g' but not 'k' , is something like $(id^=g) can be used?

update:

The nodes are dynamically created through the web-service like

 Dim oSB1 As StringBuilder = New StringBuilder
oSB1.Append(" <h5 >JSTree</h5> <div id='divtree' ><ul id='tree'> <li id='g1'><a       href='#' class='usr'>1st Node</a><ul> <li><a href='#'  rel='file'>1.1</a></li><li><a href='#'  class='usr'>1.2</a></li><li><a href='#'  class='file'>1.3</a></li></ul></li></ul><ul><li id='g2'><a href='#' class='usr'>2nd Node</a><ul> <li><a href='#'  rel='file'>2.1</a></li><li><a href='#' >2.2</a></li></ul></ul> <ul><li id='k2'><a href='#' class='usr'>3rd Node</a><ul> <li><a href='#'  rel='file'>3.1</a></li><li><a href='#' >3.2</a></li></ul></ul> <ul><li id='k2'><a href='#' class='usr'>4th Node</a><ul> <li><a href='#'  rel='file'>4.1</a></li><li><a href='#' >4.2</a></li></ul></ul></div>")
Return oSB1.ToString

the data returned from the web-service is assigned to jstree,hence i need to open only the nodes with id that starts with 'g' and not 'k', in this above example there are just 2 nodes, but imagine if there are more than a 100 nodes.

The tree is called as so

  $("#G2").html(data.d);
$("#divtree").jstree(
                  {
                     "state": "open",
                      "animated": "slow",
                      "plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"],

                        //working
                      "core": {
                          "animation": 0,
                          "open_parents": true,
                          "initially_open": ['g1']
                      },

                      "contextmenu": {
                          "items": function ($node) {
                              return {
                                  "Create": {
                                      "label": "Create a new Node",
                                      "action": function (obj) {
                                          $("#divtree").jstree("create_node", function () { alert("are you sure?") }, true);
                                          this.create(obj);
                                      }
                                  },
                                  "Rename": {
                                      "label": "Rename Node",
                                      "action": function (obj) {
                                          $("#divtree").jstree("rename_node", function () { alert("you are trying to rename") }, true);
                                          this.rename(obj);

                                      }
                                  },
                                  "Delete": {
                                      "label": "Delete Node",
                                      "action": function (obj) {
                                          $("#divtree").jstree("delete_node", function () { alert("Really!!?") }, true);
                                          this.remove(obj);


                                      }
                                  }
                              };
                          }
                      }

                  });

Her only the node with id 'g1' opens whereas i want to open all the node starting with id 'g' is there a way to make it operational?

jeev
  • 478
  • 10
  • 25

2 Answers2

0

jsTree is very very good but its documentation does leave a bit to be desired. I too struggled with with it for a while and finally came up with this - selectively expanding/cotracting jsTree nodes

This may not directly answer your specific question but I think it might help.

Community
  • 1
  • 1
DroidOS
  • 8,530
  • 16
  • 99
  • 171
0

When generating json you can use just "state" => "open" for nodes you want to be open on load. So the logic is in the code that generates json not jsTree itself.

Read more in doc for json_data plugin

The basic structure you need to follow when supplying data in the JSON format is:

{
    "data" : "node_title",  // omit `attr` if not needed; the `attr` object gets passed to the jQuery `attr` function
    "attr" : { "id" : "node_identificator", "some-other-attribute" : "attribute_value" }, // `state` and `children` are only used for NON-leaf nodes
    "state" : "closed", // or "open", defaults to "closed"
    "children" : [ /* an array of child nodes objects */ ]
}
Radek
  • 13,813
  • 52
  • 161
  • 255
  • one more thing i forgot to mention is that the nodes are formed in the web-service, not in the script of jstree. so their id's will be present in the web-service . – jeev Feb 20 '13 at 04:15
  • If the node is in state `close` an AJAX request is sent and then the return data is used to render / update jsTree. So simply if you use above settings. The data manipulation is done on the server side. – Radek Feb 26 '13 at 23:56
  • thank uou for your reply,but where do i add "state":closed?? my nodes are called from the web-service. please see the updated question – jeev Feb 27 '13 at 05:56
  • An example is in my answer, in the sample code. Even you have used `"state": "open",` in your code. So when your web-service creates new node and you need to ajax for that node you add `"state" : "closed"` on the same level like `data` and `attr`. Note that you can add your own attributes using `attr` section and then when creating AJAX call you can pass these attributes to your web-service. Plenty of examples are here http://stackoverflow.com/questions/8078534/jstree-loading-subnodes-via-ajax-on-demand – Radek Feb 27 '13 at 22:00