解析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 相关文章推荐
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
TypeScript类型声明书写详解
Aug 28 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
B2K与车机的中波PK
2021/03/02 无线电
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP 验证码的实现代码
2011/07/17 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
javascript几个易错点记录
2014/11/26 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
python打包成so文件过程解析
2019/09/28 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Python关于反射的实例代码分享
2020/02/20 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
精彩的推荐信范文
2013/11/26 职场文书
党员思想汇报范文
2013/12/30 职场文书
司法局火灾防控方案
2014/06/05 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
入党申请书格式
2019/06/20 职场文书
详解MySQL的内连接和外连接
2023/05/08 MySQL