Ext2.0 + .Net 2.0应用实例（2）--用ExtJS 实现动态载入树

wormwormwormworm

于 2008-03-19 19:31:00 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP.NET编程 Ajax 文章标签： extjs ext .net stylesheet aptana html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/wormwormwormworm/article/details/2198070

ASP.NET编程同时被 2 个专栏收录

22 篇文章

订阅专栏

13 篇文章

订阅专栏

本文介绍了一个使用ExtJS实现的可拖拽TreePanel组件的示例，包括开发环境配置、客户端HTML及JavaScript代码，以及服务端C#代码。示例中TreePanel能够从服务器加载数据并支持节点拖拽重组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一开发环境
Windows 2003
VS 2005
Aptana
Ext2.0

二客户端代码
HTML:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Reorder TreePanel</title>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript" src="reorder.js"></script>

</head>

<body>

<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>

</body>

</html>

JS:

Ext.onReady(function(){

// shorthand

var Tree = Ext.tree;

var tree = new Tree.TreePanel({

el:'tree-div',

useArrows:true,

autoScroll:true,

animate:true,

enableDD:true,

containerScroll: true,

loader: new Tree.TreeLoader({

dataUrl:'Ajax.aspx'

})

});

// set the root node

var root = new Tree.AsyncTreeNode({

text: '总公司',

draggable:false,

id:'source'

});

tree.setRootNode(root);

// render the tree

tree.render();

root.expand();

});

三服务端代码
新建一个Ajax.aspx页面

using System;

using System.Data;

using System.Web;

public partial class Ajax : System.Web.UI.Page

...{

protected void Page_Load(object sender, EventArgs e)

...{

string result = "[{"cls":"folder","id":10,"leaf":false,"children":[{"cls":"file","id":11,"leaf":true,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,"children":null,"text":"SLK200"}],"text":"业务部"}]";

Response.Write(result);

}

}

评论 4

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。