实现树形结构

1、数据库结构

环境：mysql + vs2010 + mvc4.5

/*
Navicat MySQL Data Transfer

Source Server         : localhost
Source Server Version : 50614
Source Host           : localhost:3306
Source Database       : amydb

Target Server Type    : MYSQL
Target Server Version : 50614
File Encoding         : 65001

Date: 2014-07-04 14:04:49
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `tb_tree`
-- ----------------------------
DROP TABLE IF EXISTS `tb_tree`;
CREATE TABLE `tb_tree` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL DEFAULT '',
  `pid` int(11) DEFAULT NULL,
  `level` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of tb_tree
-- ----------------------------
INSERT INTO `tb_tree` VALUES ('1', '书籍', null, '0');
INSERT INTO `tb_tree` VALUES ('2', '日常用品', null, '0');
INSERT INTO `tb_tree` VALUES ('3', '牙膏', '2', '1');
INSERT INTO `tb_tree` VALUES ('4', '牙刷', '2', '1');
INSERT INTO `tb_tree` VALUES ('5', '操作系统', '1', '1');
INSERT INTO `tb_tree` VALUES ('6', '学科类型', null, '0');
INSERT INTO `tb_tree` VALUES ('7', '自然学科', '6', '1');
INSERT INTO `tb_tree` VALUES ('8', '操作系统原理', '5', '2');
INSERT INTO `tb_tree` VALUES ('9', 'Linux操作系统', '5', '2');
INSERT INTO `tb_tree` VALUES ('10', 'windows操作系统', '5', '2');

2、获取数据

 public List<MTree> QueryAllTree(IDbConnection conn, IDbTransaction trans)
        {
            List<MTree> list = new List<MTree>();
            string str = @"
                         SELECT id, name, pid, level
                         FROM tb_tree
                        ";

            using (MySqlDataReader reader = MySqlHelper.ExecuteReader(conn.ConnectionString, str))
            {
                if (reader.HasRows)
                {
                    while (reader.Read())
                    {
                        MTree model = new MTree();
                        model.ID = Convert.ToInt32(reader["id"].ToString());
                        model.Name = reader["name"] == DBNull.Value ? string.Empty : reader["name"].ToString();
                        model.PID = reader["pid"] == DBNull.Value ? 0 : Convert.ToInt32(reader["pid"].ToString());
                        model.Level = reader["level"] == DBNull.Value ? 0 : Convert.ToInt32(reader["level"].ToString());
                        list.Add(model);
                    }
                }
            }

            return list;
        }

3、前台显示 

 @model List<Better.Amy.IDao.MTree> 
@{
    ViewBag.Title = "DynamicTree";
}

<script src="~/javascript/jquery-1.7.2.min.js"></script>
<script src="~/javascript/DynamicTree.js"></script>
<style type="text/css">
    a
    {
        width:30px;
    }

</style>

<h2>树</h2>
<div id="content">
    <div id="left" style ="float:left;overflow:auto;min-width:600px;">
        @if(Model!= null && Model.Count > 0){
            List<Better.Amy.IDao.MTree> level0 = Model.FindAll(p => p.Level == 0);
            foreach(var item in level0)
            {
                <a id="@item.ID" href="javascript:void(0);">@item.Name</a><br />
                List<Better.Amy.IDao.MTree> level1 = Model.FindAll(p => p.Level == 1 && p.PID == item.ID);
                if (level1 != null && level1.Count > 0)
                {
                    <div class='@item.ID' style="display:none;margin-left:20px;">
                    @foreach (var j in level1)
                    {
                        <a id ="@j.ID" href="javascript:void(0);">@j.Name</a><br />
                        
                        List<Better.Amy.IDao.MTree> level2 = Model.FindAll(p => p.Level == 2 && p.PID == j.ID);
                        if (level2.Count > 0){
                        <div class="@j.ID" style="display:none; margin-left:35px;">
                           @foreach(var k in level2)
                           {
                                <a id="@k.ID" href="javascript:void(0);">@k.Name</a> <br />
                           }

                        </div>
                    }
                    }
                    </div>
                }
                }
            }
    </div>
    <div id="right" style="float:right; overflow:auto;"></div>
    <div style="clear:both;"></div>
</div>

4、js控制

(function (window) {
    $(function () {
        $('a').click(function () {
            var id = $(this).attr('id');
            if ($('.' + id).is(":hidden")) {
                $('.' + id).show();
            } else {
                $('.' + id).hide();
            }
        });
    });
})(window)

5、运行结果