jsTree通过AJAX从后台获取数据

2024-04-27 15:01:09

字体：大中小

来源：转载

供稿：网友

页面代码：

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

javascript代码：

$(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;//节点点击事件 获取ID    ClickMenuTree(id);  })  $('#MenuTree').on('loaded.jstree', function (e, data) {    data.instance.open_all();//默认展开所有节点  })}

使用jQuery的getJson方法从后台获取数据，然后直接放到data后面就行了。

后台代码：

Models:（这是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：（我用的是.Net MVC 这不重要，直接把数据按照规定的JSON格式传出去就行了）

public ActionResult GetMenuTree(){    var trees = from a in dbc.AdminMenus                select new AdminMenuTreeNoteModel                {                    id = a.ID.ToString(),                    parent = (a.ParentMenu > 0 ? a.ParentMenu.ToString() : "#"),//默认根节点的parent是“#”                    text = a.Title,                    icon = (a.IconClass.Length > 0 ? a.IconClass : "icon-doc")//部分节设定好了图标，没有图标的使用默认图标                };    return Json(trees.ToList(), JsonRequestBehavior.AllowGet);}

完事，还是很简单的。但是JsTree的官方网站里的文档根本看不懂。

这里是规定的JSON格式：

// 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}

UPDATE：

后来初始化树代码改成这样了：

function InitMenuTree() {  $('#MenuTree').on('changed.jstree',function (node,data){    var id = data.instance.get_node(data.selected[0]).id;//获取ID    ClickMenuTree(id);    FromStateShow();  })  $('#MenuTree').on('loaded.jstree', function (e, data) {    data.instance.open_all();//默认展开所有节点  })  GetMenuTreeData();}function GetMenuTreeData() {  $('#MenuTree').data('jstree', false);  $.Ajax({    url: '@Url.Action("GetMenuTree", "AdminMenu")',    type: 'post',    dataType: 'json'  })  .done(function(data) {      $('#MenuTree').data('jstree', false).empty().jstree({      'core': {        'data': data      }    });  });}