今天要做个树的效果，以前网上看到过人家用ExtJS做出来的树挺不错的，所以也就小试一翻。
另外什么都没看就看了个树，Google了一下 而已，所以对ExtJS是相当的初级初级
javaScript:代码
Ext.onReady(function() {
// 调用 Web Service
TreeService.GetTree(onSuccessed);
function onSuccessed(result) {
// result 为 Web Service 方法 GetTree 的 JSON 形式返回值
var asyncTreeNode=new Ext.tree.AsyncTreeNode({//异步加载节点
id: "root",
text: "南垟村结构",
expanded: true,
leaf: false,
children: result // 将从 Web Service 取到的所有节点绑定到根节点下。
});
var tree = new Ext.tree.TreePanel({//就是用来呈现树的"控件"吧
el: "divTree",//在page中用来渲染的标签(容器)
animate: true,//是否动画
title: "TreePanel",//标题
collapsible: true,
enableDD: true,// 是否支持拖拽效果
enableDrag: true,
rootVisible: true,
autoScroll: true,//是否支持滚动
height:527,
singleExpand: true,//同时只能打开一个树,当打开其中任何一个树时,将会关闭其他已经打开的树目录
200,
lines: true,
useArrows: true,//树形目录使用visit中树目录显示效果(三角形代替+号)
root: asyncTreeNode//树目录数据加载 此处用了异步
// loader: new Ext.tree.TreeLoader({ //两种方法都行
// dataUrl:'tree-data.json'//树目录数据加载为本地json数据文件 有些是页面或java中的action ,单最终目的还是要response 一个Json文件或文件流
//它还有很多属性 例如:
//rootVisible : true,是否隐藏根节点
//region:'north', //北边
//split: true, //可以调节大小
// }),
节点一般也有不少属性
id--也就是documnet.getElement这个ID
text--显示的值
leaf--false or true //是否是叶节点
href--链接
hrefTarget--链接方式 例如_blank
icon--图标
cla--style class
});
tree.render(); //这句一定要写 要不然不会显示
}
});
<div id='divTree'></div>
这样就能实现数的体现，节点数据我是通过WebService中调用的方法返回到javascript中，为什么直接可以这样使用呢，
因为这节点的数据一般都是Json文件或Json文件流,因为WebServie返回到javascript中本来就是以Json的形式存储的
后台代码：
public class TreeNode
{
// 摘要:
// Initializes a new instance of the TreeNode class.
public TreeNode()
{
}
private string _id;
public string id
{
get { return _id; }
set { _id = value; }
}
private string _text;
public string text
{
get { return _text; }
set { _text = value; }
}
private bool _leaf;
public bool leaf
{
get { return _leaf; }
set { _leaf = value; }
}
private List<TreeNode> _children=new List<TreeNode>();
public List<TreeNode> children
{
get { return _children; }
set { _children = value; }
}
private string _href;
public string href
{
get { return _href; }
set { _href = value; }
}
private string _hrefTarget;
public string hrefTarget
{
get { return _hrefTarget; }
set { _hrefTarget = value; }
}
}
--WebService
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
// [System.Web.Script.Services.ScriptService]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class TreeService : System.Web.Services.WebService {
public TreeService () {
//如果使用设计的组件，请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public List<TreeNode>GetTree() {
List<TreeNode> nodes = new List<TreeNode>();
DataTable dt = GetDT("proc_getTeam");
foreach(DataRow row in dt.Rows)
{
TreeNode node = new TreeNode();
node.id = row["team"].ToString().Trim();
node.text = row["team"].ToString().Trim();
//node.href = "http://www.google.cn/";
DataTable dtH = GetDT("proc_getFamilyByTeam" , row["team"].ToString());
if (dtH.Rows.Count > 0)
{
foreach (DataRow rowHu in dtH.Rows)
{
TreeNode nH = new TreeNode();
nH.id = rowHu["id"].ToString().Trim();
nH.text = rowHu["fa"].ToString().Trim();
nH.leaf = true;
node.children.Add(nH);
}
}
else
node.leaf = true;
nodes.Add(node);
}
return nodes;
}
public DataTable GetDT(string procName,params string[] arg)
{
DataSet myDataSet = new DataSet();
string connectionString = ConfigurationManager.ConnectionStrings["YQKCConn"].ConnectionString;
using (SqlConnection connection = new SqlConnection(connectionString))
{
string proc = "exec " + procName;
if (arg.Length > 0)
{
proc += " " + arg[0];
}
SqlDataAdapter mySqlDataAdapter = new SqlDataAdapter(proc, connection);
mySqlDataAdapter.Fill(myDataSet);
}
if (myDataSet.Tables.Count > 0)
return myDataSet.Tables[0];
return new DataTable();
}
}
这ExtJS用json数据就够还比较多的 暂且我是这样了解的 一般的json数据结构
[{id:"zhang",text:"wang"},{id:"wang",text:"li"}]--id、text 这些都不是写死的 只是ExtJS识别这些 所以才用这
哈哈 今天一天收获不小 ，要学的路还很长啊