解析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 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
JS实现音乐导航特效
Jan 06 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
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制作新闻系统的思路
2006/10/09 PHP
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP实现网上点歌(二)
2006/10/09 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
python多线程扫描端口示例
2014/01/16 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python读写文件基础知识点
2019/06/10 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
员工评语大全
2014/01/19 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
责任书格式范文
2014/07/28 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
python字典的元素访问实例详解
2021/07/21 Python