列分别为 id、菜单名称、子菜单id列表
id:菜单的唯一编号
子菜单id列表:用逗号(或其他分隔符)分割的多个id的字符串,再由程序中进行处理,分割出多个id;
优点:查询速度非常快。
缺点:不利于维护和拓展,在进行菜单项排序时需要再多写代码进行处理。
第二种:单表内连接。
列分别为 id、菜单名称、父菜单id
根节点的父菜单id为null或者0等一个可以唯一标志的。在查询时进行表内连接查询;
优点:利于表结构的维护和拓展,并且符合设计范式;
缺点:在查询时会造成一些麻烦,并且性能上会受到影响。
当然还有很多其他的方法,这里只例举2个比较常用的方法。
举个例子吧,我用的表结构是这样的,你可以参考下名称 类型约束条件 说明type_id int 无重复 类别标识,主键
type_name char(50)不允许为空 类型名称,不允许重复
type_father int 不允许为空 该类别的父类别标识,如果是顶节点的话设定为某个唯一值
type_layerchar(6) 限定3层,初始值为000000 类别的先序遍历,主要为减少检索数据库的次数按照这样的表结构,我们来看看上面例子记录在表中的数据是怎样的:type_id type_name type_father type_layer
1 总类别 0 000000
2 类别11 010000
3 类别1.1 2 010100
4 类别1.2 2 010200
5 类别21 020000
6 类别2.1 5 020100
7 类别31 030000
8 类别3.1 7 030100
9 类别3.2 7 030200
10类别1.1.13 010101
……现在按type_layer的大小来检索一下:SELECT * FROM Type_table_2 ORDER BY type_layer列出记录集如下:type_id type_name type_father type_layer
1 总类别 0 000000
2 类别11 010000
3 类别1.1 2 010100
10类别1.1.13 010101
4 类别1.2 2 010200
5 类别21 020000
6 类别2.1 5 020100
7 类别31 030000
8 类别3.1 7 030100
9 类别3.2 7 030200
……
jsp从mysql数据库读取数据,并填充到树形结构菜单并展现出来的实现方法:
1、引入jquery.treeview.js树控件
<script type="text/javascript" src="jquery/easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery/easyui/jquery.easyui.min.js"></script>
2、jsp页面中获取后台mysql数据,并传到jsp页面来
<%
// 数据库的名字
String dbName = "zap"
// 登录数据库的用户名
String username = "sa"
// 登录数据库的密码
String password = "123"
// 数据库的IP地址,本机可以用 localhost 或者 127.0.0.1
String host = "127.0.0.1"
// 数据库的端口,一般不会修改,默认为1433
int port = 1433
String connectionUrl = "jdbc:sqlserver://" + host + ":" + port + "databaseName=" + dbName + "user=" + username
+ "password=" + password
//
//声明需要使用的资源
// 数据库连接,记得用完了一定要关闭
Connection con = null
// Statement 记得用完了一定要关闭
Statement stmt = null
// 结果集,记得用完了一定要关闭
ResultSet rs = null
try {
// 注册驱动
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver")
// 获得一个数据库连接
con = DriverManager.getConnection(connectionUrl)
String SQL = "SELECT * from note"
// 创建查询
stmt = con.createStatement()
// 执行查询,拿到结果集
rs = stmt.executeQuery(SQL)
while (rs.next()) {
%>
<tr>
3、填充树形菜单:
{
id : "string" // will be autogenerated if omitted
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
},
children : [] // array of strings or objects
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}
$('#tree').jstree({
'core' : {
'data' : function (obj, cb) {
cb.call(this,
['Root 1', 'Root 2'])
}
}})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)