如果不用第三方控件，做一个树形菜单有多难？

写在前面：如果是我自己做东西，我不喜欢使用第三方控件，喜欢"闭门造车"，当然在我的车快造好了，or造不下去了的时候我还是会打开那扇关闭的门的

 

首先，建一个数据表（Oracle 11g）

 

CREATE TABLE wb_terms (
  id          INTEGER       NOT NULL,
  "NAME"        VARCHAR2(200) NOT NULL,
  parent      INTEGER       DEFAULT 0 NOT NULL
)

 

 插入几条测试数据，如下：

 
后台采用递归查询，想办法将数据返回到前台

 

SELECT 
  t.*
FROM 
  WB_TERMS t
START WITH 
  t.id=0 
CONNECT BY NOCYCLE PRIOR 
  t.id=t.parent
ORDER 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[id=id_" + value.parent + "]").size() == 0) {
                $(categoryDiv + " li[id=id_" + value.parent + "]").append("<ul id='id_" + value.parent + "'></ul>");
            }

            $(categoryDiv + " ul[id=id_" + value.parent + "]").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[type="checkbox"] {
    margin-right: 10px;
}

 最终效果如下：

为了实现此树形菜单总共使用了8行js代码，而且其中2行还完全是由括号组成的，反正我感觉挺简单的，你呢？