1.作用
實現選單等具有層級結構的資料在頁面以樹形結構顯示。
2.實現過程
1資料庫
因為要想將資料已樹形結構顯示,必須資料就要有層級關係,本文以中國行政區域資料庫為例:
2.開發框架set foreign_key_checks=0;
-- ----------------------------
-- table structure for administrative_region_of_china
-- ----------------------------
drop table if exists `administrative_region_of_china`;
create table `administrative_region_of_china` (
`arc_id` int(11) not null auto_increment comment '行政區id',
`arc_name` varchar(20) default null comment '行政區名稱',
`arc_up_id` int(11) default null comment '上級行政區id',
`is_last` int(11) default null comment '是否為最後一級,1表示是,0表示不是',
primary key (`arc_id`)
) engine=innodb auto_increment=11 default charset=utf8;
-- ----------------------------
-- records of administrative_region_of_china
-- ----------------------------
insert into `administrative_region_of_china` values ('1', '中國', '0','0');
insert into `administrative_region_of_china` values ('2', '北京', '1','0');
insert into `administrative_region_of_china` values ('3', '甘肅', '1','0');
insert into `administrative_region_of_china` values ('4', '天水', '3','0');
insert into `administrative_region_of_china` values ('5', '慶陽', '3','0');
insert into `administrative_region_of_china` values ('6', '蘭州', '3','0');
insert into `administrative_region_of_china` values ('7', '秦州區', '4','1');
insert into `administrative_region_of_china` values ('8', '麥積區', '4','1');
insert into `administrative_region_of_china` values ('9', '朝陽區', '2','1');
insert into `administrative_region_of_china` values ('10', '海淀區', '2','1');
3.sql查詢語句本人以ssm框架為開發框架,但是**符合所有框架平台,附ssm框架搭建步驟:
4.service層實現方法/*
**首先第一查詢語句用來查詢第一級的資料,本文查詢第一級**如下
*/ select arc_id,arc_name,arc_up_id
from administrative_region_of_china
where arc_up_id = 0;
/***第二個查詢語句用來查詢第二級的資料,本文查詢第一級的子項資料,'#'表示父級id
*/ select arc_id,arc_name,arc_up_id
from administrative_region_of_china
where arc_up_id = #;
5.controller類方法public list> getintree()
}}return alldata ;
}public list> inittree(entity entity)else
}return map;
}
呼叫server層getintree方法即可
6.前端頁面展示
/*
**前端利用jquery樹形控制項 $.inittree();
jquery樹形控制項 $.inittree()詳情介紹:
*/function inittree(data));
}
樹形展示資料
1 1 核心 遞迴實現組裝數形資料 2public string getresourcetreetojson 56 7 生成josn8 param list9 return 10 11private string createtreejson listlist 18 19return rootarr...
根據樹形下拉框展示右側列表場景
一 場景圖示 這裡業務主要分為兩大部分,乙個左邊樹形結構,另乙個是根據左邊樹形結構展示右側列表。左邊樹形結構 全國是最大的主幹,主幹下面有主節點,每乙個主節點下面分為子節點。表的設計如下 一次性載入樹形結構 entity apimodel value 區域架構表 table name sys sel...
ElementUI Tree 樹形結構展示
我使用了節點過濾這個控制項,以下為elementui官方提供的 在需要對節點進行過濾時,呼叫 tree 例項的filter方法,引數為關鍵字。需要注意的是,此時需要設定filter node method,值為過濾函式。placeholder 輸入關鍵字進行過濾 v model filtertext...