如果不用第三方控件，做一个树形菜单有多难？
写在前面：如果是我自己做东西，我不喜欢使用第三方控件，喜欢"闭门造车"，当然在我的车快造好了，or造不下去了的时候我还是会打开那扇关闭的门的http://www.agoit.com/images/smiles/icon_sad.gif首先，建一个数据表（Oracle 11g）
CREATE TABLE wb_terms (id INTEGER NOT NULL,"NAME" VARCHAR2(200) NOT NULL,parent INTEGER DEFAULT 0 NOT NULL)
插入几条测试数据，如下：
http://dl.iteye.com/upload/attachment/0073/2480/fa2c89e5-10c8-30e7-ba2c-f81b58701912.jpg
后台采用递归查询，想办法将数据返回到前台
SELECT t.*FROM WB_TERMS tSTART WITH t.id=0 CONNECT BY NOCYCLE PRIOR t.id=t.parentORDER SIBLINGS BY t.id ASC
重点是前台js，首先要确保在前台页面中包含如下内容
<div id="category_inside" class="inside">
就是一个空 div，呵呵
var categoryDiv = "#category_inside"; $(categoryDiv).html("loading...");// 此处采用jquery ajax获得数据，当然你可以使用你喜欢的任何方式 $.get('your_url', null, function (data, textStatus) { $(categoryDiv).html('');/*data.successList为后台返回的数据集合*/ $.each(data.successList, function(key, value) { if ($(categoryDiv).html().trim() == '') { $(categoryDiv).append("<ul id='id_" + value.parent + "'></ul>"); } else if ($(categoryDiv + " ul").size() == 0) { $(categoryDiv + " li").append("<ul id='id_" + value.parent + "'></ul>"); } $(categoryDiv + " ul").append("<li id='id_" + value.id + "'><label><input type='checkbox' id='" + value.id + "' value='" + value.name + "' name='category'/>" + value.name + "</label></li>"); }); });
最后再附赠一个CSS
#category_inside { width: auto; margin: 10px; padding-left: 10px; background-color: #FFFFFF; border: 1px solid #DFDFDF;}ul { list-style-type: none; padding: 0;}li ul { padding-left: 20px; padding-top: 0; padding-bottom: 0;}li label input { margin-right: 10px;} 最终效果如下：
http://dl.iteye.com/upload/attachment/0073/2476/75692e8c-d05e-3388-a024-59d9587ade2a.jpg
为了实现此树形菜单总共使用了8行js代码，而且其中2行还完全是由括号组成的，反正我感觉挺简单的，你呢？
页:
[1]