解析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中对于批量deferred的处理方法
Jan 22 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
bootstrap响应式工具使用详解
Nov 29 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 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
杏林同学录(四)
2006/10/09 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
js 动态修改css文件的方法
2014/08/05 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
《最可爱的人》教学反思
2014/02/14 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
门面房租房协议书
2014/12/01 职场文书
销售员自我评价
2015/03/11 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
导游词之无锡唐城
2019/12/12 职场文书
关于python类SortedList详解
2021/09/04 Python
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸