解析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中用window.open()打开多个窗口的name问题
Mar 13 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
学习Vue组件实例
Apr 28 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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
收集的DedeCMS一些使用经验
2007/03/17 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
js 操作符实例代码
2009/10/24 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
Vue自定义指令详解
2017/07/28 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
应届大学生求职信
2013/12/01 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
安全生产承诺书
2014/03/26 职场文书
美术专业自荐信
2014/07/07 职场文书
学习张林森心得体会
2014/09/10 职场文书
2014个人年度工作总结
2014/12/15 职场文书
2015年资料员工作总结
2015/04/25 职场文书
关于远足的感想
2015/08/10 职场文书