解析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 相关文章推荐
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
vue实现购物车结算功能
Jun 18 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP开发负载均衡指南
2010/07/17 PHP
preg_match_all使用心得分享
2014/01/31 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP运行模式汇总
2016/11/06 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
javascript定义类和类的实现实例详解
2015/12/01 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
jQuery实现简单评论区功能
2020/10/26 jQuery
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
python用户管理系统的实例讲解
2017/12/23 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
几道PHP面试题
2013/04/14 面试题
黄继光的英雄事迹材料
2014/02/13 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript