解析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 相关文章推荐
基于Jquery的温度计动画效果
Jun 18 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
ES6的新特性概览
Mar 10 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
详细分析Node.js 多进程
Jun 22 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
PHP和XSS跨站攻击的防范
2007/04/17 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
JS文本框不能输入空格验证方法
2013/03/19 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Python 基础教程之str和repr的详解
2017/08/20 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
读书之星事迹材料
2014/05/12 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
学生上课说话检讨书
2014/10/25 职场文书
地方白酒代理协议书
2014/10/25 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
2014年质量工作总结
2014/11/22 职场文书
英文道歉信
2015/01/20 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书