JsTree uses AJAX to obtain data from the background, and jstreeajax

JsTree uses AJAX to obtain data from the background, and jstreeajax

Page code:

<div id="MenuTree"></div>

Javascript code:

$ (Document ). ready (function ($) {InitMenuTree () ;}); function InitMenuTree () {$ ('# MenuTree '). data ('jstree', false); $. getJSON ('@ Url. action ("GetMenuTree", "AdminMenu") ', function (json) {$ (' # MenuTree '). jstree ({'core': {'data': json}) ;}); $ ('# MenuTree '). on ('changed. jstree ', function (node, data) {var id = data. instance. get_node (data. selected [0]). id; // obtain the ID ClickMenuTree (id);}) $ ('# MenuTree') for the node click event '). on ('loaded. jstree ', function (e, data) {data. instance. open_all (); // expand all nodes by default })}

Use the getJson method of jQuery to obtain data from the background and put it directly behind the data.

Background code:

Models :( this is the format required by jstree)

    public class AdminMenuTreeNoteModel    {        public string id { get; set; }        public string parent { get; set; }        public string text { get; set; }        public string icon { get; set; }    }

Controllers: (I am using. Net MVC. This is not important. Just transfer the data in the specified JSON format)

Public ActionResult GetMenuTree () {var trees = from a in dbc. AdminMenus select new AdminMenuTreeNoteModel {id = a. ID. ToString (), parent = (a. ParentMenu> 0? A. parentMenu. toString (): "#"), // The default root node's parent is "#" text =. title, icon = (. iconClass. length> 0? A. iconClass: "icon-doc") // you have set the icon in some sections and use the default icon without the icon}; return Json (trees. toList (), JsonRequestBehavior. allowGet );}

It's easy to complete. However, the documents on JsTree's official website cannot be understood.

 

Here is the specified JSON format:

// Alternative format of the node (id & parent are required){  id          : "string" // required  parent      : "string" // required  text        : "string" // node text  icon        : "string" // string for custom  state       : {    opened    : boolean  // is the node open    disabled  : boolean  // is the node disabled    selected  : boolean  // is the node selected  },  li_attr     : {}  // attributes for the generated LI node  a_attr      : {}  // attributes for the generated A node}