侧边栏多级动态导航栏---树形结构
- 侧边菜单导航的动态多级菜单
- 前端html+js+css动态构建树形
- 效果图：---可以在菜单上添加数字显示有多少子节点
- 代码
- 后端java
侧边菜单导航的动态多级菜单
前端用js或jQuery，使用递归创建树形节点，用css做显示效果结合鼠标或点击事件；后端java用递归或双层循环构构建children树形结构；数据结构如下（数据多且长，可跳过）—4颗树，一级菜单有4个：
[
{
"FCHILDREN": [
{
"FID": "26AF638F557949379588B330F03FC751",
"FNAME": "行政区划",
"FNUM": 0,
"FPARENTID": "1BE3A1EAD09347038A50DEBB0AE17860"
},
{
"FID": "B311287B63F94C24B4D8DF770B0831A5",
"FNAME": "路网",
"FNUM": 0,
"FPARENTID": "1BE3A1EAD09347038A50DEBB0AE17860"
},
{
"FID": "BB8457D08D9840BD835F6119A0B75DD2",
"FNAME": "数字正射影像",
"FNUM": 0,
"FPARENTID": "1BE3A1EAD09347038A50DEBB0AE17860"
}
],
"FID": "1BE3A1EAD09347038A50DEBB0AE17860",
"FNAME": "基础地理",
"FNUM": 3
},
{
"FCHILDREN": [
{
"FCHILDREN": [
{
"FID": "1924D2F8A5DE46438B5FF265EA254A0A",
"FNAME": "合法占用基本农田",
"FNUM": 0,
"FPARENTID": "3D57A6E368A8413392E67E30D7FECDEA"
},
{
"FID": "AD83D2F71B22434DB6D0AD7641180F81",
"FNAME": "合法占用已补基本农田",
"FNUM": 0,
"FPARENTID": "3D57A6E368A8413392E67E30D7FECDEA"
}
],
"FID": "3D57A6E368A8413392E67E30D7FECDEA",
"FNAME": "耕地保护管理",
"FNUM": 2,
"FPARENTID": "1EA723DA50CF48159A8D290478F630B4"
},
{
"FCHILDREN": [
{
"FID": "988A64946E0846868CA00A13D22B12BA",
"FNAME": "土地征收",
"FNUM": 0,
"FPARENTID": "8BA1B55A8E54450098BFCF273051F182"
}
],
"FID": "8BA1B55A8E54450098BFCF273051F182",
"FNAME": "建设项目管理",
"FNUM": 1,
"FPARENTID": "1EA723DA50CF48159A8D290478F630B4"
},
{
"FCHILDREN": [
{
"FCHILDREN": [
{
"FID": "190679BD9B3D4251ADE7F3F420935ED6",
"FNAME": "地质灾害易发区",
"FNUM": 0,
"FPARENTID": "8DF123370D1646A1B3DC16CA051F7FA5"
}
],
"FID": "8DF123370D1646A1B3DC16CA051F7FA5",
"FNAME": "地质灾害管理",
"FNUM": 1,
"FPARENTID": "8D666EE664754F5A8FBCA000C1DD032E"
}
],
"FID": "8D666EE664754F5A8FBCA000C1DD032E",
"FNAME": "地质管理",
"FNUM": 1,
"FPARENTID": "1EA723DA50CF48159A8D290478F630B4"
},
{
"FCHILDREN": [
{
"FID": "20B7F5EE97C3415DA37E9787A724CC6E",
"FNAME": "茶芽山历史遗留矿场处理",
"FNUM": 0,
"FPARENTID": "9C938C17DDBE42A6BB803F4544BBE22A"
},
{
"FID": "A313E2F84F6D45DD879262B4CEF31FE7",
"FNAME": "采空塌陷区范围",
"FNUM": 0,
"FPARENTID": "9C938C17DDBE42A6BB803F4544BBE22A"
}
],
"FID": "9C938C17DDBE42A6BB803F4544BBE22A",
"FNAME": "矿产资源管理",
"FNUM": 2,
"FPARENTID": "1EA723DA50CF48159A8D290478F630B4"
},
{
"FCHILDREN": [
{
"FID": "8BCA75DB7B1E4EA78223DA9F84C46714",
"FNAME": "设施农用地",
"FNUM": 0,
"FPARENTID": "A274176EF5A946A19F6ADFEA3CE0A88A"
}
],
"FID": "A274176EF5A946A19F6ADFEA3CE0A88A",
"FNAME": "设施农用地管理",
"FNUM": 1,
"FPARENTID": "1EA723DA50CF48159A8D290478F630B4"
},
{
"FCHILDREN": [
{
"FID": "689CC8383BDA45A4B686033CA9B878F8",
"FNAME": "2018林业一张图",
"FNUM": 0,
"FPARENTID": "E074C54D278442A7AFC96A429778D8A7"
}
],
"FID": "E074C54D278442A7AFC96A429778D8A7",
"FNAME": "林业管理",
"FNUM": 1,
"FPARENTID": "1EA723DA50CF48159A8D290478F630B4"
},
{
"FCHILDREN": [
{
"FID": "BC1194128C11471C9FACE1AC577AB957",
"FNAME": "临时用地",
"FNUM": 0,
"FPARENTID": "EBC09F8CC6C74E44B2ED08CB3CC8C1B4"
}
],
"FID": "EBC09F8CC6C74E44B2ED08CB3CC8C1B4",
"FNAME": "临时用地",
"FNUM": 1,
"FPARENTID": "1EA723DA50CF48159A8D290478F630B4"
}
],
"FID": "1EA723DA50CF48159A8D290478F630B4",
"FNAME": "管理数据",
"FNUM": 7
},
{
"FCHILDREN": [
{
"FCHILDREN": [
{
"FID": "83C10DF2214246FA9C5208BDB4F2FD39",
"FNAME": "地质灾害易发分区",
"FNUM": 0,
"FPARENTID": "0D734D3C9CD74DD6A121884BEE552EBB"
},
{
"FID": "E5BB451DDE7F4E1EADAB6305F47B6DC0",
"FNAME": "地质灾害隐患点",
"FNUM": 0,
"FPARENTID": "0D734D3C9CD74DD6A121884BEE552EBB"
}
],
"FID": "0D734D3C9CD74DD6A121884BEE552EBB",
"FNAME": "地质及环境调查",
"FNUM": 2,
"FPARENTID": "851C270FA3CF494698548305ABC42572"
},
{
"FCHILDREN": [
{
"FCHILDREN": [
{
"FCHILDREN": [
{
"FID": "347F2573016F4BDAAF8C39756411C4D4",
"FNAME": "三线一单成果数据",
"FNUM": 0,
"FPARENTID": "333CE128246D43E29D5DCEECC07F6054"
}
],
"FID": "333CE128246D43E29D5DCEECC07F6054",
"FNAME": "成果数据",
"FNUM": 1,
"FPARENTID": "F237366548A74AD09B65ED4FA1954039"
},
{
"FCHILDREN": [
{
"FID": "E8D6C0B769B0450A9D401725601328BA",
"FNAME": "三线一单支撑数据",
"FNUM": 0,
"FPARENTID": "8747ACED9968460AB2719DBFF4F16F19"
}
],
"FID": "8747ACED9968460AB2719DBFF4F16F19",
"FNAME": "支撑数据",
"FNUM": 1,
"FPARENTID": "F237366548A74AD09B65ED4FA1954039"
}
],
"FID": "F237366548A74AD09B65ED4FA1954039",
"FNAME": "三线一单",
"FNUM": 2,
"FPARENTID": "4BC03C86A8B7486A87C8C57AC937FDFF"
}
],
"FID": "4BC03C86A8B7486A87C8C57AC937FDFF",
"FNAME": "生态数据",
"FNUM": 1,
"FPARENTID": "851C270FA3CF494698548305ABC42572"
},
{
"FCHILDREN": [
{
"FID": "3928C57A95594B759825DDB56450739A",
"FNAME": "医院统计表",
"FNUM": 0,
"FPARENTID": "6F3492D5CE9C428F9901AD85945BC01B"
},
{
"FID": "F09E0E42F179484DAC4DEB55B46BE1C0",
"FNAME": "各社区/村社区卫生服务中心（站）、卫生室统计表",
"FNUM": 0,
"FPARENTID": "6F3492D5CE9C428F9901AD85945BC01B"
}
],
"FID": "6F3492D5CE9C428F9901AD85945BC01B",
"FNAME": "医卫数据",
"FNUM": 2,
"FPARENTID": "851C270FA3CF494698548305ABC42572"
},
{
"FCHILDREN": [
{
"FCHILDREN": [
{
"FID": "CC7455F71AD94055B8EBF7C86A1625A2",
"FNAME": "2017年林地图斑",
"FNUM": 0,
"FPARENTID": "8A1D2AD4AB6C4922A001A7F7B09BD67B"
},
{
"FID": "D5F90D082A6F4C57870476A398D2180B",
"FNAME": "2018年林地图斑",
"FNUM": 0,
"FPARENTID": "8A1D2AD4AB6C4922A001A7F7B09BD67B"
}
],
"FID": "8A1D2AD4AB6C4922A001A7F7B09BD67B",
"FNAME": "森林调查",
"FNUM": 2,
"FPARENTID": "832D8C45274447F693DF1DFDB751B1BE"
}
],
"FID": "832D8C45274447F693DF1DFDB751B1BE",
"FNAME": "林业数据",
"FNUM": 1,
"FPARENTID": "851C270FA3CF494698548305ABC42572"
},
{
"FCHILDREN": [
{
"FID": "4890D9A6BEBE4EABBB6866F7880E8EE6",
"FNAME": "市级以上文物保护单位（面图）",
"FNUM": 0,
"FPARENTID": "9951944A57C04935AA578AE066620951"
},
{
"FID": "5989168A3F084A2BA14FF2C58E132C7A",
"FNAME": "旅游分布",
"FNUM": 0,
"FPARENTID": "9951944A57C04935AA578AE066620951"
},
{
"FID": "6636E2369A6246819D479097712EB85F",
"FNAME": "美丽乡村",
"FNUM": 0,
"FPARENTID": "9951944A57C04935AA578AE066620951"
},
{
"FID": "F4B636266FF34A898183E8C342BA2001",
"FNAME": "市级以上文物保护单位（点图）",
"FNUM": 0,
"FPARENTID": "9951944A57C04935AA578AE066620951"
}
],
"FID": "9951944A57C04935AA578AE066620951",
"FNAME": "文物数据",
"FNUM": 4,
"FPARENTID": "851C270FA3CF494698548305ABC42572"
},
{
"FCHILDREN": [
{
"FID": "6CDFE330053F4404A2044D96D6101D9F",
"FNAME": "区域流域分水岭、主要河流源区",
"FNUM": 0,
"FPARENTID": "B92DD030A93848A08743C705B5B951BC"
}
],
"FID": "B92DD030A93848A08743C705B5B951BC",
"FNAME": "水资源数据",
"FNUM": 1,
"FPARENTID": "851C270FA3CF494698548305ABC42572"
},
{
"FCHILDREN": [
{
"FID": "08ECCDD77EE34F1ABA9D4C75A81FCC89",
"FNAME": "自然保护地",
"FNUM": 0,
"FPARENTID": "C264C9EF62F345E7BAB2C135565E3530"
}
],
"FID": "C264C9EF62F345E7BAB2C135565E3530",
"FNAME": "自然保护地体系",
"FNUM": 1,
"FPARENTID": "851C270FA3CF494698548305ABC42572"
},
{
"FCHILDREN": [
{
"FID": "DF6750D5D7C244C7BE6C36A2FF071BB7",
"FNAME": "中小学、中等职业教育、高校、科研院所等设施空间分布及服务能力",
"FNUM": 0,
"FPARENTID": "D43B0A58F87A43158F6BC936BD5C7364"
}
],
"FID": "D43B0A58F87A43158F6BC936BD5C7364",
"FNAME": "教育数据",
"FNUM": 1,
"FPARENTID": "851C270FA3CF494698548305ABC42572"
},
{
"FCHILDREN": [
{
"FCHILDREN": [
{
"FID": "15B4FE08165B45E0B0E62A12D4D96259",
"FNAME": "2015年土地利用现状",
"FNUM": 0,
"FPARENTID": "48C557BF27734BDBB160D51C4501E07C"
},
{
"FID": "3519AA60A2CD4EB7B8D474A843394AB8",
"FNAME": "2017年土地利用现状",
"FNUM": 0,
"FPARENTID": "48C557BF27734BDBB160D51C4501E07C"
},
{
"FID": "3B2A19EE90CD4667A09560144951B9B2",
"FNAME": "2012年土地利用现状",
"FNUM": 0,
"FPARENTID": "48C557BF27734BDBB160D51C4501E07C"
},
{
"FID": "50CCEB03F09B4C27BAA0870A052BC1A8",
"FNAME": "2013年土地利用现状",
"FNUM": 0,
"FPARENTID": "48C557BF27734BDBB160D51C4501E07C"
},
{
"FID": "614246CA3A3F4648840E49D56258654D",
"FNAME": "2014年土地利用现状",
"FNUM": 0,
"FPARENTID": "48C557BF27734BDBB160D51C4501E07C"
},
{
"FID": "6B96AE7362E84A0BAC5EFA12C583E2CF",
"FNAME": "2018年土地利用现状",
"FNUM": 0,
"FPARENTID": "48C557BF27734BDBB160D51C4501E07C"
},
{
"FID": "8916EA8C6A294987AF0D273F95DAF1AE",
"FNAME": "2016年土地利用现状",
"FNUM": 0,
"FPARENTID": "48C557BF27734BDBB160D51C4501E07C"
},
{
"FID": "9A81861DA1564E9FA8E187BB7566394D",
"FNAME": "2011年土地利用现状",
"FNUM": 0,
"FPARENTID": "48C557BF27734BDBB160D51C4501E07C"
},
{
"FID": "DF608487F8F542E492047DDB585D2F8F",
"FNAME": "2010年土地利用现状",
"FNUM": 0,
"FPARENTID": "48C557BF27734BDBB160D51C4501E07C"
}
],
"FID": "48C557BF27734BDBB160D51C4501E07C",
"FNAME": "土地利用现状变更调查数据",
"FNUM": 9,
"FPARENTID": "F48A87EFFF4C4C64A262553E5A2C938C"
},
{
"FCHILDREN": [
{
"FID": "A6ECA8188DFD4F599BAA1CE79311ED9F",
"FNAME": "二调地类图斑",
"FNUM": 0,
"FPARENTID": "4CF359688B7B49C8AC21D9E9F7BDDC1D"
},
{
"FID": "E594B7AB2F6343008D92EC68B48663FB",
"FNAME": "二调线状地物",
"FNUM": 0,
"FPARENTID": "4CF359688B7B49C8AC21D9E9F7BDDC1D"
}
],
"FID": "4CF359688B7B49C8AC21D9E9F7BDDC1D",
"FNAME": "第二次全国国土调查",
"FNUM": 2,
"FPARENTID": "F48A87EFFF4C4C64A262553E5A2C938C"
},
{
"FCHILDREN": [
{
"FID": "23E463A73C304CE7894CFFAB5B44CFD1",
"FNAME": "2015年基本农田保护图斑",
"FNUM": 0,
"FPARENTID": "513C25A93F0F4984B8DB7176700A2A2D"
},
{
"FID": "70F1FA41601D40CD80D6113F10312E1B",
"FNAME": "2013年基本农田保护图斑",
"FNUM": 0,
"FPARENTID": "513C25A93F0F4984B8DB7176700A2A2D"
},
{
"FID": "7767388A3C304D4986C400336D50FA0D",
"FNAME": "2009年基本农田保护图斑",
"FNUM": 0,
"FPARENTID": "513C25A93F0F4984B8DB7176700A2A2D"
},
{
"FID": "79E39AE6AB594D3E9FDE3AFA25DAD95E",
"FNAME": "2012年基本农田保护图斑",
"FNUM": 0,
"FPARENTID": "513C25A93F0F4984B8DB7176700A2A2D"
},
{
"FID": "84F528B9A53E46A0865985A4A0A76F39",
"FNAME": "2010年基本农田保护图斑",
"FNUM": 0,
"FPARENTID": "513C25A93F0F4984B8DB7176700A2A2D"
},
{
"FID": "DC5EA304DD384464811D76A235C81CC4",
"FNAME": "2011年基本农田保护图斑",
"FNUM": 0,
"FPARENTID": "513C25A93F0F4984B8DB7176700A2A2D"
},
{
"FID": "DECCACEE1696494F9D1716F98C0F960D",
"FNAME": "2014年基本农田保护图斑",
"FNUM": 0,
"FPARENTID": "513C25A93F0F4984B8DB7176700A2A2D"
},
{
"FID": "E5B7CB119371441D94CFB18CD6973DFF",
"FNAME": "2018年基本农田保护图斑",
"FNUM": 0,
"FPARENTID": "513C25A93F0F4984B8DB7176700A2A2D"
}
],
"FID": "513C25A93F0F4984B8DB7176700A2A2D",
"FNAME": "基本农田",
"FNUM": 8,
"FPARENTID": "F48A87EFFF4C4C64A262553E5A2C938C"
},
{
"FCHILDREN": [
{
"FID": "30F1C17CD8DF46959A80AA6395B96D4B",
"FNAME": "2015年永久基本农田保护区",
"FNUM": 0,
"FPARENTID": "CEB4B98B81904A6783BA184F309D4819"
},
{
"FID": "52F3AD0B85774499B40E269498442224",
"FNAME": "2015年永久基本农田划入划出",
"FNUM": 0,
"FPARENTID": "CEB4B98B81904A6783BA184F309D4819"
},
{
"FID": "A12572CA354E4EDCBE3556502CA560B3",
"FNAME": "2015年永久基本农田保护片块",
"FNUM": 0,
"FPARENTID": "CEB4B98B81904A6783BA184F309D4819"
},
{
"FID": "EFE3461595BA4CB5ADAE0CF2BD18A33B",
"FNAME": "2015年永久基本农田保护图斑",
"FNUM": 0,
"FPARENTID": "CEB4B98B81904A6783BA184F309D4819"
}
],
"FID": "CEB4B98B81904A6783BA184F309D4819",
"FNAME": "永久基本农田",
"FNUM": 4,
"FPARENTID": "F48A87EFFF4C4C64A262553E5A2C938C"
},
{
"FID": "D2EA48FB74304945B86D46131A7480C9",
"FNAME": "耕地质量等别",
"FNUM": 0,
"FPARENTID": "F48A87EFFF4C4C64A262553E5A2C938C"
},
{
"FCHILDREN": [
{
"FID": "99DF9074FD974200A9A00292E37FB292",
"FNAME": "三调地类图斑",
"FNUM": 0,
"FPARENTID": "DCC8A4EE67E04BFEBE48584092906CE2"
}
],
"FID": "DCC8A4EE67E04BFEBE48584092906CE2",
"FNAME": "第三次全国国土调查",
"FNUM": 1,
"FPARENTID": "F48A87EFFF4C4C64A262553E5A2C938C"
}
],
"FID": "F48A87EFFF4C4C64A262553E5A2C938C",
"FNAME": "土地资源",
"FNUM": 6,
"FPARENTID": "851C270FA3CF494698548305ABC42572"
},
{
"FCHILDREN": [
{
"FID": "310B350D66D44592A35B403DDEF6B23F",
"FNAME": "公益性公墓",
"FNUM": 0,
"FPARENTID": "F6993903F26943CDB0FAA44CEF6AFB76"
},
{
"FID": "D4DF9F8CA98C42F48F72E64338CEA228",
"FNAME": "养老机构",
"FNUM": 0,
"FPARENTID": "F6993903F26943CDB0FAA44CEF6AFB76"
}
],
"FID": "F6993903F26943CDB0FAA44CEF6AFB76",
"FNAME": "民政数据",
"FNUM": 2,
"FPARENTID": "851C270FA3CF494698548305ABC42572"
}
],
"FID": "851C270FA3CF494698548305ABC42572",
"FNAME": "现状数据",
"FNUM": 10
},
{
"FCHILDREN": [
{
"FCHILDREN": [
{
"FID": "8CFBEE8F28C9435B97348E0E0A4BE503",
"FNAME": "十三五土地整治项目汇总",
"FNUM": 0,
"FPARENTID": "09C43DEA34D94EE2BBEFF319CB0AABCA"
}
],
"FID": "09C43DEA34D94EE2BBEFF319CB0AABCA",
"FNAME": "土地整治规划",
"FNUM": 1,
"FPARENTID": "B9D96B9880214918B75E3BD089B9D12D"
},
{
"FCHILDREN": [
{
"FID": "0438428606174C02BC2A468860887C55",
"FNAME": "公墓建设规划",
"FNUM": 0,
"FPARENTID": "0D8380CFB6B64F5CABE26D246DEA9278"
}
],
"FID": "0D8380CFB6B64F5CABE26D246DEA9278",
"FNAME": "民生规划",
"FNUM": 1,
"FPARENTID": "B9D96B9880214918B75E3BD089B9D12D"
},
{
"FCHILDREN": [
{
"FID": "E850903093AC4AE7A83F42AF9B1BBBF1",
"FNAME": "2021年中心城区基础设施及重点项目建设计划",
"FNUM": 0,
"FPARENTID": "5246341021984140A3DA99E37807C6C1"
}
],
"FID": "5246341021984140A3DA99E37807C6C1",
"FNAME": "城市更新规划",
"FNUM": 1,
"FPARENTID": "B9D96B9880214918B75E3BD089B9D12D"
},
{
"FCHILDREN": [
{
"FID": "6379163665194C9698EC9C270874DDB9",
"FNAME": "永久基本农田",
"FNUM": 0,
"FPARENTID": "8B70C5DBED364F36AAC3313CF0FAF129"
},
{
"FID": "9EE6CF92468C4E0DBC73ADCFA24DC75D",
"FNAME": "城镇开发边界",
"FNUM": 0,
"FPARENTID": "8B70C5DBED364F36AAC3313CF0FAF129"
},
{
"FCHILDREN": [
{
"FID": "915FBA09B15F4D4FAC16E8A5F3914016",
"FNAME": "生态红线划定成果",
"FNUM": 0,
"FPARENTID": "E22FD17C5B29471080D62EC59EE46F85"
}
],
"FID": "E22FD17C5B29471080D62EC59EE46F85",
"FNAME": "生态保护线",
"FNUM": 1,
"FPARENTID": "8B70C5DBED364F36AAC3313CF0FAF129"
}
],
"FID": "8B70C5DBED364F36AAC3313CF0FAF129",
"FNAME": "三线管控",
"FNUM": 3,
"FPARENTID": "B9D96B9880214918B75E3BD089B9D12D"
},
{
"FCHILDREN": [
{
"FID": "0A3C9F73B9D4478D8246F011EBF4652B",
"FNAME": "土地利用总体规划",
"FNUM": 0,
"FPARENTID": "8DA08B03E91A493E80C345E31E7AE1F1"
},
{
"FID": "A5AFDD98F1734779AEE875670880948E",
"FNAME": "建设用地管制区",
"FNUM": 0,
"FPARENTID": "8DA08B03E91A493E80C345E31E7AE1F1"
},
{
"FID": "DCE90592ED454DC5B0D59D05BDB9711D",
"FNAME": "面状重点建设项目",
"FNUM": 0,
"FPARENTID": "8DA08B03E91A493E80C345E31E7AE1F1"
},
{
"FID": "F34C05F1BC8B4F2884783ADC84C39478",
"FNAME": "规划基本农田保护区",
"FNUM": 0,
"FPARENTID": "8DA08B03E91A493E80C345E31E7AE1F1"
},
{
"FID": "FED23EE5096D41A9B2BBDD9703FC5110",
"FNAME": "基期地类图斑",
"FNUM": 0,
"FPARENTID": "8DA08B03E91A493E80C345E31E7AE1F1"
}
],
"FID": "8DA08B03E91A493E80C345E31E7AE1F1",
"FNAME": "土地利用总体规划",
"FNUM": 5,
"FPARENTID": "B9D96B9880214918B75E3BD089B9D12D"
},
{
"FCHILDREN": [
{
"FID": "02AAD761E06A4DC6A73D90A4B040F834",
"FNAME": "大气环境质量",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "02F737ACDE0744E099FC9180E0F150A8",
"FNAME": "水环境工业污染重点管控区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "03D3BA53A25A40388C9DD4C8DB0245DE",
"FNAME": "大气环境受体敏感重点管控单元Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "11BF140BB58D401684452FE08A6C2AA1",
"FNAME": "水环境优先保护区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "11CE29BCBAE44CFD95720FC94B856768",
"FNAME": "大气环境布局敏感重点管控区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "1650BB330AAA4070BDA1AE7E8446CBC2",
"FNAME": "水环境质量",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "18B8D9209F654F0F8798CCCF7BFFDBC8",
"FNAME": "水环境管控分区_NH3",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "1CB92C2935F042F09B1480FA28026084",
"FNAME": "水环境城镇重点管控单元",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "28212FC43ECB4764B0D072817479360B",
"FNAME": "集成管控单元",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "29B5DA232AC641EDB076E45069D5D9AA",
"FNAME": "岸线资源管控分区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "315A02D6EA054229BBF2F2242033000E",
"FNAME": "水环境一般管控区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "353BE82AE5AB47428F774E3C7F034B9F",
"FNAME": "重金属重点管控区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "3729B19E3F6642AB921007C886776C73",
"FNAME": "水环境监测点",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "37767FEED912495A83F850A4AAC2291E",
"FNAME": "疑似污染地块Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "399AB26416BE4DC88B9D0EA5A9BAA899",
"FNAME": "集成管控单元Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "3E912617B0334F8C870C2C3E0CAAA39E",
"FNAME": "水环境一般管控区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "45DFC5147CC945718F1B377024E3822B",
"FNAME": "大气环境受体敏感重点管控单元",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "46C57C9B7E754C0993FB01BF1561EB00",
"FNAME": "水环境城镇重点管控单元Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "4C291A766018436BB493407622D60C46",
"FNAME": "重金属重点管控区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "52D47E9D854D41A6852F5EE500F98A2B",
"FNAME": "高污染燃料禁燃区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "566C365161D545A49C1FB41DB01B3C13",
"FNAME": "大气环境高排放重点管控区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "5A089DB3319C46F3A081CF0EF5EDB97F",
"FNAME": "水环境农业污染重点管控区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "6375EF0E5030419D8C08A99CBBA2CF87",
"FNAME": "高度关注地块Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "6958BAFB0DBC4B95A1C97F525B1EA89E",
"FNAME": "疑似污染地块",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "6D95C80402A14856A375E3258E850133",
"FNAME": "大气环境弱扩散重点管控区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "70C75CCCEB154FBABAD5D9BFDAF5C2B6",
"FNAME": "水环境工业污染重点管控区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "72EA9D4FB63F4BC79DE9B168D6C92F69",
"FNAME": "大气污染物减排_PM25",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "7C5E2052BF1647C59801352E97E445CB",
"FNAME": "农用地优先保护区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "8698006D784F4838A7F46D3E7619DAC2",
"FNAME": "生态保护红线",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "90FF837E72F14F33A5A088A1BDB4571B",
"FNAME": "大气环境弱扩散重点管控区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "9E9521FE707E4E3991EF2A1A4FDBC4D8",
"FNAME": "大气环境高排放重点管控区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "A2AA3B40DA194D4FB2B0B8DF992C30D4",
"FNAME": "高度关注地块Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "A2F3B6171DCB456893DE7F8B5C83FC4B",
"FNAME": "疑似污染地块Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "AE880E48E9F34B738056F6E727ABC59B",
"FNAME": "岸线资源管控分区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "B5712E263D734C84B0EF1C15175E4FEB",
"FNAME": "水环境优先保护区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "B70A27CFCA2A4F58997EC8C6DD834D78",
"FNAME": "污染地块Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "BC5A6D4C3FBA41388A2F3953873D691D",
"FNAME": "农用地污染重点管控区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "C0F2EA24C54C4FE490ACCEDB966977E9",
"FNAME": "农用地污染重点管控区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "C1D73E2B23334C61B537FC65AA3DECA2",
"FNAME": "污染地块",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "C777DBD1D41D48ABB5356C2C75D6BF64",
"FNAME": "水环境管控分区_COD",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "CFAA7FA0DBEC44A3BBABD088755408DA",
"FNAME": "大气环境布局敏感重点管控区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "D3C93084DB5C477D85F1CB816A25B8EB",
"FNAME": "土壤重点监管企业Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "D757C3728A1B433DAAE4475B099FA2F2",
"FNAME": "一般生态空间",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "D75E7CB04CE14F62ACBD36C604B6B620",
"FNAME": "生态保护红线Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "DF356A39F1374022A419BC9DAA3BF5D9",
"FNAME": "大气环境优先保护区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "E06AC66F1EB247E08917EF372F0B5C2A",
"FNAME": "大气环境优先保护区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "E1994B8D348A4AB9ABC1637815AA2516",
"FNAME": "土壤重点监管企业",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "E73E0C8F21D64639BA419F65F417C131",
"FNAME": "高度关注地块",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "EA5ED8256FD446FF9B0FC4C80B0C9557",
"FNAME": "高度关注地块",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "EE7AF83B09124C4792F3A11A63EC42C7",
"FNAME": "大气环境一般管控区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "EE9706523EC349CD9841294F0E475A3F",
"FNAME": "大气污染物减排_SO2",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "F130D66690DD438D8CB0B403D8669AE4",
"FNAME": "水环境农业污染重点管控区",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "F2FCD9946DEB49378456D0F6125E52EA",
"FNAME": "大气环境一般管控区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "F4006207839D4B5ABF8AFE4C8943A997",
"FNAME": "大气污染物减排_NOX",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "FB0FFACDD4B043B1B86E441D855ED2A7",
"FNAME": "一般生态空间Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
},
{
"FID": "FBA6662ACD9D482F9CCBB0F764CA66E1",
"FNAME": "高污染燃料禁燃区Mata",
"FNUM": 0,
"FPARENTID": "A8D41436EBC24A35B5CE24F1E404CB43"
}
],
"FID": "A8D41436EBC24A35B5CE24F1E404CB43",
"FNAME": "三线一单",
"FNUM": 56,
"FPARENTID": "B9D96B9880214918B75E3BD089B9D12D"
},
{
"FCHILDREN": [
{
"FID": "E32B261998BF44E2A7C39AB96F325EBB",
"FNAME": "林业规划",
"FNUM": 0,
"FPARENTID": "B236678425064159BE2D594AA153CF71"
}
],
"FID": "B236678425064159BE2D594AA153CF71",
"FNAME": "农业规划",
"FNUM": 1,
"FPARENTID": "B9D96B9880214918B75E3BD089B9D12D"
},
{
"FCHILDREN": [
{
"FID": "BC864274FA984D0FA03CA947DB0462DA",
"FNAME": "城乡总体规划（2018-2035）最新版",
"FNUM": 0,
"FPARENTID": "CF638C296672499C91240A3B0A207523"
}
],
"FID": "CF638C296672499C91240A3B0A207523",
"FNAME": "城市总体规划",
"FNUM": 1,
"FPARENTID": "B9D96B9880214918B75E3BD089B9D12D"
},
{
"FCHILDREN": [
{
"FID": "10D6155B8EF94AB496C52C1455F6E58D",
"FNAME": "中小学幼儿园布局规划",
"FNUM": 0,
"FPARENTID": "EBBA5B4AD9164F7FB2DA43895CF938A8"
}
],
"FID": "EBBA5B4AD9164F7FB2DA43895CF938A8",
"FNAME": "教育发展专项规划",
"FNUM": 1,
"FPARENTID": "B9D96B9880214918B75E3BD089B9D12D"
}
],
"FID": "B9D96B9880214918B75E3BD089B9D12D",
"FNAME": "规划数据",
"FNUM": 9
}
]
遗留问题：因数据层级过多导致使用overflow属性会让多级菜单被右侧部分遮挡（z-index无效），笔者去掉overflow,但这样若数据过多造成整个页面滚动，，，欢迎读者解决。
笔者用x5开发，但核心仍是html+js/jquery+css
前端html+js+css动态构建树形
效果图：—可以在菜单上添加数字显示有多少子节点
代码
html部分：界面先构造一级菜单的壳，当鼠标移到一级菜单时触发事件（渲染二级菜单–当前节点的子），递归重复该步骤，但会重复建节点（解决方法：find该li中有ul则不再新建子ul）；博主在页面初始化拿到后端构造的树形数据后，直接构建前端所有节点（display:none），鼠标移动到li时触发子菜单显示。
<ul class="x-list-template sideNav" xid="listTemplate2" bind-foreach=" $model.treeList.allDatas"
style="width:100%;">
<li class="oneStair" bind-attr-rowid="$object.getID()">
<div class="titleStair">
<a href="#" bind-text="val("FNAME")" bind-attr-rowid="$object.getID()"/>
</div>
<!-- 这部分前端没有真实数据时，可以用假数据-数组 先看看样式效果是否显示，或自己改造下符合业务需求的效果 -->
<!-- <ul class="stairUL has-children">
<li>
<a href="#">
<span class="label">子级菜单1</span>
</a>
</li>
<li>
<a href="#">
<span class="label">子级菜单2</span>
</a>
<ul class="stairUL has-children">
<li>
<a href="#">
<span class="label">子级菜单1</span>
</a>
</li>
<li>
<a href="#">
<span class="label">子级菜单2</span>
</a>
</li>
<li>
<a href="#">
<span class="label">子级菜单3</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span class="label">子级菜单3</span>
</a>
</li>
</ul> -->
</li>
</ul>
js部分—关键点 递归
/**
* 递归创建 树形侧边栏节点
*/
Model.prototype.createNodeElement = function(childrenArr){
// var ulElement='<ul class="stairUL has-children">';
var ulElement=document.createElement("ul");
ulElement.classList.add("stairUL");
ulElement.classList.add("has-children");
ulElement.classList.add("hoverUlCss");
for (var i=0; i<childrenArr.length; i++) {
// var liEle = '<li class="titleStair"><a href="#"> <span class="label">'+ childrenArr[i]["FNAME"] +'</span> </a></li>';
var liEle = document.createElement("li");
liEle.setAttribute("rowid", childrenArr[i]["FID"]);
liEle.classList.add("titleStair");
$(liEle).append('<a href="#"> <span>'+ childrenArr[i]["FNAME"] +
'<span>('+ childrenArr[i]["FNUM"] +')</span>' +
'<span>\>\></span></span> </a>')
ulElement.appendChild(liEle);
if (childrenArr[i]["FCHILDREN"] && childrenArr[i]["FCHILDREN"].length>0) {
liEle.appendChild(this.createNodeElement(childrenArr[i]["FCHILDREN"]));
}
}
return ulElement;
};
/** 前端调接口---读者调后台接口后往界面根节点插入子
** document.getElement('***').appendChild(createNodeElement(childArr))
*/
Model.prototype.treeListCustomRefresh = function(event){
var self = this;
biz.Request.sendBizRequest({
"context" : this.getContext(),
"process" : "/natures/busApplication/process/dataService/dataServiceProcess",
"activity" : "mainActivity",
"action" : "listTOResourceTree",
"callback" : function(data) {
data.ignoreError = false;
if (data.state) {
if(data.response) {
console.log(data.response);
event.source.loadData(data.response);
var treeArr = data.response;
if (!$("ul.sideNav").find("ul") || $("ul.sideNav").find("ul").length<1) {
for (var i=0; i<treeArr.length; i++) {
var rowidLiEle = $("ul.sideNav").find("li.oneStair[rowid='"+ treeArr[i]["FID"] +"']");
if (rowidLiEle) {
$(rowidLiEle).append(self.createNodeElement(treeArr[i]["FCHILDREN"]));
}
}
}
}
}
}
});
};
css–效果
/* 左侧 侧边栏导航动态菜单 */
.sideNav {
background-color: #fff;
/* 父用相对定位 */
position: relative;
height: 100%;
}
.sideNav li a {
text-decoration: none;
color: #333;
display: block;
width: 100%;
height: 60px;
font-size: 16px;
text-align: center;
line-height: 60px;
}
.sideNav li ul, .hoverUlCss{
/* 子用绝对定位 */
position: absolute;
top: -1px;
left: 100%;
width: 100%;
height: 100%;
/* 不能使用overflow,导致被遮挡 */
/* overflow-y: auto; */
background: #ffffff;
border: 1px solid #dedede;
box-shadow: 2px 2px 3px -3px #333;
list-style-type: none;
/* 将ul隐藏 */
display: none;
z-index: 999;
}
.sideNav li a:hover {
background: #1e88e5;
color: #ffffff !important;
}
若菜单只有3层，css可给 .sideNav li ul li或 .sideNav li ul li ul再添加样式–按需添加，不添加也可以。
后端java
笔者使用的x5平台的java,jdbc查sql拿到结果集再构造树，若没有SQL，则可以构建含 List children; 属性，setChildren,getChildren方法 的 实体class, 调用这俩方法插入子,可自行搜索–java list转树
public static List listTOResourceTree(){
List<JSONObject> treeList = new ArrayList<JSONObject>();
String sql = "select FID,FPARENTID,FNAME from V_ResourceDir_Gis t start with fparentid is null connect by prior fid=fparentid";
Table table = SQL.select(sql, null, datamodel, null);
Iterator<Row> iterator = table.iterator();
while(iterator.hasNext()) {
Row next = iterator.next();
if (next.getString("FPARENTID")==null) {
JSONObject jsonObj = new JSONObject();
jsonObj.put("FID", next.getString("FID"));
jsonObj.put("FPARENTID", next.getString("FPARENTID"));
jsonObj.put("FNAME", next.getString("FNAME"));
jsonObj.put("FNUM", 0);
jsonObj.put("FCHILDREN", new ArrayList<JSONObject>());
// 用递归找子
treeList.add(findChildren(table, jsonObj));
}
}
System.out.println(treeList.toString());
return treeList;
}
private static JSONObject findChildren(Table table, JSONObject node) {
// TODO 自动生成的方法存根
for (Iterator<Row> iterator = table.iterator(); iterator.hasNext(); ) {
Row row = iterator.next();
if (row.getString("FPARENTID") !=null && row.getString("FPARENTID").equals(node.get("FID"))) {
node.put("FNUM", Integer.valueOf(node.get("FNUM").toString())+1);
JSONObject map = new JSONObject();
map.put("FID", row.getString("FID"));
map.put("FPARENTID", row.getString("FPARENTID"));
map.put("FNAME", row.getString("FNAME"));
map.put("FNUM", 0);
if (node.get("FCHILDREN") == null) {
node.put("FCHILDREN", new ArrayList<JSONObject>());
}
if (node.get("FCHILDREN") instanceof ArrayList<?>) {
List<JSONObject> list = (ArrayList<JSONObject>) node.get("FCHILDREN");
// 注意这里，先把子add到list中，再把list塞到父节点中，否则会造成，最终返回结果 属性FCHILDREN值为true而不是List
list.add(findChildren(table, map));
node.put("FCHILDREN", list);
}
}
}
return node;
}
不使用sql,直接实体，则调用实体中定义的setChildren与getChildren
总结：从平级数据转树形数据，善用递归，或 双层循环，多看看数据结构，进阶 由树变图，路漫漫其修远兮！
