Ajax实现无刷新树

benben · 发表于 2013-2-7 20:06:47

1.建立一个aspx页面
html代码
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">

</head>

<body>

<col />

</colgroup>

<tr>

<td>

</div>

</td>

<td>

</td>

</tr>

</table>

function el(id)

{

return document.getElementById(id);

}

function ExpandSubCategory(iCategoryID)

{

var li_father = el("li_" + iCategoryID);

if (li_father.getElementsByTagName("li").length > 0) //分类已下载

{

ChangeStatus(iCategoryID);

return;

}

li_father.className = "Opened";

switchNote(iCategoryID, true);

AjaxMethod.GetSubCategory(iCategoryID, GetSubCategory_callback);

}

function GetSubCategory_callback(response)

{

var dt = response.value.Tables[0];

if (dt.Rows.length > 0)

{

var iCategoryID = dt.Rows[0].FatherID;

}

var li_father = el("li_" + iCategoryID);

var ul = document.createElement("ul");

for (var i = 0;i < dt.Rows.length;i++)

{

                    if (dt.Rows.IsChild == 1) //叶子节点
                    {
                        var li = document.createElement("li");
                        li.className = "Child";
                        li.id = "li_" + dt.Rows.CategoryID;

                        var img = document.createElement("img");
                        img.id = dt.Rows.CategoryID;
                        img.className = "s";
                        img.src = "../../Styles/tree_css/s.gif";

                        var a = document.createElement("a");
                        var id = dt.Rows.CategoryID;
                        a.onmouseover = function()
                        {
                            PreviewImage(id);
                        };
                        a.href = "javascript:OpenDocument('" + dt.Rows.CategoryID + "');";
                        a.innerHTML = dt.Rows.CategoryName;
                    }
                    else
                    {
                        var li = document.createElement("li");
                        li.className = "Closed";
                        li.id = "li_" + dt.Rows.CategoryID;

                        var img = document.createElement("img");
                        img.id = dt.Rows.CategoryID;
                        img.className = "s";
                        img.src = "../../Styles/tree_css/s.gif";
                        img.onclick = function () {
                            ExpandSubCategory(this.id);
                        };
                        img.alt = "展开/折叠";

                        var a = document.createElement("a");
                        a.href = "javascript:ExpandSubCategory(" +
                            dt.Rows.CategoryID + ");";
                        a.innerHTML = dt.Rows.CategoryName;
                    }
                    li.appendChild(img);
                    li.appendChild(a);
                    ul.appendChild(li);
                }
                li_father.appendChild(ul);

                switchNote(iCategoryID, false);
            }

            // 叶子节点的单击响应函数
            function OpenDocument(iCategoryID)
            {
                // 预加载信息
                PreloadFormUrl(iCategoryID);
            }

            function PreviewImage(iCategoryID)
            {

            }

            function ChangeStatus(iCategoryID)

		自动登录	找回密码
密码			立即注册