解析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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
java必学必会之static关键字
2015/12/03 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
浅析Python3爬虫登录模拟
2018/02/07 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python获取txt文件词向量过程详解
2019/07/05 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
高考考python编程是真的吗
2020/07/20 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
2014教师研修学习体会
2014/07/08 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
技术员岗位职责范本
2015/04/11 职场文书
送达通知书
2015/04/25 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
中秋节随笔
2015/08/15 职场文书
《绝招》教学反思
2016/02/20 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技