实现树形结构

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、运行结果