一丶形成列表的数据库表结构要求，css要求
1丶形成列表的数据库表结构如下
注释：id代表各个行的id,parentID代表各个列的依附id（第一列为0）,name代表名字,img_url代表显示图片,deep代表列的深度,数据库可以写存储过程，但添加，删除，修改后需要返回全部数据
范例SQL如下
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for Tree
-- ----------------------------
DROP TABLE IF EXISTS `Tree`;
CREATE TABLE `Tree` (
`id` int(36) NOT NULL AUTO_INCREMENT,
`parentID` varchar(36) NOT NULL,
`name` varchar(100) NOT NULL,
`img_url` varchar(255) DEFAULT NULL,
`deep` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=94 DEFAULT CHARSET=utf8;
INSERT INTO `Tree` VALUES ('0', 'null', '源目录', 'http://api.1473.cn/Uform/Image/tree/folder.png', '0');
INSERT INTO `Tree` VALUES ('1', '0', '目录一', 'http://api.1473.cn/Uform/Image/tree/folder.png', '1');
INSERT INTO `Tree` VALUES ('2', '0', '目录二', 'http://api.1473.cn/Uform/Image/tree/folder.png', '1');
INSERT INTO `Tree` VALUES ('5', '1', '目录五', 'http://api.1473.cn/Uform/Image/tree/folder.png', '2');
INSERT INTO `Tree` VALUES ('21', '5', '目录五一', 'http://api.1473.cn/Uform/Image/tree/folder.png', '3');
INSERT INTO `Tree` VALUES ('27', '1', '目录四', 'http://api.1473.cn/Uform/Image/tree/folder.png', '2');
INSERT INTO `Tree` VALUES ('28', '27', '目录六', 'http://api.1473.cn/Uform/Image/tree/folder.png', '3');
INSERT INTO `Tree` VALUES ('93', '92', '222', 'http://api.1473.cn/Uform/Image/tree/folder.png', '3');
INSERT INTO `Tree` VALUES ('114', '3', '222', 'http://api.1473.cn/Uform/Image/tree/folder.png', '2');
INSERT INTO `Tree` VALUES ('115', '114', '111', 'http://api.1473.cn/Uform/Image/tree/folder.png', '3');
INSERT INTO `Tree` VALUES ('116', '0', '目录三', 'http://api.1473.cn/Uform/Image/tree/folder.png', '1');
2丶主要CSS要求
范例CSS如下
.U_MD_UI_Tree_a{
width:200px;
cursor: pointer;
padding: 0;
margin-left:15px;
line-height: 30px;
display:block;
font-size: 18px;
list-style:none;
}
/*代表右侧树状图每一列ul标签CSS*/
.U_MD_UI_Tree_listyle{
/* color: red;*/
margin-left:10px;
cursor: pointer;
margin-top:10px;
}
/*代表右侧树状图每一列li标签CSS*/
.U_MD_UI_Tree_imgstyle{
}
/*代表右侧树状图每一列img标签CSS*/
.U_MD_UI_Tree_spanstyle{
margin-left: 10px;
}
/*代表右侧树状图每一列span标签CSS*/
.U_MD_UI_Tree_styleli{
width:180px;
margin-top:5px;
height:50px;
text-align:center;
font-size:20px;
float:left;
}
/*代表左侧管理页面中每一个li的css*/
#U_MD_UI_Tree_button1{
width:10px;
height:12px;
margin-left:10px;
background: url("http://api.1473.cn/Uform/Image/tree/Update.png");
background-size: 100%;
border:none;
}
/*代表左侧侧中目录中每一个修改按钮的CSS*/
#U_MD_UI_Tree_button2{
width:10px;
height:12px;
margin-left:10px;
background: url("http://api.1473.cn/Uform/Image/tree/Detele.png");
background-size: 100%;
border:none;
}
/*代表左侧侧中目录中每一个删除按钮的CSS*/
.U_MD_UI_Tree_add{
width:280px;
height:65px;
margin-top:5px;
background:#224dbb;
font-size:20px;
text-align:center;
line-height:60px;
margin-left:10px;
cursor: pointer;
color:white;
}
/*代表右侧中目录中每一个删除按钮的CSS*/
.U_MD_UI_Tree_rightli{
width:138px;
height:50px;
line-height:50px;
text-align: center;
border:1px solid #a09e9e;
}
/*菜单栏中每一个li的css*/