前端 - bootstrap樹形菜單

1、環境：

1.1：JDK -->1.8.0_131

1.2：ORACLE --> 11g

2.開發工具

2.1：eclipse --》 Version: Mars Release (4.5.0)
Build id: 20150621-1200

3.前端頁面所需要的js文件和css文件

3.1：css --》

<link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet" />

3.2：js --》

<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/static/js/bootstrap.min.js" charset="utf-8"></script>
    

4.先在bootstrap官網上抄一個靜態頁面

如下：

jsp：

<div class="tree well">
        <ul>
            <li>
                <span><i class="icon-folder-open"></i> 頂級節點1</span> <a href="">Goes somewhere</a>
                <ul>
                    <li>
                        <span><i class="icon-minus-sign"></i> 一級節點1</span> <a href=""></a>
                        <ul>
                            <li>
                                <span><i class="icon-leaf"></i> 二級節點1_1</span> <a href=""></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span><i class="icon-minus-sign"></i> 一級節點2</span> <a href=""></a>
                        <ul>
                            <li>
                                <span><i class="icon-leaf"></i>二級節點2_1</span> <a href=""></a>
                            </li>
                            <li>
                                <span><i class="icon-minus-sign"></i> 二級節點2_2</span> <a href=""></a>
                                <ul>
                                    <li>
                                        <span><i class="icon-minus-sign"></i>三級節點2_1</span> <a href=""></a>
                                        <ul>
                                            <li>
                                                <span><i class="icon-leaf"></i>四級節點2_1</span> <a href=""></a>
                                            </li>
                                            <li>
                                                <span><i class="icon-leaf"></i> 四級節點2_2</span> <a href=""></a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span><i class="icon-leaf"></i>三級節點2_2</span> <a href=""></a>
                                    </li>
                                    <li>
                                        <span><i class="icon-leaf"></i> 三級節點2_3</span> <a href=""></a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <span><i class="icon-leaf"></i>二級節點2_3</span> <a href=""></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span><i class="icon-folder-open"></i> 頂級節點2</span> <a href=""></a>
                <ul>
                    <li>
                        <span><i class="icon-leaf"></i> 一級節點2_1</span> <a href=""></a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

js：

<script type="text/javascript">
	$(function(){
  		$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); //給ul添加parent_li後再在span標籤加上 title屬性
  	 	$('.tree li.parent_li > span').on('click', function (e) {	//循環遍歷span標籤並監聽點擊事件,如果顯示（visible）,讓它在隱藏的同時改變title和圖像
			var children = $(this).parent('li.parent_li').find(' > ul > li');
     		if (children.is(":visible")) {
          		children.hide('fast');
       			$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
       		} else {
            	children.show('fast');//Expand this branch
            	$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
       		}
     		
			e.stopPropagation();
   		});
	});	
	
    </script>

效果圖如下：

在去掉 style.css 樣式文件後的樣子爲：

由上我們發現 style.css是它的一個基礎樣式文件。 首先得聲明一個 class="tree well"的div，然後在裏面無限延伸 <li></li>標籤。

5.下面是動態獲取樹形菜單代碼

5.1： oracle數據腳本如下

create table country(
	countryId int,
	countryName varchar2(100),
	countryCode varchar2(100)
);
alter table country add constraint pk_c_countryId primary key (countryId); 
insert into country values (1, '中國', 'CHINA');
insert into country values (2, '日本', 'JAPAN');
insert into country values (3, '美國', 'USA');
insert into country values (4, '俄羅斯', 'RSA');

create table province(
	provinceId int,
	provinceName varchar2(100),
	provinceCode varchar2(100),
	countryId int
);
alter table province add constraint pk_p_provinceId primary key (provinceId); 
alter table province add constraint fk_p_countryId foreign key (countryId) references country(countryId); 
insert into province values (1, '廣東', 'GD', 1);
insert into province values (2, '安徽', 'AH', 1);
insert into province values (3, '江西', 'JX', 1);

insert into province values (4, '九州地區', 'JZ_REGION', 2); --長崎、鹿兒島、熊本、宮崎
insert into province values (5, '四國地區', 'SG_REGION', 2); --香川、德島、高知、愛媛
insert into province values (6, '北海道地區', 'BHD_REGION', 2); --稚內、知牀、小樽
insert into province values (7, '東北地區', 'DB_REGION', 2); --青森、秋田、巖手、福島、山形
insert into province values (8, '關東地區', 'GD_REGION', 2); --東京、神奈川、琦玉、千葉、羣馬、

insert into province values (9, '華盛頓州', 'Washington', 3); --西雅圖、華盛頓、溫哥華、哥倫比亞特區
insert into province values (10, '內華達州', 'Nevada', 3); --拉斯維加斯, 瑞歐
insert into province values (11, '加利福尼亞州', 'Californie', 3);--洛杉磯、舊金山、伯克利、奧克蘭、薩克拉門託、聖迭戈
insert into province values (12, '俄亥岡州', 'Oregon', 3); --波特蘭，科瓦利斯，塞倫市
insert into province values (13, '中央聯邦區', 'Center Union', 4); -- 別爾哥羅德州（Белгородская Область）														
insert into province values (14, '南部聯邦區', 'North Union', 4);															
insert into province values (15, '北高加索聯邦區', 'Ciscaucasia Union', 4); 
																	



create table city(
	cityId int,
	cityName varchar2(100),
	cityCode varchar2(100),
	provinceId int
);
create sequence seq_city_cityId start with 1 increment by 1;
alter table city add constraint pk_c_cityId primary key (cityId); 
alter table city add constraint fk_c_provinceId foreign key (provinceId) references province(provinceId); 

insert into city values (seq_city_cityId.nextval, '深圳', 'sz', 1);
insert into city values (seq_city_cityId.nextval, '惠州', 'hz', 1);
insert into city values (seq_city_cityId.nextval, '廣州', 'gz', 1);
insert into city values (seq_city_cityId.nextval, '香港', 'hk', 1);
insert into city values (seq_city_cityId.nextval, '澳門', 'am', 1);
insert into city values (seq_city_cityId.nextval, '東莞', 'dg', 1);
insert into city values (seq_city_cityId.nextval, '蚌埠', 'bb', 2);
insert into city values (seq_city_cityId.nextval, '安慶', 'aq', 2);
insert into city values (seq_city_cityId.nextval, '黃山', 'hs', 2);
insert into city values (seq_city_cityId.nextval, '銅陵', 'sz', 2);
insert into city values (seq_city_cityId.nextval, '九江', 'jj', 3);
insert into city values (seq_city_cityId.nextval, '南昌', 'nc', 3);

insert into city values (seq_city_cityId.nextval, '長崎' , 'changqi', 4);
insert into city values (seq_city_cityId.nextval, '鹿兒島', 'luerdao', 4);
insert into city values (seq_city_cityId.nextval, '熊本' , 'xiongben', 4);
insert into city values (seq_city_cityId.nextval, '宮崎' , 'gongqi', 4);
insert into city values (seq_city_cityId.nextval, '香川' , 'xiangchuan', 5);
insert into city values (seq_city_cityId.nextval, '德島' , 'dedao', 5);
insert into city values (seq_city_cityId.nextval, '高知' , 'gaozhi', 5);
insert into city values (seq_city_cityId.nextval, '愛媛' , 'aiyuan', 5);
insert into city values (seq_city_cityId.nextval, '稚內' , 'zhinei', 6);
insert into city values (seq_city_cityId.nextval, '知牀' , 'zhichuang', 6);
insert into city values (seq_city_cityId.nextval, '小樽' , 'xiaozun', 6);
insert into city values (seq_city_cityId.nextval, '青森' , 'qingsen', 7);
insert into city values (seq_city_cityId.nextval, '秋田' , 'qiutian', 7);
insert into city values (seq_city_cityId.nextval, '巖手' , 'yanshou', 7);
insert into city values (seq_city_cityId.nextval, '福島' , 'fudao', 7);
insert into city values (seq_city_cityId.nextval, '山形' , 'shanxing', 7);
insert into city values (seq_city_cityId.nextval, '東京' , 'dongging', 8);
insert into city values (seq_city_cityId.nextval, '神奈川', 'shennaichuan', 8);
insert into city values (seq_city_cityId.nextval, '琦玉' , 'qiyu', 8);
insert into city values (seq_city_cityId.nextval, '千葉' , 'qianye', 8);
insert into city values (seq_city_cityId.nextval, '羣馬' , 'qunma', 8);

insert into city values (seq_city_cityId.nextval, '西雅圖' , 'xyt', 9);
insert into city values (seq_city_cityId.nextval, '華盛頓', 'hsd', 9);
insert into city values (seq_city_cityId.nextval, '溫哥華' , 'wgh', 9);
insert into city values (seq_city_cityId.nextval, '哥倫比亞特區' , 'glbytq', 9);
insert into city values (seq_city_cityId.nextval, '拉斯維加斯' , 'lswjs', 10);
insert into city values (seq_city_cityId.nextval, '瑞歐' , 'ro', 10);
insert into city values (seq_city_cityId.nextval, '洛杉磯' , 'lsj', 11);
insert into city values (seq_city_cityId.nextval, '舊金山' , 'jjs', 11);
insert into city values (seq_city_cityId.nextval, '伯克利' , 'bkl', 11);
insert into city values (seq_city_cityId.nextval, '奧克蘭' , 'akl', 11);
insert into city values (seq_city_cityId.nextval, '薩克拉門託' , 'sklmt', 11);
insert into city values (seq_city_cityId.nextval, '聖迭戈' , 'sdg', 11);
insert into city values (seq_city_cityId.nextval, '波特蘭' , 'btl', 12);
insert into city values (seq_city_cityId.nextval, '科瓦利斯' , 'kwls', 12);
insert into city values (seq_city_cityId.nextval, '塞倫市' , 'sls', 12);

insert into city values (seq_city_cityId.nextval, '布良斯克州', 'Брянская Область', 13);
insert into city values (seq_city_cityId.nextval, '伊萬諾沃州' , 'Ивановская область', 13);
insert into city values (seq_city_cityId.nextval, '卡盧加州' , 'Калужская Область', 13);
insert into city values (seq_city_cityId.nextval, '科斯特羅馬州' , 'Костромская Область', 13);
insert into city values (seq_city_cityId.nextval, '庫爾斯克州' , 'Курскская Область', 13);
insert into city values (seq_city_cityId.nextval, '利佩茨克洲' , 'Липецская Область', 13);
insert into city values (seq_city_cityId.nextval, '莫斯科直轄市' , 'Москва', 13);
insert into city values (seq_city_cityId.nextval, '莫斯科州' , 'Московская Область', 13);
insert into city values (seq_city_cityId.nextval, '奧廖爾州' , 'Орёл / Орловская область', 13);
insert into city values (seq_city_cityId.nextval, '梁贊州' , 'Рязанская Область', 13);
insert into city values (seq_city_cityId.nextval, '斯摩棱斯克州' , 'Смоленская Область', 13);
insert into city values (seq_city_cityId.nextval, '坦波夫州' , 'Тамбовская Область', 13);
insert into city values (seq_city_cityId.nextval, '特維爾州' , 'Тверская область', 13);
insert into city values (seq_city_cityId.nextval, '圖拉州' , 'Тульская область', 13);
insert into city values (seq_city_cityId.nextval, '弗拉基米爾州' , 'Владимирская область', 13);
insert into city values (seq_city_cityId.nextval, '沃羅涅日州' , 'Воронежская область', 13);
insert into city values (seq_city_cityId.nextval, '雅羅斯拉夫爾州', 'Ярославская Область', 13);
insert into city values (seq_city_cityId.nextval, '阿迪格共和國' , 'Республика Адыгея', 14);
insert into city values (seq_city_cityId.nextval, '阿斯特拉罕州' , 'Астраханская Область', 14);
insert into city values (seq_city_cityId.nextval, '伏爾加格勒州' , 'Волгоградская Область', 14);
insert into city values (seq_city_cityId.nextval, '卡爾梅克共和國' , 'Калмыкия-Кхалмтангч Республика', 14);
insert into city values (seq_city_cityId.nextval, '克拉斯諾達爾邊疆區', 'Краснодарский край', 14);
insert into city values (seq_city_cityId.nextval, '羅斯托夫州' , 'Ростовская Область', 14);
insert into city values (seq_city_cityId.nextval, '克里米亞共和國' , 'Республика Крым', 14);
insert into city values (seq_city_cityId.nextval, '塞瓦斯托波爾直轄市' , 'Севастополь', 14);
insert into city values (seq_city_cityId.nextval, '達吉斯坦共和國' , 'Республика Дагестан', 15);
insert into city values (seq_city_cityId.nextval, '印古什共和國' , 'Республика Ингушетия', 15);
insert into city values (seq_city_cityId.nextval, '卡巴爾達-巴爾卡爾共和國' , 'Кабардино-Балкарская республика', 15);
insert into city values (seq_city_cityId.nextval, '卡拉恰伊－切爾克斯共和國 ' , 'Карачаево-Черкесская республика', 15);
insert into city values (seq_city_cityId.nextval, '斯塔夫羅波爾邊 疆區' , 'Ставропольский край', 15);
insert into city values (seq_city_cityId.nextval, '北奧塞梯-阿蘭共和國' , 'Республика Северная Осетия–Алания', 15);
insert into city values (seq_city_cityId.nextval, '車臣共和國' , 'Чеченская республика', 15);

5.2：動態jsp頁面主要代碼爲

5.2.1 導入jstl核心包  

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

5.2.2 主要頁面顯示代碼

<div class="tree well">
    	<c:if test="${countsWithDetail != null }">
    		<ul>
    		<c:forEach items="${countsWithDetail}" var="countryItem">
                	<li>
                    	<span><i class="icon-folder-open"></i>${countryItem.countryName }</span> <a href=""></a>
                    	<ul>
                    	<c:forEach items="${countryItem.provinces}" var="provinceItem">
                				<li>
                    				<span><i class="icon-minus-sign"></i>${provinceItem.provinceName }</span> <a href=""></a>
                    				<ul>
                    					<c:forEach items="${provinceItem.cities}" var="cityItem">
                                            <li>
                                                <span><i class="icon-leaf"></i>${cityItem.cityName }</span> <a href=""></a>
                                            </li>
                    					</c:forEach>
                                	</ul>
                    			</li>
                    	</c:forEach>
               	 		</ul>
                    </li>
    		</c:forEach>
            </ul>
    	</c:if>
    </div>

5.2.3 js代碼

 <script type="text/javascript">
	$(function(){
  		$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
  	 	$('.tree li.parent_li > span').on('click', function (e) {
			var children = $(this).parent('li.parent_li').find(' > ul > li');
     		if (children.is(":visible")) {
          		children.hide('fast');
       			$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
       		} else {
            	children.show('fast');//Expand this branch
            	$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
       		}
     		
			e.stopPropagation();
   		});
	});
	/*想後臺請求數據*/
	$.ajax({
		type: "POST",
		url: "country/getAllCountryWithDetail",
		dataType: "json",
		success: function(data){
			console.info(data);
		}
	});
	
	
    </script>

5.2.4 後臺Controller代碼

@RequestMapping(value = "/getAllCountryWithDetail", method = RequestMethod.POST)
	@ResponseBody
	public List<Country> getAllCountryWithDetail(HttpSession session){
		List<Country> countrys = new ArrayList<Country>();
		countrys = countryService.getAllCountryWithDetail();
		session.setAttribute("countsWithDetail", countrys);
		return countrys;
	}

5.2.5  效果展示