java+json+javascript生成树状图实例
Posted fl军哥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了java+json+javascript生成树状图实例相关的知识，希望对你有一定的参考价值。
所需js:jquery-3.3.1.js
layui.js
所需css:layui.css
layui.js,layui.css下载链接：https://www.layui.com/
点击下方立即下载即可下载
jquery-3.3.1.js下载可自行百度。
源代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <script src="layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="js/dataTool.js"></script> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <meta charset="utf-8"> </head> <body> </script> <script type="text/javascript"> layui.use([ \'tree\', \'util\' ], function() { var tree = layui.tree,util = layui.util; $.get(\'data.json\', function(json) { tree.render({ elem : \'#tree\', //默认是点击节点可进行收缩 data : json, //showCheckbox : true , id : \'diqu\', click: function(obj){ var data = obj.data; /* layer.msg(\'状态：\'+ obj.state + \'<br>节点数据：\' + JSON.stringify(data.id)); */ window.a.location.href="Search2Servlet?method=search&data="+data.title; } }); //按钮事件 util.event(\'id\', { setChecked : function() { tree.setChecked(\'diqu\', [110000,120000,130100]); //勾选指定节点 } }); }); }); </script> </head> <div style="margin-left:250px;width: 1050px;border-color:black"> <div id="tree" class="demo-tree demo-tree-box" style="width:150px;float:left;"></div > </div > </body> </html>
data.json文件：
[ { "title": "石家庄市", "id": 130100, "children": [ { "title": "长安区", "id": 130102 }, { "title": "桥西区", "id": 130104 }, { "title": "新华区", "id": 130105 }, { "title": "井陉矿区", "id": 130107 }, { "title": "裕华区", "id": 130108 }, { "title": "藁城区", "id": 130109 }, { "title": "鹿泉区", "id": 130110 }, { "title": "栾城区", "id": 130111 }, { "title": "井陉县", "id": 130121 }, { "title": "正定县", "id": 130123 }, { "title": "行唐县", "id": 130125 }, { "title": "灵寿县", "id": 130126 }, { "title": "高邑县", "id": 130127 }, { "title": "深泽县", "id": 130128 }, { "title": "赞皇县", "id": 130129 }, { "title": "无极县", "id": 130130 }, { "title": "平山县", "id": 130131 }, { "title": "元氏县", "id": 130132 }, { "title": "赵县", "id": 130133 }, { "title": "辛集市", "id": 130181 }, { "title": "晋州市", "id": 130183 }, { "title": "新乐市", "id": 130184 } ] }, { "title": "唐山市", "id": 130200, "children": [ { "title": "路南区", "id": 130202 }, { "title": "路北区", "id": 130203 }, { "title": "古冶区", "id": 130204 }, { "title": "开平区", "id": 130205 }, { "title": "丰南区", "id": 130207 }, { "title": "丰润区", "id": 130208 }, { "title": "曹妃甸区", "id": 130209 }, { "title": "滦南县", "id": 130224 }, { "title": "乐亭县", "id": 130225 }, { "title": "迁西县", "id": 130227 }, { "title": "玉田县", "id": 130229 }, { "title": "遵化市", "id": 130281 }, { "title": "迁安市", "id": 130283 }, { "title": "滦州市", "id": 130284 } ] }, { "title": "秦皇岛市", "id": 130300, "children": [ { "title": "海港区", "id": 130302 }, { "title": "山海关区", "id": 130303 }, { "title": "北戴河区", "id": 130304 }, { "title": "抚宁区", "id": 130306 }, { "title": "青龙满族自治县", "id": 130321 }, { "title": "昌黎县", "id": 130322 }, { "title": "卢龙县", "id": 130324 } ] }, { "title": "邯郸市", "id": 130400, "children": [ { "title": "邯山区", "id": 130402 }, { "title": "丛台区", "id": 130403 }, { "title": "复兴区", "id": 130404 }, { "title": "峰峰矿区", "id": 130406 }, { "title": "肥乡区", "id": 130407 }, { "title": "永年区", "id": 130408 }, { "title": "临漳县", "id": 130423 }, { "title": "成安县", "id": 130424 }, { "title": "大名县", "id": 130425 }, { "title": "涉县", "id": 130426 }, { "title": "磁县", "id": 130427 }, { "title": "邱县", "id": 130430 }, { "title": "鸡泽县", "id": 130431 }, { "title": "广平县", "id": 130432 }, { "title": "馆陶县", "id": 130433 }, { "title": "魏县", "id": 130434 }, { "title": "曲周县", "id": 130435 }, { "title": "武安市", "id": 130481 } ] }, { "title": "邢台市", "id": 130500, "children": [ { "title": "桥东区", "id": 130502 }, { "title": "桥西区", "id": 130503 }, { "title": "邢台县", "id": 130521 }, { "title": "临城县", "id": 130522 }, { "title": "内丘县", "id": 130523 }, { "title": "柏乡县", "id": 130524 }, { "title": "隆尧县", "id": 130525 }, { "title": "任县", "id": 130526 }, { "title": "南和县", "id": 130527 }, { "title": "宁晋县", "id": 130528 }, { "title": "巨鹿县", "id": 130529 }, { "title": "新河县", "id": 130530 }, { "title": "广宗县", "id": 130531 }, { "title": "平乡县", "id": 130532 }, { "title": "威县", "id": 130533 }, { "title": "清河县", "id": 130534 }, { "title": "临西县", "id": 130535 }, { "title": "南宫市", "id": 130581 }, { "title": "沙河市", "id": 130582 } ] }, { "title": "保定市", "id": 130600, "children": [ { "title": "竞秀区", "id": 130602 }, { "title": "莲池区", "id": 130606 }, { "title": "满城区", "id": 130607 }, { "title": "清苑区", "id": 130608 }, { "title": "徐水区", "id": 130609 }, { "title": "涞水县", "id": 130623 }, { "title": "阜平县", "id": 130624 }, { "title": "定兴县", "id": 130626 }, { "title": "唐县", "id": 130627 }, { "title": "高阳县", "id": 130628 }, { "title": "容城县", "id": 130629 }, { "title": "涞源县", "id": 130630 }, { "title": "望都县", "id": 130631 }, { "title": "安新县", "id": 130632 }, { "title": "易县", "id": 130633 }, { "title": "曲阳县", "id": 130634 }, { "title": "蠡县", "id": 130635 }, { "title": "顺平县", "id": 130636 }, { "title": "博野县", "id": 130637 }, { "title": "雄县", "id": 130638 }, { "title": "涿州市", "id": 130681 }, { "title": "定州市", "id": 130682 }, { "title": "安国市", "id": 130683 }, { "title": "高碑店市", "id": 130684 } ] }, { "title": "张家口市", "id": 130700, "children": [ { "title": "桥东区", "id": 130702 }, { "title": "桥西区", "id": 130703 }, { "title": "宣化区", "id": 130705 }, { "title": "下花园区", "id": 130706 }, { "title": "万全区", "id": 130708 }, { "title": "崇礼区", "id": 130709 }, { "title": "张北县", "id": 130722 }, { "title": "康保县", "id": 130723 }, { "title": "沽源县", "id": 130724 }, { "title": "尚义县", "id": 130725 }, { "title": "蔚县", "id": 130726 }, { "title": "阳原县", "id": 130727 }, { "title": "怀安县", "id": 130728 }, { "title": "怀来县", "id": 130730 }, { "title": "涿鹿县", "id": 130731 }, { "title": "赤城县", "id": 130732 } ] }, { "title": "承德市", "id": 130800, "children": [ { "title": "双桥区", "id": 130802 }, { "title": "双滦区", "id": 130803 }, { "title": "鹰手营子矿区", "id": 130804 }, { "title": "承德县", "id": 130821 }, { "title": "兴隆县", "id": 130822 }, { "title": "滦平县", "id": 130824 }, { "title": "隆化县", "id": 130825 }, { "title": "丰宁满族自治县", "id": 130826 }, { "title": "宽城满族自治县", "id": 130827 }, { "title": "围场满族蒙古族自治县", "id": 130828 }, { "title": "平泉市", "id": 130881 } ] }, { "title": "沧州市", "id": 130900, "children": [ { "title": "新华区", "id": 130902 }, { "title": "运河区", "id": 130903 }, { "title": "沧县", "id": 130921 }, { "title": "青县", "id": 130922 }, { "title": "东光县", "id": 130923 }, { "title": "海兴县", "id": 130924 }, { "title": "盐山县", "id": 130925 }, { "title": "肃宁县", "id": 130926 }, { "title": "南皮县", "id": 130927 }, { "title": "吴桥县", "id": 130928 }, { "title": "献县", "id": 130929 }, { "title": "孟村回族自治县", "id": 130930 }, { "title": "泊头市", "id": 130981 }, { "title": "任丘市", "id": 130982 }, { "title": "黄骅市", "id": 130983 }, { "title": "河间市", "id": 130984 } ] }, { "title": "廊坊市", "id": 131000, "children": [ { "title": "安次区", "id": 131002 }, { "title": "广阳区", "id": 131003 }, { "title": "固安县", "id": 131022 }, { "title": "永清县", "id": 131023 }, { "title": "香河县", "id": 131024 }, { "title": "大城县", "id": 131025 }, { "title": "文安县", "id": 131026 }, { "title": "大厂回族自治县", "id": 131028 }, { "title": "霸州市", "id": 131081 }, { "title": "三河市", "id": 131082 } ] }, { "title": "衡水市", "id": 131100, "children": [ { "title": "桃城区", "id": 131102 }, { "title": "冀州区", "id": 131103 }, { "title": "枣强县", "id": 131121 }, { "title": "武邑县", "id": 131122 }, { "title": "武强县", "id": 131123 }, { "title": "饶阳县", "id": 131124 }, { "title": "安平县", "id": 131125 }, { "title": "故城县", "id": 131126 }, { "title": "景县", "id": 131127 }, { "title": "阜城县", "id": 131128 }, { "title": "深州市", "id": 131182 } ] } ]
运行截图：
初学者写的不好，希望帮到大家。
以上是关于java+json+javascript生成树状图实例的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript：基于任意JSON动态生成树状图（动态生成vue-giant-tree所需idpid）
JavaScript：基于任意JSON动态生成树状图（动态生成vue-giant-tree所需idpid）
Java & JavaScript 递归构建树状图（根据parentId）
Echart-无需json文件的树状图（源码）超级简单，小白的福音