jquery使用EasyUI Tree异步加载JSON数据_jquery_脚本之家

所以又在后台进行了JSON字符串拼接,因为是无限级菜单,如果需要构造一个树形结构展现某个角色所能进行的操作,这里就用到了TreeStore动态加载,JQuery插件库,tree的样式加载不上

新澳门葡京赌场手机版 3

二、JS部分代码

ExtJs+JSP布局动态树

在实质上生育中树的协会是需求依靠后台数据库中贮存的源委动态加载的,举例四个系统中,差别的剧中人物有分化的权力,他们所能进行的操作也是莫衷一是的,假若需求构造一个树形布局显示有个别剧中人物所能实行的操作,那就用到了树形布局。
ExtJs提供了动态加载树形构造的体制,这里就用到了TreeStore动态加载,常用的动态加载数据格式有JSON和XML。
此处大家看一下怎么使用JSON格式数据动态加载属性构造。

首先看一下起家的TreeStore。

var tree_store = Ext.create('Ext.data.TreeStore', {
     id:'tree_store',
     proxy: {
      type: 'ajax',
      url: 'MyJsp.jsp',
     }
 });

那边大家由此ajax的主意向贰个JSP诉求数据。上面看TreePanel的概念。

var treePanel = Ext.create('Ext.tree.Panel', {
     id: 'tree_panel',
     title: '动态加载',
     region: 'west',
     width: 200,
     rootVisible: false,
     store: tree_store,
     listeners : {
   itemclick : tree_itemclick
  }, 
  tools: [{
         type: 'refresh',
         tooltip: '刷新',
         handler: function() {//Ext.data.Store load
             tree_store.load({
                 scope: this,
                 callback: function(records, operation, success) {
                     treePanel.getRootNode().eachChild(function(child) { child.expand(); });
                 }
             });
         }
     }
     ],
});

这里须要注意一点,这段代码是卸载onReady(卡塔尔国函数中的,而且在加载treePanel从前调用tree_store的load方法。或者将tree_store写在treePanel里面,不然恐怕形成树形结构不可能平常加载展现。

后台最根本的法力是将节点音讯整合伏贴的JSON字符串,若是急需加载的节点十分的少的话能够接收拼接字符串的不二诀要,假设节点比较多能够应用javaBean封装节点音信,然后经过巡回的方式拼接。

上面大家先看一下节点类的概念。

public class Node {
 private String text;//节点显示字符串
 private String id;//节点ID
 private boolean leaf;//是否是叶子节点

 public String getText() {
  return text;
 }
 public void setText(String text) {
  this.text = text;
 }
 public String getId() {
  return id;
 }
 public void setId(String id) {
  this.id = id;
 }
 public boolean isLeaf() {
  return leaf;
 }
 public void setLeaf(boolean leaf) {
  this.leaf = leaf;
 }
}

真正费用中得以从数据库中抽出这个节点的二个集合音讯,这里大家运用三个常备方法模拟三个节点消息的成团。

public ArrayList getRes(){
  ArrayList result = new ArrayList();

  Node node1 = new Node();
  node1.setId("第一个节点的id");
  node1.setLeaf(true);
  node1.setText("第一个节点");

  Node node2 = new Node();
  node2.setId("第二个节点的ID");
  node2.setLeaf(true);
  node2.setText("第二个节点");
  result.add(node1);
  result.add(node2);

  return result;
 }

下边咱们看一下怎么着依照这些集合来拼接JSON字符

public String getJson(){
  String result = "[{text:'1级文件夹',id:'host',children:[";
  ArrayList arrlist = getRes();
  Iterator iterator = arrlist.iterator();
  while(iterator.hasNext()){
   Node node = iterator.next();
   if(iterator.hasNext())
    result +="{id:'"+node.getId()+"',text:'"+node.getText()+"',leaf:"+node.isLeaf()+"},";
   else
    result +="{id:'"+node.getId()+"',text:'"+node.getText()+"',leaf:"+node.isLeaf()+"}";
  }
  result+="]},{text:'2级文件夹',id:'operate',children:[{id:'addhost',text:'第三个节点',leaf:true},"
    + "{id:'addclient',text:'第四个节点',leaf:true}]}]";
  return result;
 }

在result字符串定义和结尾回来在此以前是应用最家常的字符串拼接的措施,这里一齐展开测量试验。

然后大家看一下url中呼吁的JSP页面。

如此就能够在伸手页面的进程中依据后桃园的内容动态加载属性构造。

上边看一下效果图:

新澳门葡京赌场手机版 1

新澳门葡京赌场手机版 2

行使这种方法动态加载时将享有的几点消息二次全部加载,相当于当您点击张开一流文件夹或二级文件夹的时候她不会在想后台发送诉求,这里透过firebug就会看见,如水果树的层系相比深,在后台布局JSON字符串发送就能够比较费劲,这个时候能够选拔异步加载,也正是当页面第叁回加载的时候只会加载1级文件夹和2级文件夹,当点击张开1级文件夹或2级文件夹的时候此时会三番五次向后退发送需要,恳求加载1级文件夹的子节点。关于异步加载将要下篇博客介绍。

在其实生育中树的协会是亟需依赖后台数据库中存放的剧情动态加载的,举个例子八个系统中,分裂的角色有例外的权位,他…

可以观望三级数据只怕显得的很通晓的

利用easyui
tree的严重性之风流洒脱,正是对JSON数据的处理,有二种方法能够落成:第意气风发正是利用String的format方法。这么些咱们能够去网络参谋一下连锁的API等等,笔者先是次写错了,字符串的占位符应该是
%s 小编写成了 {0} 找了半天,才理解难点所在。
第二种办法,正是自家上边注释掉的那大器晚成行,直接选拔字符串拼接。

澳门葡京赌场注册, 

新澳门葡京赌场手机版,唯独因为后台暗中同意传来的数据是
贰个实体,所以又在后台进行了JSON字符串拼接。

故而,思路如下:

骨子里,主要难题在于后台对数据的管理,即什么可以转变为 easyui
tree手艺够辨其余JSON数据。

调治将养了意气风发晃,生成了一个自身须要的Demo(提醒一下,想要生成Tree效果,还索要加载bootstrap的css),代码如下:

三、后台代码

前面做的执意大利语书的劳作,以往亟待从C#本子移植到网页版,从Thrift接口获取数据,加载到对应的控件中

缺欠:太繁琐,对后台的多少格式供给过高。

功用如图所示:
新澳门葡京赌场手机版 3

自个儿也是菜鸟贰只,能想到的事物不多,所以用了Easy UI的tree组件。

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <html>
 3 <head>
 4 <title>测试页面</title>
 5     <link rel="stylesheet" type="text/css" href="lib/css/bootstrap-treeview.css">
 6     <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.css">
 7 </head>
 8 <body>
 9 <div id="tree"></div>
10 <script type="text/javascript" src="lib/js/jquery-3.2.1.js"></script>
11 <script type="text/javascript" src="lib/js/bootstrap-treeview.js"></script>
12 
13 <script type="text/javascript">
14 
15     var rootNode= new Array();
16 
17     $(function() {
18         var defaultData = [
19             {
20                 id : "211201",
21                 text: '洪泽湖',
22                 tags: ['洪泽湖'],
23                 nodes: [
24                     {
25                         text: '东咀站',
26                         href: '#child1',
27                         tags: ['2'],
28                         nodes: [
29                             {
30                                 text: '光电',
31                                 href: '#grandchild1',
32                                 tags: ['0'],
33                                 nodes: [
34                                     {
35                                         text: '设备还不错',
36                                         href: '#child1',
37                                         tags: ['2']
38                                     }]
39                             },
40                             {
41                                 text: '雷达',
42                                 href: '#grandchild2',
43                                 tags: ['0']
44                             }
45                         ]
46                     },
47                     {
48                         text: '胡庄站',
49                         href: '#child2',
50                         tags: ['0'],
51 
52                     }
53                 ]
54             },
55             {
56                 text: '太湖',
57                 href: '#parent2',
58                 tags: ['0']
59             },
60             {
61                 text: '鄱阳湖',
62                 href: '#parent3',
63                 tags: ['0']
64             }
65         ];
66 
67         $('#tree').treeview({
68             data: defaultData
69         });
70 
71         //node的单击节点事件
72         $('#tree').on('nodeSelected', function(event, data) {
73            alert(data.tags)
74         });
75 
76     });
77 </script>
78 </body>
79 </html>

近日因为专业必要,要做叁个支撑但是级的美食指南。

有个小片头曲,在本人进行eval(卡塔尔国函数转JSON数组在此之前,那是一个字符串数据,字符串数据增加到tree里面恐怕无法识别的,那时底部生龙活虎热,用substring(卡塔尔函数选拔了1-数组.length-1的目录,放到tree里面发掘还是字符串,那才想起来直接eval(卡塔尔国转数组

因为是Infiniti级菜单,数据量也可能有一点大,所以思索采纳异步加载。

事情发生此前用的easyui的Tree插件,通过<ul><li><span></span></li></ul>标签的艺术生成node树,条理清晰,即使麻烦点,不过用循环写几行代码就会化解,可是,在Ajax的函数里面,tree的样式加载不上,彰显的格式便是因素自带的含义,<ul>和<li>,不或然点击,上面包车型大巴办事也就不大概成功,笔者将生成tree的函数移出Ajax,样式就能够加载上了,调节和测量试验了二日永不进展,心风流倜傥横,换二个Node插件

大约叁个流程就是前台传来ID,然后拿走到实体对象,然后对实业实行巡回,然后开展字符串管理这里安装state的意思首要在于让
easyui
的tree能够领略当前节点是还是不是为压低端节点,然后在头里彰显区别的Logo。

 1     var str = "[";
 2         for(var i = 0;i<nodefatherLength;i++){
 3             if(i+1 === nodefatherLength){
 4                 str += "{id:'" + nodefather[i][0] + "',text:'" + nodefather[i][1] + "'}";
 5                 break;
 6             }
 7             str += "{id:'" + nodefather[i][0] + "',text:'" + nodefather[i][1] + "'},";
 8         }
 9         str+="];";
10 
11         var nodedata = eval(str);
12 
13         $('#lawsnode').treeview({
14             data: nodedata
15         });

上述就是本文的全部内容,希望对大家的读书抱有助于,也指望大家多多点拨脚本之家。

 var nodefatherLength = nodefather.length;
 var nodeSonLength = nodeson.length;
 var nodeGrandSonLength = nodegrandson.length;

生机勃勃、HTML部分代码

东挪西撮完一级数据今后,早先拼接二级数据,同理,拼接完三级数据,实现后更新拼接字符串代码如下,小编每风流罗曼蒂克行都写了讲明,理清逻辑之后依然很好明白的:

只可以说,easyui确实很强大。

 

接下来上边获得当前节点的有所父节点的时候,又郁结了半天,去网络找了许多代码,都不可能用,最后照旧要好想了后生可畏招,才足以缓和。

View Code