zoukankan      html  css  js  c++  java

  • Ajax Tree (转)

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
    <title>Ajax Tree</title>
    <link type="text/css" href="http://www.cnblogs.com/Styles/tree_css/tree.css" rel="stylesheet">
    </head>
    <body>
    <form id="Form1" runat="server">
    <div class="TreeMenu" id="CategoryTree" style=" 100%; height: 489px">
    </div>
    <script language="javascript" type="text/javascript">
    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[i].IsChild == 1) //叶子节点
    {
    var li = document.createElement("li");
    li.className     = "Child";
    li.id     = "li_" + dt.Rows[i].CategoryID;

    var img = document.createElement("img");
    img.id     = dt.Rows[i].CategoryID;
    img.className     = "s";
    img.src     = "http://www.cnblogs.com/Styles/tree_css/s.gif";

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

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

    var a = document.createElement("a");
    a.href     = "javascript:ExpandSubCategory(" +
    dt.Rows[i].CategoryID     + ");";
    a.innerHTML     = dt.Rows[i].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)
    {
    var li_father = el("li_" + iCategoryID);
    if (li_father.className == "Closed")
    {
    li_father.className     = "Opened";
    }
    else
    {
    li_father.className     = "Closed";
    }
    }

    function switchNote(iCategoryID, show)
    {
    var li_father = el("li_" + iCategoryID);
    if (show)
    {
    var ul = document.createElement("ul");
    ul.id     = "ul_note_" + iCategoryID;

    var note = document.createElement("li");
    note.className     = "Child";

    var img = document.createElement("img");
    img.className     = "s";
    img.src     = "http://www.cnblogs.com/Styles/tree_css/s.gif";

    var a = document.createElement("a");
    a.href     = "javascript:void(0);";
    a.innerHTML     = "请稍候";

    note.appendChild(img);
    note.appendChild(a);
    ul.appendChild(note);
    li_father.appendChild(ul);
    }
    else
    {
    var ul = el("ul_note_" + iCategoryID);
    if (ul)
    {
    li_father.removeChild(ul);
    }
    }
    }

    // 加载根节点
    var tree = el("CategoryTree");
    var root = document.createElement("li");
    root.id     = "li_0";
    tree.appendChild(root);

    // 加载页面时显示第一级分类
    ExpandSubCategory(0);

    function PreloadFormUrl(iCategoryID)
    {
    // 采用同步调用的方式获取图片的信息
    var ds = AjaxMethod.GetFormsList(iCategoryID).value;
    // 如果返回了结果
    if (ds)
    {
    // 判断数据表是否不为空
    if (ds.Tables[0].Rows.length > 0)
    {
    // 返回的信息数据表
    dt = ds.Tables[0];
    el(    "furl").src = dt.Rows[0].FormUrl;
    }
    else // 分类下没有
    {
    }
    }
    }
    </script>
    </form>
    </body>
    </html>
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using AjaxPro;

    public partial class Pages_Home_HomePage : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    AjaxPro.Utility.RegisterTypeForAjax(    typeof(AjaxMethod));
    }
    }

    a
    {
    text-decoration    :none;
    }
    a,a:visited
    {
    color    :#000;
    background    :inherit;
    }
    body
    {
    margin    :0;
    padding    :20px;
    font    :12px tahoma,宋体,sans-serif;
    }
    dt
    {
    font-size    :22px;
    font-weight    :bold;
    margin    :0 0 0 15px;
    }
    dd
    {
    margin    :0 0 0 15px;
    }
    h4
    {
    margin    :0;
    padding    :0;
    font-size    :18px;
    text-align    :center;
    }
    p
    {
    margin    :0;
    padding    :0 0 0 18px;
    }
    p a,p a:visited
    {
    color    :#00f;
    background    :inherit;
    }

    .TreeMenu img.s
    {
    cursor    :hand;
    vertical-align    :middle;
    }
    .TreeMenu ul
    {
    padding    :0;
    }
    .TreeMenu li
    {
    list-style    :none;
    padding    :0;
    }
    .Closed ul
    {
    display    :none;
    }
    .Child img.s
    {
    background    :none;
    cursor    :default;
    }

    #CategoryTree ul
    {
    margin    :0 0 0 17px;
    }
    #CategoryTree img.s
    {
    width    :34px;
    height    :18px;
    }
    #CategoryTree .Opened img.s
    {
    background    :url(skin3/opened.gif) no-repeat 0 1px;
    }
    #CategoryTree .Closed img.s
    {
    background    :url(skin3/closed.gif) no-repeat 0 1px;
    }
    #CategoryTree .Child img.s
    {
    background    :url(skin3/child.gif) no-repeat 13px 2px;
    }

    #CategoryTree
    {
    float    :left;
    width    :249px;
    border    :1px solid #99BEEF;
    background    :#D2E4FC;
    color    :inherit;
    margin    :3px;
    padding    :3px;
    height    :600px;
    }


    using System;
    using System.Data;
    using System.Data.SqlClient;
    using System.Configuration;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using AjaxPro;

    /**//// <summary>
    /// Summary description for AjaxMethod
    /// </summary>
    public class AjaxMethod
    {
    public AjaxMethod()
    {
    //
    // TODO: Add constructor logic here
    //
    }
    [AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
    public static DataSet GetSubCategory(int iCategoryID)
    {
    string sql = string.Format("SELECT CategoryID, CategoryName, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}", iCategoryID);
    return GetDataSet(sql);
    }

    [AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
    public static DataSet GetFormsList(int iCategoryID)
    {
    string sql = string.Format("SELECT * FROM forms WHERE form_category_id = {0}", iCategoryID);
    return GetDataSet(sql);
    }
    public static string ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();

    public static DataSet GetDataSet(string sql)
    {
    SqlDataAdapter sda     = new SqlDataAdapter(sql, ConnectionString);
    DataSet ds     = new DataSet();
    sda.Fill(ds);
    if (ds != null)
    return ds;
    else
    return null;
    }
    }

    if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Category]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
    drop table [dbo].[Category]
    GO

    if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Forms]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
    drop table [dbo].[Forms]
    GO

    CREATE TABLE [dbo].[Category] (
    [CategoryID] [int] IDENTITY (1, 1) NOT NULL ,
    [CategoryName] [varchar] (20) COLLATE Chinese_PRC_CI_AS NULL ,
    [FatherID] [int] NULL
    )     ON [PRIMARY]
    GO

    CREATE TABLE [dbo].[Forms] (
    [FormID] [int] IDENTITY (1, 1) NOT NULL ,
    [FormName] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
    [FormUrl] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
    [Form_category_id] [int] NULL ,
    [target] [char] (10) COLLATE Chinese_PRC_CI_AS NULL
    )     ON [PRIMARY]
    GO
    CREATE FUNCTION IsLeaf (@cat_id int)
    RETURNS int AS
    BEGIN

    declare @count int
    select @count = (select count(*) from Category where FatherID=@cat_id)
    if (@count=0)
    return 1
    return 0

    END
  • 相关阅读:
    openjump遇到的一些问题
    kettle安装教程/安装失败
    C# string和byte[]数组之间相互转换
    C# 各种进制转换
    C#AE创建FeatureDataset/创建数据、集要素集
    ArcCatalog/arcgis怎么连接postgresql/postpis
    梦断代码阅读笔记03
    体温冲刺完成
    体温冲刺
    体温作业
  • 原文地址：https://www.cnblogs.com/yunxizfj/p/1204502.html
Copyright © 2011-2022 走看看