StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I have created a simple demo using ASP.NET MVC3 and jstree. It loads the whole tree using ajax and it displays the node id and additional data when clicking on each node. Further information can be found in the <a href="http://www.jstree.com/documentation/json_data" rel="noreferrer">json_data plugin documentation</a></p> <p>View:</p> <pre><code> <div id="demo1"></div> <script type="text/javascript"> $(function () { $("#demo1").jstree({ "themes": { "theme": "classic", "dots": false }, "json_data": { "ajax": { "url": "/Controller/TreeViewTestContent", "data": function (n) { return { id: n.attr ? n.attr("id") : 0 }; } } }, "plugins": ["themes", "json_data", "ui"] }).bind("select_node.jstree", function (event, data) { alert(data.rslt.obj.attr("id")); alert(data.rslt.obj.attr("other_attribute")); }); }); </script> </code></pre> <p>The controller that provides the tree view data:</p> <pre><code>public JsonResult TreeViewTestContent(string id) TreeViewItemModel aItem = new TreeViewItemModel(); aItem.data = new TreeViewItemModelData { title = "Root Node", icon = "folder" }; aItem.attr = new TreeViewItemModelAttributes { id = "1", other_attribute = "additional data can go here" }; aItem.state = "open"; List<TreeViewItemModel> aChildrenlist = new List<TreeViewItemModel>(); TreeViewItemModel aChild = new TreeViewItemModel(); aChild.data = new TreeViewItemModelData { title = "Child 1", icon = "folder", }; aChild.attr = new TreeViewItemModelAttributes { id = "2", other_attribute = "another value" }; aChildrenlist.Add(aChild); aItem.children = aChildrenlist; return Json(aItem,JsonRequestBehavior.AllowGet); } </code></pre> <p>and the Models</p> <pre><code>public class TreeViewItemModel { public TreeViewItemModelData data { get; set; } public string state { get; set; } //'open' to display node children when loaded, 'closed' to make an AJAX call to retrieve the children, 'string.empty' to not display the child nodes when loaded and do not make ajax calls to get the children public TreeViewItemModelAttributes attr { get; set; } public List<TreeViewItemModel> children { get; set; } } public class TreeViewItemModelData { public string title { get; set; } //text do be displayed in the node public string icon { get; set; } //remove this property if not wanting to customize node icon } public class TreeViewItemModelAttributes { public string id { get; set; } public string other_attribute { get; set; } } </code></pre> <p>Hopefully it will be a good starting point for anyone using jstree.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload