Question

EXTJS一次加载性树怎么做？

demo里面是直接定义的树的信息，可以一次性加载，我现在是返回了一个JSON，里面也有children，结果树显示的时候一级文件夹是对的，但是展开的时候却是再去加载一次，然后就出错了。也就是说根本不去读JSON里面的children数据。。。

Answer 1

库
create table ComOrg
(
ComOrg_ID integer primary key,
ComOrg_Name nvarchar2(20) not null,
ComOrg_ParentId integer not null
);

insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (1,'MyCompany',0);
insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (2,'第一事业部',1);
insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (3,'第三事业部',1);
insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (4,'第七事业部',1);
insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (5,'编辑部',4);
insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (6,'多媒体事业部',4);
insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (7,'广州分公司',1);
insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (8,'上海分公司',1);
insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (9,'武汉分公司',1);
insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (10,'中国移动广州分公司',0);
insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (11,'采编',5);
insert into ComOrg (ComOrg_ID,Comorg_Name,Comorg_Parentid) values (12,'创作部',2);
commit;

主要代码
<mce:script type="text/javascript" language="javascript"><!--
Ext.onReady(function(){
// 一次加载所有节点
var tree = new Ext.tree.TreePanel({
renderTo: "tree-div",
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
dataUrl: 'TempPage.aspx?tree=ss',
root: {
nodeType: 'async',
text: '公司架构',
draggable: false,
id: '-1'
},
listeners: {
click: function(n){
Ext.Msg.alert("Click Message","You clicked: "+n.attributes.text+" NO. "+n.attributes.id);
}
}
});
tree.getRootNode().expand();
//动态加载节点
var treeLoader = new Ext.tree.TreeLoader({dataUrl: ""});

var treeexpend = new Ext.tree.TreePanel({
renderTo: "treeExpend",
useArrows: true,
autoScroll: true,
animate: true,
enableDD: false,//不允许拖动
containerScroll: true,
border: false,
loader: treeLoader,
root: {
nodeType: 'async',
text: '公司架构',
draggable: false,
expended: true,
id: '0'
},
listeners: {
click: function(n){
//Ext.Msg.alert("Click Message","You clicked: "+n.attributes.text+" NO. "+n.attributes.id);
var div = Ext.get("divTest");
div.highlight();
Ext.MessageBox.show({
title: "MessageBoxDemo",
msg: "You clicked: "+n.attributes.text+" NO. "+n.attributes.id,
width: 400,
buttons: Ext.MessageBox.OK
});
}
}
});
treeexpend.on('beforeload',
function(node){
treeexpend.loader.dataUrl="TempPage.aspx?parId="+node.id; //定义子节点的Loader
});
//treeexpend.getRootNode().expand();
});

// --></mce:script>
<br />
Load All: <br />
<div id="tree-div" style="margin:5px 0px 0px 5px;" mce_style="margin:5px 0px 0px 5px;"></div><br />
Async Load: <br />
<div id="treeExpend" style="margin:5px 0px 0px 5px;" mce_style="margin:5px 0px 0px 5px;"></div>

数据请求TempPage.aspx页面：
protected void Page_Load(object sender, EventArgs e)
{
if(Request["tree"] != null)
{
Tree();
}
else if(Request["parId"] != null)
{
TreeByParentId();
}
}

public void Tree()
{
List<ComOrg> list = GetForTree(DComOrg.GetList(),0);
string json = JsonConvert.SerializeObject(list);
Response.Write(json.Replace("ComOrg_Name", "text").Replace("ComOrg_ID", "id").ToLower());
Response.End();
}

/// <summary>
/// 根据指定节点获取所有子节点
/// </summary>
/// <param name="list"></param>
/// <param name="parentId"></param>
/// <returns></returns>
public List<ComOrg> GetForTree(List<ComOrg> list,int parentId)
{
List<ComOrg> tempList = new List<ComOrg>();
foreach(ComOrg co in list)
{
if(co.ComOrg_ParentId == parentId)
{
co.Children = GetForTree(list, co.ComOrg_ID);
tempList.Add(co);
continue;
}
}
return tempList;
}

public void TreeByParentId()
{
int parentId = Convert.ToInt32(Request["parId"]);
List<ComOrg> list = DComOrg.GetListByParentId(parentId);
string json = JsonConvert.SerializeObject(list);
Response.Write(json.Replace("ComOrg_Name", "text").Replace("ComOrg_ID", "id").ToLower());
Response.End();
}

后台DComOrg.cs文件：

using Oracle.DataAccess.Client;
public static List<ComOrg> GetList()
{
List<ComOrg> list = null;
StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT COMORG_ID,COMORG_NAME,COMORG_PARENTID FROM COMORG");
OracleDataReader reader = DBHelper.GetDataReader(strSql.ToString(), CommandType.Text);
if(reader != null)
{
list = new List<ComOrg>();
ComOrg co = null;
while(reader.Read())
{
co = new ComOrg();
co.ComOrg_ID = Convert.ToInt32(reader["ComOrg_ID"].ToString());
co.ComOrg_Name = reader["ComOrg_Name"].ToString();
co.ComOrg_ParentId = Convert.ToInt32(reader["ComOrg_ParentId"]);
co.Cls = "folder";
list.Add(co);
}
}
reader.Close();
reader.Dispose();
return list;
}

public static List<ComOrg> GetListByParentId(int parentId)
{
List<ComOrg> list = null;
StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT COMORG_ID,COMORG_NAME,COMORG_PARENTID FROM COMORG WHERE COMORG_PARENTID=:COMORG_PARENTID");
OracleParameter[] param = { new OracleParameter("@COMORG_PARENTID", OracleDbType.Int32, 4) };
param[0].Value = parentId.ToString();
OracleDataReader reader = DBHelper.GetDataReader(strSql.ToString(), CommandType.Text,param);
if(reader != null)
{
list = new List<ComOrg>();
ComOrg co = null;
while(reader.Read())
{
co = new ComOrg();
co.ComOrg_ID = Convert.ToInt32(reader["ComOrg_ID"].ToString());
co.ComOrg_Name = reader["ComOrg_Name"].ToString();
co.ComOrg_ParentId = Convert.ToInt32(reader["ComOrg_ParentId"]);
co.Cls = "folder";
list.Add(co);
}
}
reader.Close();
reader.Dispose();
return list;
}

Model：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;
using Newtonsoft.Json;

/// <summary>
/// ComOrg 的摘要说明
/// </summary>
public class ComOrg
{
public ComOrg()
{
//
// TODO: 在此处添加构造函数逻辑
//
}

private int comOrg_ID;

public int ComOrg_ID
{
get { return comOrg_ID; }
set { comOrg_ID = value; }
}
private string comOrg_Name;

public string ComOrg_Name
{
get { return comOrg_Name; }
set { comOrg_Name = value; }
}
private int comOrg_ParentId;
[JsonIgnore]
public int ComOrg_ParentId
{
get { return comOrg_ParentId; }
set { comOrg_ParentId = value; }
}

private string _cls;

public string Cls
{
get { return _cls; }
set { _cls = value; }
}

private List<ComOrg> children;

public List<ComOrg> Children
{
get { return children; }
set { children = value; }
}
}

DBHelper类：
using Oracle.DataAccess.Client;
public static String ConnectionString = "Data Source=orcl;User ID=hr;Password=hr;";

/// <summary>
/// 获取DataReader对象
/// </summary>
/// <param name="queryString">T-SQL语句</param>
/// <param name="commandType">命令类型</param>
/// <param name="param">T-SQL参数</param>
/// <returns>DataReader对象</returns>
public static OracleDataReader GetDataReader(string queryString, CommandType commandType, params OracleParameter[] param)
{
OracleDataReader dataReader = null;
OracleConnection con = new OracleConnection(ConnectionString);
OracleCommand command = new OracleCommand(queryString, con);
command.CommandType = commandType;

if(param != null)
{
for(int i = 0; i < param.Length; i++)
{
command.Parameters.Add(param[i]);
}
}
try
{
command.Connection.Open();
dataReader = command.ExecuteReader(CommandBehavior.CloseConnection);
}
catch(Exception ex)
{
throw ex;
}
return dataReader;
}

OK，数据插入数据库，修改数据连接直接运行！