자식 노드의 jquery easyui 트리 비동기 로딩에 대한 자세한 설명

easyui의 트리는 태그를 사용하거나 URL 속성을 지정하여 데이터를 읽어서 만들 수 있습니다. 비동기 트리를 구축하려면 각 노드에 대해 id 속성 값을 지정해야 데이터를 로드할 때 id 매개변수가 자동으로 백그라운드로 전달됩니다. 이 기사에서는 주로 자식 노드를 비동기적으로 로드하는 jquery easyui 트리를 구문 분석하는 문제를 소개합니다. 관심 있는 사용자는 태그에서 또는 데이터를 읽어서 설정할 수 있습니다. 그것이 모두에게 도움이 되기를 바랍니다.

<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_jb51.rar

중요한 내용은 세 번이나 말함!!!

$('#tt').tree({
　　method:"POST",
  url:'/demo2/node/getNodes'  // The url will be mapped to NodeController class and getNodes method
});

메서드는 POST를 사용해야 하며, GET의 경우 URL 뒤에 변수를 사용하세요. 타임스탬프 처리 .

관련 추천 :

트리 노드 삭제 방법을 상세하게 구현하는 jQuery 플러그인 zTree에 대하여

jQuery 플러그인 zTree로 구현한 다중 선택 트리 효과에 대한 설명

오른쪽 클릭 수집 기능을 구현하는 jquery ztree 예제에 대한 자세한 설명    

위 내용은 자식 노드의 jquery easyui 트리 비동기 로딩에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!