Jquery动态生成树形列表
实现思路：使用ajax方式发送请求→服务端从数据库中取出结构列表，生成xml文档，回发给客户端→客户端接收到xml数据，进行解析，生成列表，并配置列表样式。
客户端代码：
function GetTreeView(odiv) {//odiv为要加载树形控件的div
$.ajax({
async: false,
type: "GET",
url: "../Page_Ajax/RS_TreeView.aspx",
dataType: "xml",
success: function(xmldata) {
//新建列表项
var ou = $("<ul></ul>").appendTo(odiv);
//*//获取factory节点
var f = $(xmldata).find("Factory:first");
var lfactory = $("<li></li>").appendTo(ou);
var dfactory = $("<div></div>").appendTo(lfactory);
var ifactory = $("<img src=''/>").appendTo(dfactory);
var ifactory2 = $("<img src=''/>").appendTo(dfactory);
var sfactory = $("<span></span>").appendTo(dfactory);
//设置节点属性
$(sfactory).attr("id", $(f).attr("id"));
$(sfactory).text($(f).attr("name"));
$(dfactory).width($(sfactory).text().length * 15 + 35);//根据数据长度计算div宽度
$(sfactory).bind("click", function() {
//绑定点击事件
});
var ufactory = $("<ul></ul>").appendTo(lfactory);
//遍历Area节点
$(f).find("Area").each(function() {
var larea = $("<li></li>").appendTo(ufactory);
var darea = $("<div></div>").appendTo(larea);
var iarea = $("<img src=''/>").appendTo(darea);
var iarea2 = $("<img src=''/>").appendTo(darea);
var sarea = $("<span></span>").appendTo(darea);
$(sarea).attr("id", $(this).attr("id"));
$(sarea).text($(this).attr("name"));
$(darea).width($(sarea).text().length * 15 + 35);
$(sarea).bind("click", function() {
});
var uarea = $("<ul></ul>").appendTo(larea);
//遍历Team节点
$(this).find("Team").each(function() {
var lteam = $("<li></li>").appendTo(uarea);
var dteam = $("<div></div>").appendTo(lteam);
var iteam = $("<img src=''/>").appendTo(dteam);
var iteam2 = $("<img src=''/>").appendTo(dteam);
var steam = $("<span></span>").appendTo(dteam);
$(steam).attr("id", $(this).attr("id"));
$(steam).text($(this).attr("name"));
$(dteam).width($(steam).text().length * 15 + 35);
//绑定单击事件
$(steam).bind("click", function() {
});
var uteam = $("<ul></ul>").appendTo(lteam);
//遍历Well节点
$(this).find("Well").each(function() {
var lwell = $("<li></li>").appendTo(uteam);
var dwell = $("<div></div>").appendTo(lwell);
var iwell = $("<img
src='../Img/treeico/37.png'/>").appendTo(dwell);
var swell = $("<span></span>").appendTo(dwell); $(swell).attr("id", $(this).attr("id"));
$(swell).text($(this).attr("name"));
$(dwell).width($(swell).text().length * 15 + 35);
$(swell).bind("click", function() {
});
});
});
jquery的attr属性});
//设置样式
ou.css("padding-left", "15px");
ou.css("margin", "0px");
ou.css("margin-top", "3px");
var ul = $(ou).find("ul");
var li = $(ou).find("li");
ul.css("padding-left", "20px");
ul.css("padding-top", "5px");
ul.css("margin-left", "0px");
li.css("margin-left", "0px");
li.css("list-style-type", "none");
li.css("cursor", "pointer");
ou.find("li:has(ul)").find("span").css("font-family", "微软雅黑
").css("font-size", "14px");
ou.find("li:has(ul)").find("span").hover(
function() {
$(this).css("color", "#0000ff").css('text-decoration', 'underline');
},
function() {
$(this).css("background-color", "#ffffff").css("color",
"#000000").css('text-decoration', 'none');
}
);
//默认各节点展开，设置图片
ou.find("li:has(ul)").find("div img:first").attr("src",
"../Img/treeico/minus.gif").css('');
ou.find("li:has(ul)").find("div img:nth-child(2)").attr("src",
"../Img/treeico/Open.png");
//设置展开收缩事件
li.find("ul").prev().find('img').click(function() {
$(this).parent().next().toggle();
if ($(this).attr("src") == "../Img/treeico/minus.gif") {
$(this).attr("src", "../Img/treeico/plus.gif");
$(this).next().attr("src", "../Img/treeico/folder.png");
}
else if ($(this).attr("src") == "../Img/treeico/plus.gif") {
$(this).attr("src", "../Img/treeico/minus.gif");
$(this).next().attr("src", "../Img/treeico/Open.png");
}
else if ($(this).attr("src") == "../Img/treeico/Open.png") { $(this).prev().attr("src", "../Img/treeico/plus.gif");
$(this).attr("src", "../Img/treeico/folder.png");
}
else if ($(this).attr("src") == "../Img/treeico/folder.png") { $(this).prev().attr("src", "../Img/treeico/minus.gif");
$(this).attr("src", "../Img/treeico/Open.png");
}
});
}
});
}
服务器端代码（RS_TreeView.aspx）：
protected void Page_Load(object sender, EventArgs e)
{
XmlDocument xmlDoc = new XmlDocument();
XmlElement eRoot = xmlDoc.CreateElement("Factory");
eRoot.SetAttribute("id", "factory");
eRoot.SetAttribute("name", "采油厂");
xmlDoc.AppendChild(eRoot);
Factory f = new Factory();
f.GetAreaList();
foreach (Area a in f.AreaList)
{
XmlElement eArea = xmlDoc.CreateElement("Area");
eArea.SetAttribute("id", a.ID);
eArea.SetAttribute("name", a.Name);
eRoot.AppendChild(eArea);
a.GetTeamList();
foreach (Team t in a.TeamList)
{
XmlElement eTeam = xmlDoc.CreateElement("Team");
eTeam.SetAttribute("id", t.ID);
eTeam.SetAttribute("name", t.Name);
eArea.AppendChild(eTeam);
t.GetWellList();
foreach (Node w in t.WellList)
{
XmlElement eWell = xmlDoc.CreateElement("Well");
eWell.SetAttribute("id",w.ID.ToString());
eWell.SetAttribute("name",w.Name);
eTeam.AppendChild(eWell);
}
}
}
ResponseXML(xmlDoc.OuterXml);
}
private void ResponseXML(string xml)
{
Response.ContentType = "text/xml";
Response.Charset = "utf-8";
Response.Clear();
Response.Write("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
Response.Write(xml);
Response.End();
}
其中：Factory等是自定义的类，GetAreaList等方法是类中自定义的方法，生成xml文档的代码，可以自行编写。
文件结构如下：
附：图片：
37
folder
open
minus
plus
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论