[Ext.Net]TreePanel 异步加载数据

异步加载数据指的是页面加载的时候只显示根目录，点击根目录再去加载其子目录。

下面就来介绍下这种异步加载的树结构要怎么实现

现将例子的图


QQ图片20131225134353.jpg
(12.1 KB, 下载次数: 0)

下载附件 保存到相册

昨天 13:43 上传

前台画面中要布局下树TreePanel ，在异步加载中，这个树一定要有根节点(root)，而且这个根节点可以隐藏，但不可以消失，如果没有的话，浏览页面的时候就会报错。

<ext:TreePanel ID ="tpl_left" runat ="server" Border ="true" RootVisible="false" AutoScroll="true" ContainerScroll="true" >

<Root >

<ext:AsyncTreeNode Text ="root" NodeID ="root" Expanded ="true" ></ext:AsyncTreeNode> <%--treepanel中的rootvisible="true"是隐藏root这个节点，但是展开了，异步加载的时候如果接下来的节点不确定是否一定有节点，最好不用root这个节点做为第一个节点，如果确定就节点就不用隐藏，直接用root节点--%>

</Root>

<Listeners >

<BeforeLoad Handler ="nodeLoad(node,'','');" /> <%--这个是点击展开响应的事件 --%>

<Click Handler="onClickSource(node.id);" /> <%--这个是单击节点响应的事件--%>

</Listeners>

</ext:TreePanel>

复制代码

在前台js中写下点击展开的节点的事件和单击节点的事件，这些事件再去调用到后台取出数据。

单击节点响应的事件(将选中的节点的ID记录下来，方便绑定其他数据以及刷新时使用)

function onClickSource(nid){

hSelPosId.setValue(nid);

Ext.net.DirectMethods.BindPosInfo();//根据选中的节点的ID绑定其他数据

}

单击展开响应的事件()

//加載子節點

function nodeLoad(node,strSign,strParentId) {

Ext.net.DirectMethods.NodeLoad(node.id, { //加载子节点

success: function(result) {

if (result == "" || result == "undefined" || result == "[]")

{ return; }

var data = eval("(" + result + ")");//这时返回回来的值

node.loadNodes(data);

tpl_left.body.unmask();

//接下来这段是刷新的时候做的，由于我实现的功能比较复杂就不一一解释了，大概的思路是这样的，首先根据之前记录下来的选中的ID找出所有的父节点的ID，对当前树的节点进行查找该选中ID，如果找到，则选中，没有找到，则从该节点的最前面一个父节点ID开始查找下来，找到父节点则展开，这样一级级找下来就可以找到之前选中的节点

if(strSign=="reload"){

var strSelId=hSelPosId.getValue();

if(strSelId !=""){

//第一層

var curNode = tpl_left.getNodeById(hSelPosId.getValue());

if (curNode != null && curNode != undefined) {

curNode.select();

onClickSource(curNode.id);

}else {

var arrSelId=strSelId .split('|');

if(arrSelId .length>1){

switch (arrSelId [0]){

case "g_id": //職等

if(strParentId !=arrSelId [0]){

curNode = tpl_left.getNodeById(arrSelId [0]);

if(curNode.hasChildNodes()==true){

nodeLoad(curNode,"reload",arrSelId [0]);

}

}else {

onClickSource('');

}

break ;

case "t_id"://職稱

if(arrSelId.length ==2){

if(strParentId !=arrSelId [0]){

curNode = tpl_left.getNodeById(arrSelId [0]);

if(curNode.hasChildNodes()==true){

nodeLoad(curNode,"reload",arrSelId [0]);

}

}else {

onClickSource('');

}

}else {

if(strParentId==""){

curNode = tpl_left.getNodeById(arrSelId[0]);

if(curNode.hasChildNodes()==true){

nodeLoad(curNode,"reload",arrSelId [0]);

}

}else if(strParentId ==arrSelId [0]){

curNode = tpl_left.getNodeById(arrSelId[0]+"|"+arrSelId [1]);

if(curNode.hasChildNodes()==true){

nodeLoad(curNode,"reload",arrSelId[0]+"|"+arrSelId [1]);

}

}else {

onClickSource('');

}

}

break ;

case "f_id"://職務

if(arrSelId.length ==2){

if(strParentId !=arrSelId [0]){

curNode = tpl_left.getNodeById(arrSelId [0]);

if(curNode.hasChildNodes()==true){

nodeLoad(curNode,"reload",arrSelId [0]);

}

}else {

onClickSource('');

}

}else {

if(strParentId==""){

curNode = tpl_left.getNodeById(arrSelId[0]);

if(curNode.hasChildNodes()==true){

nodeLoad(curNode,"reload",arrSelId [0]);

}

}else {

if(strParentId ==arrSelId [0]){

curNode = tpl_left.getNodeById(arrSelId[0]+"|"+arrSelId [1]);

if(curNode.hasChildNodes()==true){

nodeLoad(curNode,"reload",arrSelId[0]+"|"+arrSelId [1]);

}

}else if(strParentId ==(arrSelId[0]+"|"+arrSelId [1])){

if(arrSelId .length ==4){

curNode = tpl_left.getNodeById(arrSelId[0]+"|"+arrSelId [1]+"|"+arrSelId [2]);

if(curNode.hasChildNodes()==true){

nodeLoad(curNode,"reload",arrSelId[0]+"|"+arrSelId [1]+"|"+arrSelId [2]);

}

}else {

onClickSource('');

}

}else{

onClickSource('');

}

}

}

break ;

}

}

}

}

}

},

failure: function(errorMsg) {

Ext.Msg.alert('Failure', errorMsg);

}

});

}

复制代码

在后台写下前台所调用的事件，并返回相应的值.

在后台取数据的时候要注意的问题：

后台加载节点时，如果该节点下有子节点，那么该节点应该定义为AsyncTreeNode ，如果没有则应该定义为TreeNode，并且Leaf属性为true 表明是叶子节点

后台加载节点时，节点的ID要设置好，建议最好是 父节点的ID+分隔符号（自己设定）+当前节点的ID，这样子，如果刷新树，还可以做定位到当前选中的节点

（例子中的节点 ID说明 "root"：root节点 ,"00":所有分类的节点，"f_id"、"g_id"、"t_id" 为所有分类下第一级的节点，"f_id|XXX"为所有分类下第二级到第N级的节点）。

[Ext.Net.DirectMethod(ViewStateMode = Ext.Net.ViewStateMode.Enabled)]

public string NodeLoad(string nodeID)

{

if (nodeID == "root")//綁定根目錄的節點（所有職位）

{

return BindPosRoot("");

}

else if (nodeID == "00")//職位大分類(職等、職稱、職務)

{

return BindPosCat();

}

else//職位大分類下的分類的小分類

{

return BindPosCatChild(nodeID);

}

}

复制代码

//下面这段是注意第二点要注意的

//職位大分類下的分類

public string BindPosCatChild(string strNodeId)

{

string[] arrStr=strNodeId .Split ('|');

Ext.Net.TreeNodeCollection nodes = new Ext.Net.TreeNodeCollection();

Ext.Net.AsyncTreeNode curNodes = new Ext.Net.AsyncTreeNode();

Ext.Net.TreeNode curTreeNode = new Ext.Net.TreeNode();

DataTable dt=null;

DataTable dtChild=null;

DataRow[] drsChild=null;

string strParentId = arrStr [0];

string strId = "";

string strIdField = "";//顯示編號的字段

string strTextField = ""; //顯示名稱的字段

int ICount = 0;

ICount = arrStr.Length

switch (strParentId)

{

case "g_id"://職等

if (ICount == 1)

{

dt = getInitData("ods_grade", "g_id,grade", " and g_status=1");

strId = strParentId+"|";

strIdField = "g_id";

strTextField = "grade";

}

break;

case "t_id"://職稱

if (ICount == 1)

{

dt = getInitData("ods_title_cat", "t_cat_id,t_cat", "");

dtChild = getInitData("ods_title", "t_id,title,t_cat_id", "and t_status=1");

strId = strParentId + "|";

strIdField = "t_cat_id";

strTextField = "t_cat";

}

else {

dt = getInitData("ods_title", "t_id,title,t_cat_id", "and t_status=1 and t_cat_id='"+arrStr [1]+"'");

strId = strNodeId + "|";

strIdField = "t_id";

strTextField = "title";

}

break;

case "f_id"://職務

if (ICount ==1 )

{

dt = getInitData("ods_function_cat", "f_cat,f_cat_id", "");

dtChild = getInitData("ods_function_dog", "f_dog_id,f_dog,f_cat_id", "");

strId = strParentId + "|";

strIdField = "f_cat_id";

strTextField = "f_cat";

}

else if (ICount == 2)

{

dt = getInitData("ods_function_dog", "f_dog_id,f_dog,f_cat_id", " and f_cat_id='" + arrStr[1] + "'");

dtChild = getInitData("ods_function", "f_id ,functionName,f_dog_id", " and f_status=1");

strId = strNodeId + "|";

strIdField = "f_dog_id";

strTextField = "f_dog";

}

else {

dt = getInitData("ods_function", "f_id ,functionName,f_dog_id", " and f_status=1 and f_dog_id='"+arrStr [2]+"'");

strId = strNodeId + "|";

strIdField = "f_id";

strTextField = "functionName";

}

break;

}

//增加子節點

foreach (DataRow dr in dt.Rows)

{

if (dtChild != null) {

drsChild = dtChild.Select(strIdField + "='" + dr[strIdField].ToString() + "'");

}

//如果有子节点则用 AsyncTreeNode

if (drsChild !=null &&drsChild.Length > 0)

{

curNodes = new Ext.Net.AsyncTreeNode();

curNodes.NodeID = strId + dr[strIdField].ToString();

curNodes.Text = dr[strTextField].ToString();

nodes.Add(curNodes);

}

else

{

curTreeNode = new Ext.Net.TreeNode();

curTreeNode.NodeID = strId + dr[strIdField].ToString(); ;

curTreeNode.Text = dr[strTextField].ToString ();

curTreeNode.Leaf = true;

nodes.Add(curTreeNode);

}

}

return nodes.ToJson();

}

转自：http://www.ext.net.cn/forum.php?mod=viewthread&tid=11945