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
{
/// <summary>
/// TestTreeAjx 的摘要说明
/// </summary>
public class TestTreeAjx : IHttpHandler
{
private static IDictionary<int, List<Node>> 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();
}
/// <summary>
/// 获取全部的数据
/// </summary>
/// <returns></returns>
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;
}
/// <summary>
/// 根据不同的节点文本获取对应的节点
/// </summary>
/// <param name="nodeText"></param>
/// <returns></returns>
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:true}]"; 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;
}
/// <summary>
/// 简单字典模拟数据
/// </summary>
/// <returns></returns>
private IDictionary<int, List<Node>> GetData()
{
IDictionary<int, List<Node>> dic = new Dictionary<int, List<Node>>();
List<Node> nodeRoot = new List<Node>();
List<Node> Node1 = new List<Node> { new Node(10, "Node10") };
List<Node> Node2 = new List<Node> { new Node(20, "Node20"), new Node() { NodeID = 21, NodeName = "Node21" }, new Node() { NodeID = 22, NodeName = "Node22" } };
List<Node> Node3 = new List<Node> { 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;
}
/// <summary>
/// 遍历拼接,获取全部数据
/// </summary>
/// <param name="dic"></param>
/// <returns></returns>
private string GetAllData(IDictionary<int, List<Node>> dic)
{
string json = string.Empty;
json = "[";
if (dic.Count > 0)
{
for (int i = 0; i < dic.Count; i++)
{
List<Node> 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, json.LastIndexOf(','));
}
json += "]},";//闭合该节点
}
}
}
if (json.IndexOf(',') > 0)
{
json = json.Substring(0, json.LastIndexOf(','));
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;
}
}
原文链接:http://www.cnblogs.com/SanMaoSpace/archive/2013/02/04/2892173.html