解析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中的escape及unescape函数的php实现代码
Sep 04 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
jQuery实现跨域
Feb 03 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
layui 设置table 行的高度方法
Aug 17 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知识收集
2012/08/20 PHP
PHP输出日历表代码实例
2015/03/27 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
对pandas replace函数的使用方法小结
2018/05/18 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
python脚本定时发送邮件
2020/12/22 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
升职自荐信范文
2013/10/05 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
英语导游欢迎词
2015/09/30 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android