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