Ext Js简单Tree创建及其异步加载

https://www.360docs.net/doc/5d15738470.html,/SanMaoSpace/archive/2013/02/04/2892 173.html

Ext Js简单Tree创建及其异步加载

对于Ext Js的树的使用也是比较多的，本篇分享简单的Tree的创建及其树的异步加载处理。

1.简单TreePanel的创建

function creatTree() {//创建简单的树

//节点集合创建

var rootNode = new Ext.tree.TreeNode({ id: 'root', text: '根节点', expanded: true }); //只展开根节点(只展开某节点)

var node1 = new Ext.tree.TreeNode({ id: 'node1', text: 'Node1', leaf: true}); //为叶子节点

var node2 = new Ext.tree.TreeNode({ id: 'node2', text: 'Node2' });

var node3 = new Ext.tree.TreeNode({ id: 'node3', text: 'Node3', expanded: true });

var arrNodes = [//节点集合

new Ext.tree.TreeNode({ id: 'nodeOne', text: 'NodeOne' }),

new Ext.tree.TreeNode({ id: 'nodeTwo', text: 'NodeTwo' }),

new Ext.tree.TreeNode({ id: 'nodeThree', text: 'NodeThree' })

];

var arrayNodes = [new Ext.tree.TreeNode({ text: 'nodeOne' }), new

Ext.tree.TreeNode({ text: 'nodeTwo' })];

node2.appendChild(arrayNodes); //将集合节点添加到对应的节点

node3.appendChild(arrNodes);

rootNode.appendChild(node1); //根节点添加对应的节点

rootNode.appendChild(node2);

rootNode.appendChild(node3);

//也可以如下添加节点集合

//rootNode.appendChild([node1, node2, node3]); //添加节点集合

var treePanel = new Ext.tree.TreePanel({

renderTo: Ext.getBody(), width: 150, root: rootNode,

animate: true, //是否动画

enableDD: true, //是否拖拽操作

useArrows: true, //使用Vista-style箭头

autoScroll: true, //是否自动滚动条

containerScroll: true//向ScrollManager注册此容器

});

}

2.简单TreePanel的使用

//简单的树的练习

function treeTest() {

var rootNode = new Ext.tree.TreeNode({//创建根节点

id: 'root', text: '树的根', nodeType: 'async'

});

rootNode.appendChild(new Ext.tree.TreeNode({ id: 'node1', text: 'Node1', leaf: true })); //是叶子节点,将不能添加子节点

rootNode.appendChild(new Ext.tree.TreeNode({ id: 'node2', text: 'Node2', leaf: true }));

var node3 = new Ext.tree.TreeNode({ id: 'node3', text: 'Node3' }); //创建节

点3

var arrNodes = [//节点集合

new Ext.tree.TreeNode({ id: 'node30', text: 'Node30' }),

new Ext.tree.TreeNode({ id: 'node31', text: 'Node31' }),

new Ext.tree.TreeNode({ id: 'node32', text: 'Node32' })];

node3.appendChild(arrNodes); //将节点集合添加到节点3中

rootNode.appendChild(node3); //将节点3添加到根节点中

var treePanel = new Ext.tree.TreePanel({//创建节点树对象

renderTo: Ext.getBody(), root: rootNode, width: 200, animate: true, enableDD: true//animate动画效果,enableDD拖拽效果

});

//tree.getRootNode().expand(); //某个节点展开

//node.expand(true);

treePanel.expandAll(); //展开树下的所有节点

//该节点下的所有子节点都触发

//node3.eachChild(function () { alert('TT') });

//某个节点(节点3)点击事件,鼠标位置

//node3.on('click', function (node, e) { Ext.Msg.alert('信息提示', '你点击' + node.text + '的节点' + e.getXY()) });

treePanel.on('click', function (node) {//所有节点都触发改事件

if (node.hasChildNodes()) {//判断该节点是否含有子节点

var msg = node.text + '有子节点：';

var childNodes = node.childNodes; //取得该节点下的所有子节点

for (var i = 0; i < childNodes.length; i++) {//遍历子节点集合

msg += childNodes[i].text + '|'; //拼接节点集合文本信息

}

Ext.Msg.alert('信息提示', msg);

} else {

if (node.isLeaf()) {//判断该节点是否为叶子节点

Ext.Msg.alert('信息提示', '你点击的是叶子节点:' + node.text);

}

}

})

}

3.简单前台Ext Js对树的增删改

//前台ExtJs操作对树的增删改操作

function treeOperation() {

var root = new Ext.tree.TreeNode({ text: '根节点' });

var treePanel = new Ext.tree.TreePanel({

width: 300, height: 600, renderTo: Ext.getBody(), root: root, id:

'testTree',

tbar: [

{ text: '添加同级节点', handler: function ()

{ singleNodeInfo('addSibling', 'testTree'); } },

{ text: '添加下级节点', handler: function ()

{ singleNodeInfo('addChild', 'testTree'); } },

{ text: '修改节点', handler: function ()

{ singleNodeInfo('update', 'testTree'); } },

{ text: '删除节点', handler: function ()

{ removeNode('testTree'); } }

]

});

//treePanel.on('contextmenu', function (node, e) { var myMenu = createMenu(); node.select(); myMenu.showAt(e.getPoint()); });

//对于节点内容的操作,也可以使用Ext.Msg.prompt来处理，如下：

//Ext.msg.prompt('请输入节点名称', '节点名称:', function (btn, text) { if (btn == 'ok') { alert(text); } });

}

function removeNode(treePanelID) {//删除节点,参数:树ID

var treePanel = Ext.getCmp(treePanelID);

var selNode = treePanel.selModel.getSelectedNode();

if (selNode == null) {

Ext.Msg.alert('信息提示', '请选择你要删除的节点！');

return;

}

if (!selNode.hasChildNodes()) {//是否包含子节点

var removeNode = selNode.remove(); //其父节点移除自己

Ext.Msg.alert('信息提示', '你移除了节点' + removeNode.text);

}

else {

Ext.Msg.confirm('信息提示', '该节点为父节点,一并删除？', function (btn) { if (btn == 'yes') {

selNode.removeAll(); //连同下面的子节点一起删除

}

});

}

}

function AddAndUpdateNode(type, selNode, nodeName) {//添加\修改节点,参数:操作类型\选中节点\节点名字

if (selNode != null) {

switch (type) {

case 'addChild': //添加子节点

var addNode = new Ext.tree.TreeNode({ text: nodeName });

selNode.appendChild(addNode);

break;

case 'addSibling': //添加同级节点

var addNode = new Ext.tree.TreeNode({ text: nodeName });

var parentNode = selNode.parentNode.appendChild(addNode);

break;

case 'update': //修改文本内容

selNode.setText(nodeName);

break;

}

selNode.expand(); //选中节点展开

}

}

function singleNodeInfo(type, treeId) {//参数:操作类型,treePanel对象var treePanel = Ext.getCmp(treeId);

var selNode = treePanel.selModel.getSelectedNode(); //获取选中的节点

if (selNode == null) {

Ext.Msg.alert('信息提示', '请选择一个节点');

return;

}

var win = new Ext.Window({//弹出信息对话框

title: '添加修改节点', width: 230, height: 100,

bodyStyle: "padding-top:10px",

items: [

{ xtype: 'label', text: '节点名字:', width: 200 },

{ xtype: 'textfield', id: 'txtNodeName' }

],

bbar: [

{ text: '保存', handler: function () {

var nodeName = Ext.getCmp('txtNodeName').getValue();

AddAndUpdateNode(type, selNode, nodeName); //更新数据

Ext.Msg.alert('信息提示', '保存成功！'); win.close();

}

}, '->',

{ text: '取消', handler: function () { win.close(); } }

]

});

if (type == "update") {

Ext.getCmp('txtNodeName').setValue(selNode.text);

}

win.show(); //显示信息

}

//你也可以试试添加一个右键菜单对节点进行操作

function createMenu() {

var myMenu = new Ext.menu.Menu(

{ xtype: 'button', text: '添加节点', handler: function (tree) { Ext.Msg.alert('信息提示', '添加节点'); } },

{ xtype: 'button', text: '下级节点', handler: function ()

{ Ext.Msg.alert('信息提示', '下级节点'); } },

{ xtype: 'button', text: '修改节点', handler: function ()

{ Ext.Msg.alert('信息提示', '修改节点'); } },

{ xtype: 'button', text: '删除节点', handler: function ()

{ Ext.Msg.alert('信息提示', '删除节点'); } }

);

return myMenu;

}

4.简单树的异步加载(需要创建异步节点Ext.tree.AsyncTreeNode并使用

Ext.tree.TreeLoader加载)(注意对于叶子节点的指定)

function treeAsyncTest() {//树的异步加载,一次加载对应的数据

var treePanel = new Ext.tree.TreePanel({

el: 'divTree', //渲染divID

width: 150, height: 300, animate: true, enableDD: true, rootVisible: true, loader: new Ext.tree.TreeLoader({ url: 'TestTreeAjx.ashx', baseParams: { Option: 'GetAllData'} })

});

var rootNode = new Ext.tree.AsyncTreeNode({ text: '根节点' });

treePanel.setRootNode(rootNode);

treePanel.render(); //进行渲染

rootNode.expand(true, true); //参数1:展开所有节点;参数2:启动动画效果//这样操作完你会发现所有的节点可能会无限的延展下去，

//是因为数据引起的，在加载时，传出的数据指定最后一级为叶子节点就可以了

}

5.针对不同的节点异步加载不同的节点数据（注意对于叶子节点的指定）

function treeNodeAsync() {//根据不同的节点值,获取不同的加载数据(可以是节点ID\节点文本等等)

var rootNode = new Ext.tree.AsyncTreeNode({ text: 'rootNode' });

var treePanel = new Ext.tree.TreePanel({

el: 'divTree',

width: 150, height: 300, animate: true, enableDD: true, rootVisible: true, listeners: {

'beforeload': function (node) {//按这种形式传递的数据,不指定最后的叶子节点的话,会遍历每个节点,性能不好(如果需要,在对应节点下指定叶子节点)

node.loader = new Ext.tree.TreeLoader({ url: 'TestTreeAjx.ashx', baseParams: { Option: 'GetNodeData', NodeText: node.text} })

}

}

});

treePanel.setRootNode(rootNode);

//这里可以试试对于节点展开和非展开所有节点的数据加载情况

//一次展开所有节点,会一次遍历完毕加载数据；不展开节点折叠起来,会在对应节点展开需加载时加载对应数据

rootNode.expand(false, true);

treePanel.render();

}

6.其Ajax请求页面TestTreeAjx.ashx代码（简单的模拟数据）

namespace WebExtJS.WebTest

{

///

/// TestTreeAjx 的摘要说明

///

public class TestTreeAjx : IHttpHandler

{

private static IDictionary> dic = null;

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

string strOption = context.Request["Option"] != null ?

context.Request["Option"].ToString() : string.Empty;

string nodeText = context.Request["NodeText"] != null ?

context.Request["NodeText"].ToString() : string.Empty;

string strMessage = string.Empty;

dic = GetData();

switch (strOption)

{

case"GetAllData": strMessage = GetAllData(dic); break;

case"GetNodeData": strMessage = GetNodeData(nodeText); break;

default: break;

}

context.Response.Write(strMessage);

context.Response.End();

}

///

///获取全部的数据

///

///

private string GetAllData()

{

string data = "[{text:'Node1',leaf:true},"

+

"{text:'Node2',children:[{text:'Node20',leaf:true},{text:'Node21',leaf:true} ]},"

+

"{text:'Node3',children:[{text:'Node30',leaf:true},{text:'Node31',leaf:true}

,{text:'Node32',leaf:true}]}]";

return data;

}

///

///根据不同的节点文本获取对应的节点

///

///

///

private string GetNodeData(string nodeText)

{

string json = string.Empty;

switch (nodeText)

{//指定叶子节点遍历非叶子节点(如果在其父节点指定为叶子节点,将不会加载对应的节点数据)

case"rootNode": json =

"[{text:'Node1',leaf:true},{text:'Node2'},{text:'Node3'}]"; break;

case"Node2": json =

"[{text:'Node20',leaf:true},{text:'Node21',leaf:true}]"; break;

case"Node3": json =

"[{text:'Node30',leaf:true},{text:'Node31',leaf:true},{text:'Node32',leaf:tr ue}]"; break;

}

//switch (nodeText)

//{//不指定叶子节点遍历每一个节点

// case "rootNode": json =

"[{text:'Node1'},{text:'Node2'},{text:'Node3'}]"; break;

// case "Node2": json = "[{text:'Node20'},{text:'Node21'}]"; break; // case "Node3": json =

"[{text:'Node30'},{text:'Node31'},{text:'Node32'}]"; break;

//}

return json;

}

///

///简单字典模拟数据

///

///

private IDictionary> GetData()

{

IDictionary> dic = new Dictionary>(); List nodeRoot = new List();

List Node1 = new List { new Node(10, "Node10") };

List Node2 = new List { new Node(20, "Node20"), new Node() { NodeID = 21, NodeName = "Node21" }, new Node() { NodeID = 22, NodeName = "Node22" } };

List Node3 = new List { new Node(30, "Node30"), new Node(31, "Node31"), new Node(32, "Node32"), new Node(33, "Node33") };

dic.Add(0, nodeRoot);//处理根节点

dic.Add(1, Node1);

dic.Add(2, Node2);

dic.Add(3, Node3);

return dic;

}

///

///遍历拼接,获取全部数据

///

///

///

private string GetAllData(IDictionary> dic)

{

string json = string.Empty;

json = "[";

if (dic.Count > 0)

{

for (int i = 0; i < dic.Count; i++)

{

List tempNode;

if (dic[i].Count == 0)//根节点判断

{

continue;

}

else

{

tempNode = dic[i];

}

if (tempNode.Count == 1)//只有一个叶子节点

{

json += "{text:'" + tempNode[0].NodeName + "'},";

}

else

{

json += "{text:'" + tempNode[0].NodeName + "',children:[";

for (int j = 1; j < tempNode.Count; j++)//对其叶子节点遍历

{

json += "{text:'" + tempNode[j].NodeName +

"',leaf:true},";

}

if (json.IndexOf(',') > 0)

{

json = json.Substring(0, https://www.360docs.net/doc/5d15738470.html,stIndexOf(','));

}

json += "]},";//闭合该节点

}

}

}

if (json.IndexOf(',') > 0)

{

json = json.Substring(0, https://www.360docs.net/doc/5d15738470.html,stIndexOf(','));

json += "]";

}

return json;

}

public bool IsReusable

{

get

{

return false;

}

}

}

public class Node

{

public Node() { }

public Node(int nodeID, string nodeName)

{

this.NodeID = nodeID;

this.NodeName = nodeName; }

public int NodeID;

public string NodeName;

}

}