解析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 日期转换成中文格式的函数
Jul 07 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
IE中createElement需要注意的一个问题
2010/07/13 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Fabric 应用案例
2016/08/28 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
大学生求职工作的自我评价
2014/02/13 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
教师年终个人总结
2015/02/11 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js