页面代码:

<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. 敏捷开发SCM

    敏捷的目标:自组织,提高交付质量和交付速度:敏捷中实现拥抱变化是通过迭代增量实现的:所谓的迭代是循环,循环一种机制和模式,增量则是价值的增加,迭代增量,就是通过每次工作流程的循环实现业务价值的提升:那 ...

  2. java注解篇

    @SuppressWarnings注解 该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默. 允许您选择性地取消特定代码段(即,类或方法)中的警告.其中的想法是当您看到警告 ...

  3. 谈谈我对 js原型链的理解

    想要学习 “原型链” 必须要认识什么是 “原型” 和 “原型链” 先理解一下普通的继承和原型的区别,下面写一段js代码来帮助理解: var Animal = function(){ // 动物抽象类 ...

  4. 【CentOS】自定义服务添加

    1.创建服务需要执行的脚本 cd /sb/scripts vi td-agent-testlog #!/bin/bash # # /etc/rc.d/init.d/td-agent-DC01 # # ...

  5. bat文件与Vbs文件常用操作(获取用户输入,执行VBS文件)

    bat文件: set /P StrInput="输入数字:" echo 输入的数字为%StrInput% set /P Flg="是否执行(y/n):" IF ...

  6. 存储过程中调用webservice

    存储过程中调用webservice其实是在数据库中利用系统函数调用OLE. 1.查找webservice api 可得到MSSOAP.SoapClient. 2.查找API 接口可得到mssoapin ...

  7. OpenResty的现状、趋势、使用及学习方法

    Nginx 是俄罗斯人发明的, Lua 是巴西几个教授发明的,中国人章亦春把 LuaJIT VM 嵌入到 Nginx 中,实现了 OpenResty 这个高性能服务端解决方案. 通过 OpenRest ...

  8. MYSQL登录函数(第3版本)

    已经改进 CREATE DEFINER=`root`@`%` FUNCTION `uc_session_login`( `reqjson` JSON, `srvjson` JSON ) RETURNS ...

  9. Oracle问题处理

    一,如果在Oracle中执行for update操作时,出现一致卡顿现象,此时可能是有其它的进程阻塞了. 处理的方法就是查找出阻塞的进程,然后强制杀死 先查询出阻塞进程: select object_ ...

  10. 转载:MySQL:亲测备份策略实例(线上真实备份案例)

    是否为线上库的备份而烦恼过,这里提供一个完整的备份从属数据库的备份方案,亲测可用 说明: 备份从库,按周计,每周进行一次全备 每周一的早上六点进行全备,其他时间备份中继日志 在从库上启用rsync服务 ...