java数据库动态树形菜单_bootstrap treeview树形菜单 动态扩展 连数据库

二话不说，先来看效果图：

呃呃，虽然不是很美观......不过功能实现就好啦~

数据库模型是这样的：

我做了什么工作呢？

简单解释一下，就是通过查数据库，把上面的数据查出来，每一行数据封装成为一个节点，然后拼成一颗树，最后显示在前台。注意：这里的数据是可以动态扩展的。

字段解释：nodeId就是节点的id。pid是 parentId也就是父亲的id，表示该节点是哪个节点的子节点。type=1代表功能，type=0代表菜单。level代表该节点在树的第几层。

OK，大家应该迫不及待想要知道具体实现了.....

满足大家，先来看前端代码：

1

2

3

4

5

6 String server_path =request.getContextPath();7 %>

8

9

10

11

12

13

14

15

16

17 //选中/取消父节点时选中/取消所有子节点

18 functiongetChildNodeIdArr(node) {19 var ts =[];20 if(node.nodes) {21 for (x innode.nodes) {22 ts.push(node.nodes[x].nodeId);23 if(node.nodes[x].nodes) {24 var getNodeDieDai =getChildNodeIdArr(node.nodes[x]);25 for (j ingetNodeDieDai) {26 ts.push(getNodeDieDai[j]);27 }28 }29 }30 } else{31 ts.push(node.nodeId);32 }33 returnts;34 }35 //选中所有子节点时选中父节点

36 functionsetParentNodeCheck(node) {37 var parentNode = $("#tree").treeview("getNode", node.parentId);38 if(parentNode.nodes) {39 var checkedCount = 0;40 for (x inparentNode.nodes) {41 if(parentNode.nodes[x].state.checked) {42 checkedCount ++;43 } else{44 break;45 }46 }47 if (checkedCount ===parentNode.nodes.length) {48 $("#tree").treeview("checkNode", parentNode.nodeId);49 setParentNodeCheck(parentNode);50 }51 }52 }53

54 $(function() {55 $.ajax({56 type: "Post",57 url: '/resource/menu',58 dataType: "json",59 success: function(result) {60 $('#tree').treeview({61 data: result.list, // 数据源

62 showCheckbox: true, //是否显示复选框

63 highlightSelected: true, //是否高亮选中

64 multiSelect: true, //多选

65 levels : 2,66 enableLinks : true,//必须在节点属性给出href属性

67 color: "#010A0E",68 onNodeChecked : function(event,node) {69 var selectNodes = getChildNodeIdArr(node); //获取所有子节点

70 if (selectNodes) { //子节点不为空，则选中所有子节点

71 $('#tree').treeview('checkNode', [selectNodes, { silent: true}]);72 }73 },74 onNodeUnchecked : function(event, node) { //取消选中节点

75 var selectNodes = getChildNodeIdArr(node); //获取所有子节点

76 if (selectNodes) { //子节点不为空，则取消选中所有子节点

77 $('#tree').treeview('uncheckNode', [selectNodes, { silent: true}]);78 }79 },80

81 onNodeExpanded : function(event, data) {82

83 },84

85 onNodeSelected: function(event, data) {86 //alert(data.nodeId);

87 }88

89 });90 },91 error: function() {92 alert("菜单加载失败！")93 }94 });95 })96

97

98

99

100

101