解析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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 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
两个强悍的php 图像处理类1
2009/06/15 PHP
PHP 字符串分割和比较
2009/10/06 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
如何选择使用结构还是类
2014/05/30 面试题
国际会议邀请函范文
2014/01/16 职场文书
自我反省检讨书
2014/01/23 职场文书
感恩节活动策划方案
2014/05/16 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
Go timer如何调度
2021/06/09 Golang
CentOS安装Nginx并部署vue
2022/04/12 Servers