ExtJS 동적 생성 트리 구조
8294 단어 ExtJs
이틀 동안 ExtJS를 연구하면서 깊은 인식을 갖게 되었습니다.요약은 다음과 같습니다.
표시 데이터 양에 따라 Ext 트리 유형이 결정됩니다.빅데이터의 양이라면 일반적으로 Ext.tree를 만듭니다.AsyncTreeNode 루트 방식
(즉, 트리 노드를 클릭할 때마다 동적으로 백그라운드에서 데이터를 읽습니다. 장점: 표시 속도를 가속화합니다.)데이터 양이 적으면 일반적으로 Ext.tree를 사용합니다.TreeNode
이런 루트 노드.
첫 번째 코드는 다음과 같습니다.
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<title> </title>
<script type="text/javascript">
Ext.onReady(function() {
var root = new Ext.tree.AsyncTreeNode({
id : "root",
text : " "
});
var loader = new Ext.tree.TreeLoader({
url : '<%=request.getContextPath()%>/User_getNodeTree'
});
loader.on("beforeload", function(loader, node) {
alert("---"+node.id);
loader.baseParams.nodeId = node.id;
});
var tree = new Ext.tree.TreePanel({
renderTo : "tree",
root : root,
loader : loader,
width : 200,
height : 300
});
});
</script>
</head>
<body>
<!-- Ext2.0, -->
<div id="tree" style="overflow:auto; height:100%;width:250px;border:5px solid #c3daf9;"></div>
</body>
</html>실체 설명: 구조는 id,text,cls,leaf,href 속성을 포함하는 실체
백그라운드에서 데이터를 반환하려면 다음과 같이 하십시오.
트리 노드를 클릭할 때마다 백그라운드에서 이 노드의 하위 노드 정보를 읽습니다.예:
[{text:'사용자', href:'test.jsp', leaf:true}, {text:'사용자', href:'##', leaf:true}]
두 번째 나무:
페이지:
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<title> </title>
<script type="text/javascript">
Ext.onReady(function() {
var treePanel=new Ext.tree.TreePanel({
renderTo : "tree",
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
//
rootVisible:false,
frame: true,
containerScroll: true
});
var root=new Ext.tree.AsyncTreeNode({
id:'4',
text:'root',
leaf:false,
loader:new Ext.tree.TreeLoader({dataUrl:'/User_getNodeTree'})});
treePanel.setRootNode(root);
treePanel.getRootNode().expand(true);
});
</script>
</head>
<body>
<!-- Ext2.0, -->
<div id="tree" style="overflow:auto; height:100%;width:250px;border:5px solid #c3daf9;"></div>
</body>
</html>엔티티 클래스:
package com.order.entity;
import java.util.List;
public class TreeModule{
/*
* bean ， SysModule JsonTreeModule
*/
private String id; //ID
private String text; //
private String cls; //
private boolean leaf; //
private String href; //
private String hrefTarget; //
private boolean expandable; //
private String description; //
private List<TreeModule> children;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getCls() {
return cls;
}
public void setCls(String cls) {
this.cls = cls;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
public String getHref() {
return href;
}
public void setHref(String href) {
this.href = href;
}
public String getHrefTarget() {
return hrefTarget;
}
public void setHrefTarget(String hrefTarget) {
this.hrefTarget = hrefTarget;
}
public boolean isExpandable() {
return expandable;
}
public void setExpandable(boolean expandable) {
this.expandable = expandable;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public List<TreeModule> getChildren() {
return children;
}
public void setChildren(List<TreeModule> children) {
this.children = children;
}
}
Struts2:
/**
*
* @return
*/
public String getNodeTree(){
PrintWriter out=null;
response.setContentType("text/html;charset=GBK");
try {
out=response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
User user=(User)session.getAttribute("user");
if(user!=null){
UserService uservice=new UserService();
String allprivs=user.getPrivs();
List<String> privsList=Arrays.asList(allprivs.trim().split(","));
List<MenuPanel> menulist=uservice.getAllNodes();
List<TreeModule> list=new ArrayList<TreeModule>();
for(MenuPanel mp:menulist){
if(mp.getParantNodeID()==0){
TreeModule treeNode=new TreeModule();
treeNode.setId(mp.getNodeId());
treeNode.setText(mp.getMenuName());
treeNode.setLeaf(mp.isLeaf());
treeNode.setHref(mp.getActionPath());
List<TreeModule> children=new ArrayList<TreeModule>();
for(MenuPanel menu:menulist){
if(menu.getParantNodeID().intValue()==mp.getId().intValue()
&&privsList.contains(menu.getNodeId().trim())){
TreeModule subtreeNode=new TreeModule();
subtreeNode.setId(menu.getNodeId());
subtreeNode.setText(menu.getMenuName());
subtreeNode.setLeaf(menu.isLeaf());
subtreeNode.setHref(menu.getActionPath());
children.add(subtreeNode);
}
}
if(children.size()>0){
treeNode.setChildren(children);
list.add(treeNode);
}
}
}
JSONArray obj=JSONArray.fromObject(list);
String res = obj.toString();
out.println(res);
}
return null;
}어떤 곳은 인터넷의 일부 코드를 참고한다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
문자열 길이를 계산하고 중국어로 두 개를 계산합니다.텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
