樹形列表的展示

2021-09-26 00:15:54 字數 2580 閱讀 8571

1.作用

實現選單等具有層級結構的資料在頁面以樹形結構顯示。

2.實現過程

1資料庫

因為要想將資料已樹形結構顯示,必須資料就要有層級關係,本文以中國行政區域資料庫為例:

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');

2.開發框架

本人以ssm框架為開發框架,但是**符合所有框架平台,附ssm框架搭建步驟:	

3.sql查詢語句

/*

**首先第一查詢語句用來查詢第一級的資料,本文查詢第一級**如下

*/ 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 = #;

4.service層實現方法

public list> getintree()

}}return alldata ;

}public list> inittree(entity entity)else

}return map;

}

5.controller類方法

呼叫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...