Maison > Article > interface Web > Introduction et utilisation du plug-in treeview dans bootstrap
Le projet doit implémenter la gestion des autorisations et utiliser le framework front-end bootstrap, j'ai donc directement sélectionné le plug-in d'extension treeview de bootstrap. Première image :
Lorsque le nœud parent est sélectionné, tous les nœuds enfants sous le nœud parent sont également sélectionnés, voir le code
1, code HTML
<h2>TreeView Checkable</h2> <p id="treeview-checkable"></p>
2. Données Json
function getTvStateData() { var defaultData = [ { text: 'Parent 1', href: '#parent1', tags: ['4'], state: { checked: true }, nodes: [ { text: 'Child 1', href: '#child1', tags: ['2'], nodes: [ { text: 'Grandchild 1', href: '#grandchild1', tags: ['0'] }, { text: 'Grandchild 2', href: '#grandchild2', tags: ['0'] } ] }, { text: 'Child 2', href: '#child2', tags: ['0'] } ] }, { text: 'Parent 2', href: '#parent2', tags: ['0'], nodes: [ { text: 'Child 1', href: '#child1', tags: ['2'], nodes: [ { text: 'Grandchild 1', href: '#grandchild1', tags: ['0'] }, { text: 'Grandchild 2', href: '#grandchild2', tags: ['0'] } ] }, { text: 'Child 2', href: '#child2', tags: ['0'] } ] }, { text: 'Parent 3', href: '#parent3' }, { text: 'Parent 4', href: '#parent4', tags: ['0'] }, { text: 'Parent 5', href: '#parent5', tags: ['0'] } ]; return defaultData; }
3. Liaison de données JS, chargement de TreeView
$(function() { var $checkableTree = $('#treeview-checkable') .treeview({ data: getTvStateData(), //数据 showIcon: false, showCheckbox: true, levels: 1, onNodeChecked: function(event, node) { //选中节点 var selectNodes = getChildNodeIdArr(node); //获取所有子节点 if (selectNodes) { //子节点不为空,则选中所有子节点 $('#treeview-checkable').treeview('checkNode', [selectNodes, { silent: true }]); } var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId); setParentNodeCheck(node); }, onNodeUnchecked: function(event, node) { //取消选中节点 var selectNodes = getChildNodeIdArr(node); //获取所有子节点 if (selectNodes) { //子节点不为空,则取消选中所有子节点 $('#treeview-checkable').treeview('uncheckNode', [selectNodes, { silent: true }]); } }, onNodeExpanded: function(event, data) { if (data.nodes === undefined || data.nodes === null) { } else if (data.tags[0] === "2") { alert("Tags 2"); } else { alert("1111"); } } }); });
4. Lorsqu'un nœud est sélectionné, tous les nœuds enfants sont sélectionnés/désélectionnés, et lorsque tous les nœuds enfants sont sélectionnés, le nœud parent est sélectionné
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 = $("#treeview-checkable").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) { $("#treeview-checkable").treeview("checkNode", parentNode.nodeId); setParentNodeCheck(parentNode); } } }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!