页面代码:

<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. install rust

    Step 1. Trial 1 Download rustup-init.exe exec rustup-init.exe SW hangs 2. Trial 2 install rust-1.33. ...

  2. tomcat配置ssl证书

    1.server.xml  打开已经注释掉的代码 然后添加证书地址 <Connector SSLEnabled="true" clientAuth="want&qu ...

  3. imp 导入报错

    imp user/passwd file=/data/oracle/oraclesetup/passwd.dmp 报错: Export file created by EXPORT:V11.02.00 ...

  4. DB SQL Monitor 会话状态及等待事件监控工具

    DB SQL Monitor v1.7.6       Designed by Wang Zhaoguan   工具说明 --------------------------------------- ...

  5. SourceInsight宏插件2(非常好用,强力推荐)

    Quicker宏在SI中的使用方法(下载地址:链接:https://pan.baidu.com/s/1VrDxlPhft7RPUCCOKxsGIg  提取码:2d4u) Quicker宏的添加到SI中 ...

  6. ELK实践-Kibana定制化扩展

    纵观任何一家大数据平台的技术架构,总少不了ElasticSearch:ES作为溶合了后端存储.快速检索.OLAP分析等功能的一套开源组件,更绝的是提供了一套集数据采集与前端展现为一体的框架(即ELK) ...

  7. discuz 模板中使用方法和语言标签

    一.如何调用方法? 关于模板中eval的使用{eval php 语句} 比如:<!--{eval echo "Hello World!"}--> 例如在discuz的手 ...

  8. ARC085E MUL

    https://atcoder.jp/contests/arc085/tasks/arc085_c 题目大意 略 解法 最小割即可. 直接建图有负边,但是因为我们知道最后在割上的边数一定为 \(N\) ...

  9. 如何成功打造一款中台(PaaS)产品

    现如今,很多互联网公司在向“大中台,小前台”方向靠拢,通过打造高度可用.高度可定制的中台,来支撑前台业务的快速发展.个性化功能定制.但在构建中台产品(即所谓公司级平台)的时候,如何能成功让一款产品从0 ...

  10. 支持向量机(SVM)原理阐述

    支持向量机(Support Vector Machine, SVM)是一种二分类模型.给定训练集D = {(x1,y1), (x2,y2), ..., (xm,ym)},分类学习的最基本的想法即是找到 ...