解析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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
React更新渲染原理深入分析
Dec 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抓取页面与代码解析 推荐
2010/07/23 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
子页向父页传值示例
2013/11/27 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
使用Python下载Bing图片(代码)
2013/11/07 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
详解Python3的TFTP文件传输
2018/06/26 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
基于Pytorch SSD模型分析
2020/02/18 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
类如何去实现接口
2013/12/19 面试题
文员个人求职自荐信
2013/09/21 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
幼儿园课题方案
2014/06/09 职场文书
体育课外活动总结
2014/07/08 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技