解析jquery easyui tree异步加载子节点问题


Posted in Javascript onMarch 08, 2017

easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立。如果想建立一棵异步树,需要为每个节点指定一个id属性值,这样在加载数据时会自动向后台传递id参数。

<ul id="tt"></ul>

编写前台代码:

$('#tt').tree({
  url:'/demo2/node/getNodes'  // The url will be mapped to NodeController class and getNodes method
});

为测试用,建立一个节点的数据模型:

@Table(name="nodes")
public class Node extends ActiveRecordBase{
  @Id public Integer id;
  @Column public Integer parentId;
  @Column public String name;
 
  public boolean hasChildren() throws Exception{
    long count = count(Node.class, "parentId=?", new Object[]{id});
    return count > 0;
  }
}

编写后台的控制器代码:

public class NodeController extends ApplicationController{
  /**
   * get nodes, if the 'id' parameter equals 0 then load the first level nodes,
   * otherwise load the children nodes
   * @param id the parent node id value
   * @return the tree required node json format
   * @throws Exception
   */
  public View getNodes(int id) throws Exception{
    List<Node> nodes = null;
 
    if (id == 0){  // return the first level nodes
      nodes = Node.findAll(Node.class, "parentId=0 or parentId is null", null);
    } else {  // return the children nodes
      nodes = Node.findAll(Node.class, "parentId=?", new Object[]{id});
    }
 
    List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
    for(Node node: nodes){
      Map<String,Object> item = new HashMap<String,Object>();
      item.put("id", node.id);
      item.put("text", node.name);
 
      // the node has children, 
      // set the state to 'closed' so the node can asynchronous load children nodes 
      if (node.hasChildren()){
        item.put("state", "closed");
      }
      items.add(item);
    }
 
    return new JsonView(items);
  }
}

官网例子地址:http://www.jeasyui.com/tutorial/tree/tree2.php

demo下载:easyui-tree2_3water.rar 

重要的事情说三遍!!!

$('#tt').tree({
method:"POST",
  url:'/demo2/node/getNodes'  // The url will be mapped to NodeController class and getNodes method
});

method一定要用POST,GET的话要在URL后面用一个变量来做时间戳处理。

method一定要用POST,GET的话要在URL后面用一个变量来做时间戳处理。

method一定要用POST,GET的话要在URL后面用一个变量来做时间戳处理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery异步循环获取功能实现代码
Sep 19 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
简单理解vue中Props属性
Oct 27 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 #Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 #Javascript
教你用十行node.js代码读取docx的文本
Mar 08 #Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 #Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 #Javascript
原生js实现放大镜特效
Mar 08 #Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 #Javascript
You might like
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
javascript中对对层的控制
2006/12/29 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
浅谈js中的bind
2019/03/18 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
材料化学应届生求职信
2013/10/09 职场文书
通信工程毕业生求职信
2013/11/16 职场文书
库房管理员岗位职责
2014/03/09 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
自查自纠工作总结
2014/10/15 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
大学生见习总结报告
2015/06/24 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python