这几天有点小活,要求是ASP.NET的,虽然我不怎么看好ASP.NET,但是人家要求了我也就照做吧。
最复杂的部分是一个TreeView。出于兼容性和简单性考虑没有用ASP.NET的TreeView控件,而是参考一篇文章自行写了一个出来。
[singlepic=18460]
技术指标如下:
- 实现:Div+CSS+JavaScript+ASP.NET(C#)
- 功能:可以实现无限级的TreeNode
- 标准:在IE 7和Firefox 3.1下显示效果相同,兼容XHTML 1.0 Strict最严格的网页标准
效果如左图所示。最后一个函数可能会因为超宽看不到全部,具体请参照文章附件中的源代码。
附件下载:http://download.nocoo.us/Download/Archive/TreeViewCode.rar
TreeNode.cs
[code=’c#’]
///
///
public class TreeNode
{
private string name;
private string href;
private List
///
///
public string Name { get { return name; } }
///
///
public string Href { get { return href; } }
///
///
public int Count { get { return this.subNodes.Count; } }
///
///
/// 序号
///
public TreeNode this[int index]
{
get { return subNodes[index]; }
set { subNodes[index] = value; }
}
///
///
/// 结点名
public TreeNode(string name)
{
this.name = name;
this.href = null;
}
///
///
/// 结点名
/// /// 结点链接
public TreeNode(string name, string href)
{
this.name = name;
this.href = href;
}
///
///
/// 新结点
public void Add(TreeNode node)
{
subNodes.Add(node);
}
}
[/code]
TreeView.cs
[code=’c#’]
///
///
public class TreeView
{
private List
///
///
public void FillTestData()
{
TreeNode node1 = new TreeNode(“中国”, “#”);
TreeNode node11 = new TreeNode(“华北地区”, “#”);
TreeNode node111 = new TreeNode(“河南省”, “#”);
TreeNode node112 = new TreeNode(“河北省”, “#”);
TreeNode node113 = new TreeNode(“山东省”, “#”);
TreeNode node1131 = new TreeNode(“青岛市”, “#”);
TreeNode node1132 = new TreeNode(“济南市”, “#”);
TreeNode node11321 = new TreeNode(“市中区”, “#”);
TreeNode node11322 = new TreeNode(“历下区”, “#”);
TreeNode node11323 = new TreeNode(“槐荫区”, “#”);
TreeNode node11324 = new TreeNode(“天桥区”, “#”);
TreeNode node11325 = new TreeNode(“长清区”, “#”);
TreeNode node1133 = new TreeNode(“菏泽市”, “#”);
TreeNode node1134 = new TreeNode(“济宁市”, “#”);
TreeNode node1135 = new TreeNode(“德州市”, “#”);
TreeNode node12 = new TreeNode(“东北地区”, “#”);
TreeNode node13 = new TreeNode(“西北地区”, “#”);
TreeNode node14 = new TreeNode(“华东地区”, “#”);
TreeNode node15 = new TreeNode(“西南地区”, “#”);
TreeNode node16 = new TreeNode(“华南地区”, “#”);
TreeNode node17 = new TreeNode(“华中地区”, “#”);
TreeNode node18 = new TreeNode(“港澳台地区”, “#”);
node1132.Add(node11321);
node1132.Add(node11322);
node1132.Add(node11323);
node1132.Add(node11324);
node1132.Add(node11325);
node113.Add(node1131);
node113.Add(node1132);
node113.Add(node1133);
node113.Add(node1134);
node113.Add(node1135);
node11.Add(node111);
node11.Add(node112);
node11.Add(node113);
node1.Add(node11);
node1.Add(node12);
node1.Add(node13);
node1.Add(node14);
node1.Add(node15);
node1.Add(node16);
node1.Add(node17);
node1.Add(node18);
nodes.Add(node1);
nodes.Add(new TreeNode(“俄罗斯”, “”));
nodes.Add(new TreeNode(“美国”));
nodes.Add(new TreeNode(“韩国”));
nodes.Add(new TreeNode(“澳大利亚”));
nodes.Add(new TreeNode(“印度”, “”));
nodes.Add(new TreeNode(“加拿大”, “”));
}
///
///
///
public string GetHtmlString()
{
StringBuilder sb = new StringBuilder();
sb.AppendLine(“
- “);
for (int i = 0; i < nodes.Count; i++) { sb.AppendLine(GetNodeHtml(nodes[i], 1, (i + 1).ToString())); } sb.AppendLine("
“);
return sb.ToString();
}
private string GetNodeHtml(TreeNode thisNode, int depth, string id)
{
StringBuilder sb = new StringBuilder();
bool hasSub = (thisNode.Count > 0) ? true : false;
sb.AppendLine(string.Format(“
sb.AppendLine(string.Format(
“
{3}
“,
hasSub ? “closedir” : “nodir”,
depth,
id,
(thisNode.Href == null || thisNode.Href.Equals(“”)) ? thisNode.Name : string.Format(“{1}“, thisNode.Href, thisNode.Name)
));
if (hasSub)
{
sb.AppendLine(string.Format(“
sb.AppendLine(“
- “);
for (int i = 0; i < thisNode.Count; i++) { sb.AppendLine(GetNodeHtml(thisNode[i], depth + 1, string.Format("{0}_{1}", id, i + 1))); } sb.AppendLine("
“);
sb.AppendLine(“
“);
}
sb.AppendLine(“
“);
return sb.ToString();
}
}
[/code]
ASP.NET页面调用:
[code=’c#’]
<%
CMC.TreeView list = new CMC.TreeView();
list.FillTestData();
Response.Write(list.GetHtmlString());
%>
[/code]
ASP.NET页面JavaScript:
[code=’js’]
defaultNodeState();
function defaultNodeState()
{
var nodeState = getCookie(“nodeState”);
if(nodeState == null)
{
nodeState = “,|,|,”;
setCookie(“nodeState”,nodeState);
}
var layer = nodeState.split(‘|’);
for(var i=0;i
@_@~~~~~ ^_^ !!!!!