I. Functional requirements

According to the original data given by the background, it is restructured into the data structure required by the bootstrap-TreeView list tree plug-in and rendered. Then, according to the selected node data, it is restructured into the data structure required by the background for request. When a node is selected, if the parent node is selected, all the child nodes are selected. If the parent node is deselected, all child nodes are deselected. If a child node is selected, its corresponding parent node is also selected.

2. Analysis of difficulties

There are three main difficulties:

1. Reorganize the original data into the data structure required by the list tree plug-in;

2. If a child node is selected, its parent node is also selected.

3. Reorganize all the selected node data into the data structure required by the background;

Three, the instance,

The bootstrap-TreeView plugin’s dependencies, usage, events, and list of available events can be found here.

1. Plug-in dependencies

This example uses the following dependencies:

  • The bootstrap 3.4.1 track –
  • Jquery – 3.1.1

2. Reorganize the original data into the data structure required by the plug-in

Original data:

Var allLevels = {"level1": ['level1-1', 'Level1-2 ',' Level1-3 ', 'Level1-4 ',' Level1-5 '], "Level2 ": ['level2-1', 'level2-2', 'level2-3', 'level2-4', 'level2-5'], "level3": ['level3-1', 'level3-2', 'level3-3', 'level3-4', 'level3-5'], "level4": ['level4-1', 'level4-2', 'level4-3', 'level4-4', 'level4-5'], "level5": ['level5-1', 'level5-2', 'level5-3', 'level5-4', 'level5-5'], "level6": ['level6-1', 'level6-2', 'level6-3', 'level6-4', 'level6-5'], "level7": ['level7-1', 'level7-2', 'level7-3', 'level7-4', 'level7-5'], "level8": ['level8-1', 'level8-2', 'level8-3', 'level8-4', 'level8-5'] }; Var treeData = [];Copy the code

Reorganization method:

Function formatLevels(allLevels) {// console.log(allLevels) treeData = []// Clear the menu tree cache treeData. 'all', text: 'select all', Nodes: []}) var level_number = -1 for (var level in allLevels) {treeData[0].nodes. Push ({id: level, text: level, nodes: [] }) level_number++ for (var index in allLevels[level]) { treeData[0].nodes[level_number].nodes.push({ id: AllLevels [level][index], text: allLevels[level][index]})}} // console.log(treeData)Copy the code

3. List tree rendering

HTML:

<div id="tree" style="height: 600px; overflow-y: auto;" ></div>Copy the code

js:

Function initTreeView(treeData) {$('#tree'). Treeview ({data: treeData,// assign value to showIcon: True, showCheckbox: true,// Display checkbox multiSelect: true,// Whether multiple nodes can be selected at the same time levels: 2,// Set the inheritance tree default expansion level. OnNodeChecked: function (event, node) {var selectNodes = getChildNodeIdArr(node); If (selectNodes) {$('#tree').treeView ('checkNode', [selectNodes, {silent: true}]); If (node.parentid >= 0) {// The parent node is not null, $("#tree").treeView ("checkNode", [Node.parentid, {silent: true}]); var parentNode = $("#tree").treeview("getNode", node.parentId); $("#tree"). Treeview ("checkNode", [parentNode.parentId, {silent: if (parentNode.parentId >= 0) {// If (parentNode.parentId >= 0) {if (parentNode.parentId >= 0) {$("#tree"). true }]); var parentNode1 = $("#tree").treeview("getNode", parentNode.parentId); If (parentNode1.parentId >= 0) {// If (parentNode1.parentId >= 0) {$("#tree"). Treeview ("#tree", [parentNode1.parentId, {silent: true }]); var parentNode2 = $("#tree").treeview("getNode", parentNode1.parentId); } } } setParentNodeCheck(node); }, onNodeUnchecked: function (event, node) {var selectNodes = getChildNodeIdArr(node); If (selectNodes) {$('#tree'). Treeview ('uncheckNode', [selectNodes, {silent: true}]); } }, }).treeview('checkAll', { silent: true }); Function getChildNodeIdArr(node) {var ts = []; if (node.nodes) { for (x in node.nodes) { ts.push(node.nodes[x].nodeId); if (node.nodes[x].nodes) { var getNodeDieDai = getChildNodeIdArr(node.nodes[x]); for (j in getNodeDieDai) { ts.push(getNodeDieDai[j]); } } } } else { ts.push(node.nodeId); } return ts; Function setParentNodeCheck(node) {var parentNode = $("#tree"). Treeview ("getNode", node.parentid); if (parentNode.nodes) { var checkedCount = 0; for (x in parentNode.nodes) { if (parentNode.nodes[x].state.checked) { checkedCount++; } else { break; } } if (checkedCount === parentNode.nodes.length) { $("#tree").treeview("checkNode", parentNode.nodeId); setParentNodeCheck(parentNode); }}}Copy the code

4. According to the selected node data, reassemble it into the data structure required by the back-end

Function initClick() {// Click the button to get the selected node, $('.selectedNodes').on('click', function () {var selectedNodes = $('#tree').treeView ('getChecked'); Log (selectedNodes) var parent_levels = {}// Receive parent node var son_levels = {}// Receive child node var result_levels = For (const item in selectedNodes) {var name = selectedNodes[item].text var nodeId = selectedNodes[item].nodeId var parentId = selectedNodes[item].parentId if (selectedNodes[item].parentId === undefined) Continue} else if (selectedNodes[item]. ParentId === 0) {// Get the key-value parent_levels[name] = nodeId} else {// Get the child key-value son_levels[name] = parentId}} // console.log(parent_levels, son_levels) for (const key in parent_levels) { result_levels[key] = [] for (const index in son_levels) { if (parent_levels[key] === son_levels[index]) { result_levels[key].push(index) } } } // console.log(result_levels) }) }Copy the code

5. Effect display

All default nodes are selected, as shown in the figure below:

When the parent node level1 has children checked, the parent node is still checked as shown below:

Click “Get the selected node” button, and the console outputs the data after the final reorganization, as shown in the figure:

6. Complete code

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <! <link rel="stylesheet" href="./assest/bootstrap-3.4.1/ CSS /bootstrap.css"> <style> .treeMenu { width: 600px; border: 1px solid #eee; margin: 20px auto; } </style> </head> <body> <div class="treeMenu"> <div id="tree" style="height: 600px; overflow-y: auto;" </div> <button class="selectedNodes"> Get the selected node </div> </body> </ HTML >< script type="text/javascript" SRC = ". / assest/jquery - 3.1.1. Min. Js "> < / script > < script type =" text/javascript" SRC ="./assest/bootstrap-treeview/bootstrap-treeview.js"> </script><script type="text/javascript"> // original data var allLevels = { "level1": ['level1-1', 'level1-2', 'level1-3', 'level1-4', 'level1-5'], "level2": ['level2-1', 'level2-2', 'level2-3', 'level2-4', 'level2-5'], "level3": ['level3-1', 'level3-2', 'level3-3', 'level3-4', 'level3-5'], "level4": ['level4-1', 'level4-2', 'level4-3', 'level4-4', 'level4-5'], "level5": ['level5-1', 'level5-2', 'level5-3', 'level5-4', 'level5-5'], "level6": ['level6-1', 'level6-2', 'level6-3', 'level6-4', 'level6-5'], "level7": ['level7-1', 'level7-2', 'level7-3', 'level7-4', 'level7-5'], "level8": ['level8-1', 'level8-2', 'level8-3', 'level8-4', 'level8-5'] }; Var treeData = []; $(document).ready(function () {// Reorganize the raw data into the treeView required format formatLevels(allLevels) // initialize the menu tree initTreeView(treeData) // InitClick ()}) function formatLevels(allLevels) {// console.log(allLevels) treeData = []// Clear menu tree cache Treedata. push({id: 'all', text: 'all', Nodes: treeData.push({id: 'all', text: 'All ', Nodes: [] }) var level_number = -1 for (var level in allLevels) { treeData[0].nodes.push({ id: level, text: level, nodes: [] }) level_number++ for (var index in allLevels[level]) { treeData[0].nodes[level_number].nodes.push({ id: allLevels[level][index], text: AllLevels [level][index]})}} // console.log(treeData)} // TreeView initialization function initTreeView(treeData) { $('#tree'). Treeview ({data: treeData, showIcon: true, showCheckbox: true,// Display checkbox multiSelect: Levels: 2,// Sets the default expansion level of the inheritance tree. OnNodeChecked: function (event, node) {var selectNodes = getChildNodeIdArr(node); If (selectNodes) {$('#tree').treeView ('checkNode', [selectNodes, {silent: true}]); If (node.parentid >= 0) {// The parent node is not null, $("#tree").treeView ("checkNode", [Node.parentid, {silent: true}]); var parentNode = $("#tree").treeview("getNode", node.parentId); $("#tree"). Treeview ("checkNode", [parentNode.parentId, {silent: if (parentNode.parentId >= 0) {// If (parentNode.parentId >= 0) {if (parentNode.parentId >= 0) {$("#tree"). true }]); var parentNode1 = $("#tree").treeview("getNode", parentNode.parentId); If (parentNode1.parentId >= 0) {// If (parentNode1.parentId >= 0) {$("#tree"). Treeview ("#tree", [parentNode1.parentId, {silent: true }]); var parentNode2 = $("#tree").treeview("getNode", parentNode1.parentId); } } } setParentNodeCheck(node); }, onNodeUnchecked: function (event, node) {var selectNodes = getChildNodeIdArr(node); If (selectNodes) {$('#tree'). Treeview ('uncheckNode', [selectNodes, {silent: true}]); } }, }).treeview('checkAll', { silent: true }); Function getChildNodeIdArr(node) {var ts = []; if (node.nodes) { for (x in node.nodes) { ts.push(node.nodes[x].nodeId); if (node.nodes[x].nodes) { var getNodeDieDai = getChildNodeIdArr(node.nodes[x]); for (j in getNodeDieDai) { ts.push(getNodeDieDai[j]); } } } } else { ts.push(node.nodeId); } return ts; Function setParentNodeCheck(node) {var parentNode = $("#tree"). Treeview ("getNode", node.parentid); if (parentNode.nodes) { var checkedCount = 0; for (x in parentNode.nodes) { if (parentNode.nodes[x].state.checked) { checkedCount++; } else { break; } } if (checkedCount === parentNode.nodes.length) { $("#tree").treeview("checkNode", parentNode.nodeId); setParentNodeCheck(parentNode); }} function initClick() {// Get the selected node, $('.selectedNodes').on('click', function () {var selectedNodes = $('#tree').treeView ('getChecked'); Log (selectedNodes) var parent_levels = {}// Receive parent node var son_levels = {}// Receive child node var result_levels = For (const item in selectedNodes) {var name = selectedNodes[item].text var nodeId = selectedNodes[item].nodeId var parentId = selectedNodes[item].parentId if (selectedNodes[item].parentId === undefined) Continue} else if (selectedNodes[item]. ParentId === 0) {// Get the key-value parent_levels[name] = nodeId} else {// Get the child key-value son_levels[name] = parentId}} // console.log(parent_levels, son_levels) for (const key in parent_levels) { result_levels[key] = [] for (const index in son_levels) { if (parent_levels[key] === son_levels[index]) { result_levels[key].push(index) } } } console.log(result_levels) }) } </script>Copy the code