页面代码:

<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 > ? a.ParentMenu.ToString() : "#"),//默认根节点的parent是“#”
text = a.Title,
icon = (a.IconClass.Length > ? 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[]).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
}
});
});
}

这样可以直接调用 GetMenuTreeData() 刷新树了。
我发现 $.getJSON() 可能有缓存,反正还用 $.getJSON 修改后没有办法刷新树内容。

如果只是显示出来不需要刷新的话就无所谓,需要刷新还得换一个方法。

jsTree通过AJAX从后台获取数据的更多相关文章

  1. c# ajax从后台获取数据list数组 $.each再显示数据

    后台代码 public JsonResult linkage(string Department) {//逻辑是:先从数据库查到表数据 再把表数据转换为LIST给AJAX HE_Department ...

  2. echart表格,动态的通过ajax从后台获取数据动态的展示数据

    官网上都是介绍的echar表格的展示方法,但是都是静态数据,一开始的时候我总是纳闷,这些数据都是怎么上上去的 , 后来通过一些方法,当然这些方法也不是我自己写出来的,也是通过在网上收集了一下 ,现在才 ...

  3. 一、表单和ajax中的post请求&&后台获取数据方法

    一.表单和ajax中的post请求&&后台获取数据方法 最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前 ...

  4. ligerUI---下拉菜单(menubar)动态显示(从后台获取数据)

    写在前面: ligerui的下拉菜单是有点丑的,这也是没有办法的事........这里主要记录下,如何从后台获取数据进行菜单显示. 有两种方式:1.使用json数组来动态添加  2.字符串拼接.  其 ...

  5. jquery通过AJAX从后台获取信息并显示在表格上的类

    前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...

  6. jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中

    不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...

  7. Swift - 后台获取数据(Background Fetch)的实现

    前面讲了如何让程序申请后台短时运行.但这个额外延长的时间毕竟有限.所以从iOS7起又引入两种在后台运行任务的方式:后台获取和后台通知. 1,后台获取介绍 后台获取(Background Fetch)是 ...

  8. Vue---从后台获取数据vue-resource的使用方法

    作为前端人员,在开发过程中,我们大多数情况都需要从后台请求数据,那么在vue中怎样从后台获取数据呢?接下来,我简单介绍一下vue-resource的使用方法,希望对大家有帮助. 一.下载vue-res ...

  9. React 中的 AJAX 请求:获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

随机推荐

  1. Django学习笔记之上下文处理器和中间件

    上下文处理器 上下文处理器是可以返回一些数据,在全局模板中都可以使用.比如登录后的用户信息,在很多页面中都需要使用,那么我们可以放在上下文处理器中,就没有必要在每个视图函数中都返回这个对象. 在set ...

  2. 嵌入式C语言预处理使用

    #include  包含头文件 #define 宏 #define 宏名 (宏体)    //不进行语法检查 #define ABC(x) (5+(x))    //宏函数 #define #else ...

  3. C# 将DataTable转换成list (--分页--) 【Skip--Take】

    将DataTable转换成list 及数据分页: /// <summary> /// 酒店评论列表-分页 /// </summary> /// <param name=& ...

  4. ThinkPHP3.2 中空方法、空控制器和空模块的设置

    ThinkPHP3.2 中空方法.空控制器和空模块的设置 1.空方法设置 问题: 当你访问一个不存在的方法的时候: 如: http://localhost/test/index.php/Home/Us ...

  5. kettle使用小结----脚本启动

    初学kettle,使用kettle Spoon完成转换(ktr)或作业(kjb)的编写之后,执行作业可以在spoon中直接启动,因为我的需求是持续监控数据表的状态进行数据同步, 所以作业任务需要一直在 ...

  6. 学习python第三天

    变量的命名规范 1.只能有 字母 数字 及_组成 2.不能以数字开头 3.避免与系统关键词重名:重名不会报错,但系统的功能就被自定义的功能屏蔽掉了(严重不建议这样做) 4._开头的变量都有特出含义 5 ...

  7. linux中.nfsxxxx引起的文件无法删除

    一个linux系统中的某个文件夹无法删除,使用ls -al查看有1个.nfsxxxx的文件无法删除. 使用lsof +D /filepath/,查看到文件被一个进程一直占用. 再使用ps -aux | ...

  8. ES6系列之箭头函数

    本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map ...

  9. GSM与GPRS的区别

    1.    GSM是全球移动通讯系统(Global System for Mobile Communications)的简称 2.    GPRS是通用分组无线业务(General Packet Ra ...

  10. docker 命令汇集

    1,查看容器 docker ps [-a] #-a表示全全部否者仅显示运行的 2,登录容器 docker exec -it [containerId] /bin/bashdocker exec -it ...