带线的无限级下拉树列表-完整示例篇

今天在群里有人问起了我一个比较远古的问题：带线的无限级下拉树列表他运行不起来。

最关键的又扯上了CYQ.Data 框架，让我一时觉得比较悬，因为文章是08年时写的，而框架最今年才发力完善的，

所以两者应该是没啥联系的，不过这一问也好，给了我一个写此文章的机会。

ps：他把示例的其它代码当成是 CYQ.Data 框架 里的代码。

 

 

本文将对之前的代码进行小小的简化，并为之建立一个完整的应用示例，以下为正式应用步骤：

 

一：新建项目

1：将IDropDownTree及DropDownTree放到类里，如下图：

简化后的代码如下：

IDropDownTree：

IDropDownTree

 

DropDownTree：

DropDownTree

 

二：数据库数据准备

1：为方便示例，这里用了Access数据库，新建一个Product表，并为之添加了几行数据，如图：

 

三：引用CYQ.Data框架来实现

1：项目添加CYQ.Data引用

2：新建ProductTree类，实现IDropDownTree接口

A：为表增加枚举，如下：

namespace Entity
{
    public enum TableNames
    {
        Product
    }
    public enum Product
    {
        ID,
        ParentID,
        Name
    }

 

B：实现接口

using Tree;
using CYQ.Data;
using Entity;
using CYQ.Data.Table;
using System.Collections.Generic;

namespace Tree
{
    ///  summary
    /// 作者：路过秋天
    /// 博客：http://cyq1162.cnblogs.com
    /// 秋色园：http://www.cyqdata.com
    ///  /summary
    public class ProductTree : IDropDownTree
    {
        int count = 0;
        private MAction action;
        public ProductTree()
        {
            action = new MAction(TableNames.Product);
        }

        #region IDropDownTree 成员

        public Dictionary string, string  GetChildList(string parentID)
        {

            MDataTable table = action.Select(0, 0, "ParentID=" + parentID, out count);
            Dictionary string, string  dic = null;
            if (count   0)
            {
                dic = new Dictionary string, string ();
                foreach (MDataRow row in table.Rows)
                {
                    dic.Add(row.Get string (Product.ID), row.Get string (Product.Name));
                }
            }
            return dic;
        }

        public DropDownTree DropDownTree
        {
            get
            {
                return new DropDownTree(this);
            }
        }

        #endregion

        #region IDisposable 成员

        public void Dispose()
        {
            action.Close();
        }

        #endregion
    }

项目解决方案如下图：

 

四：展示应用结果

1：新建测试站点WebDemo项目，并将数据库放到App_Data目录下,如图：

2：Web.config配置好数据库链接如下：

appSettings
     add key="AccessDbNameForWeb" value="App_Data/tree.mdb"/
/appSettings
connectionStrings
     add name="Conn" connectionString="Provider=Microsoft.Jet.OLEDB.4.0; Data Source={0}" providerName="System.Data.OleDb"/
/connectionStrings
一.浮动布局 1.先让固定宽度的div浮动！使其脱离文档流。 2.margin-left的值等于固定div的宽度相等。