当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 解析jquery easyui tree异步加载子节点问题

解析jquery easyui tree异步加载子节点问题

2019年03月22日  | 移动技术网IT编程  | 我要评论
easyui中的树可以从标记中建立,也可以通过指定一个url属性读取数据建立。如果想建立一棵异步树,需要为每个节点指定一个id属性值,这样在加载数据时会自动向后台传递id参

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);
  }
}

官网例子地址:

demo下载: 

重要的事情说三遍!!!

$('#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后面用一个变量来做时间戳处理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网