怎么用Bootstrap制作后台角色权限勾选树-Bootstrap教程-PHP中文网

推荐用 Bootstrap 5.3（仅 CSS 和 Accordion）+ jQuery 3.6+ 手写权限树：后端返回扁平权限列表，前端递归生成嵌套 Accordion；勾选时用 updateParentState() 和 updateChildrenState() 维护父子联动与 indeterminate 半选状态；提交前通过 getCheckedPermIds() 提取 full_ids 去重；label 加 pt-2/pb-2 扩大点击区。

怎么用bootstrap制作后台角色权限勾选树

用 Bootstrap 5 + jQuery 实现可展开/勾选的权限树，别碰 `bootstrap-treeview`

Bootstrap 官方不提供树形控件，bootstrap-treeview 已多年未维护，依赖过时的 jQuery 版本，且勾选逻辑与后台 RBAC 模型（如父子全选联动、半选状态）严重脱节。直接用它会导致权限保存错漏、前端状态与后端不一致。

推荐组合：Bootstrap 5.3（仅用其 CSS 和 Accordion 组件）+ 原生 jQuery 3.6+（或现代写法，但需兼容 IE11 则保留 jQuery）+ 手写勾选逻辑。核心是把树结构渲染为嵌套的 accordion，再用 data-perm-id 和 data-parent-id 绑定语义。

后端返回扁平化权限列表（含 id、name、pid、level），前端递归构造成树形 JSON
每个节点用 包裹，标题行含复选框 + 展开箭头；子节点放入
勾选时用 $('input[type="checkbox"]') 统一监听，触发前先调用 updateParentState() 和 updateChildrenState()



updateParentState() 必须递归向上设置「半选」indeterminate

纯 checked 无法表达“子项部分勾选”——这是权限树最关键的视觉反馈。浏览器原生支持 indeterminate 状态，但 jQuery 的 .prop('indeterminate', true) 不会自动清除 checked，必须手动控制：
function updateParentState($childCheckbox) {
  const $parent = $childCheckbox.closest('.accordion-item').prev('.accordion-item');
  if ($parent.length === 0) return;

  const $parentCheck = $parent.find('input[type="checkbox"]');
  const $children = $parent.find('.accordion-collapse').find('input[type="checkbox"]');
  const checkedCount = $children.filter(':checked').length;
  const totalCount = $children.length;

  if (totalCount === 0) return;

  if (checkedCount === 0) {
    $parentCheck.prop('checked', false).prop('indeterminate', false);
  } else if (checkedCount === totalCount) {
    $parentCheck.prop('checked', true).prop('indeterminate', false);
  } else {
    $parentCheck.prop('checked', false).prop('indeterminate', true);
  }
  updateParentState($parentCheck); // 递归
}
注意：indeterminate 是只读属性，只能用 .prop() 设置，不能用 .attr()；且设置后必须显式设 checked=false，否则视觉异常。
提交前用 getCheckedPermIds() 提取「有效权限 ID」，跳过中间节点
RBAC 后台通常只要叶子节点（如 user:delete）或明确声明的菜单级权限（如 menu:order），不需要父节点 ID（如 menu）。但用户勾选父节点时，应自动包含其所有后代权限——这个映射关系不能靠前端猜，必须由后端定义并传入。
做法：后端在返回树结构时，给每个节点加一个 full_ids 字段（数组），表示该节点被勾选时实际生效的权限 ID 列表。前端只收集所有 :checked 节点的 full_ids 并去重：

											
												
												
													VPS Bootstrap
													从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
												
												下载
												
											
										
function getCheckedPermIds() {
  const ids = new Set();
  $('input[type="checkbox"]:checked').each(function() {
    const fullIds = $(this).data('full-ids');
    if (Array.isArray(fullIds)) {
      fullIds.forEach(id => ids.add(id));
    }
  });
  return Array.from(ids);
}
// 提交时：fetch('/api/role/123/permissions', {
//   method: 'PUT',
//   body: JSON.stringify({ perm_ids: getCheckedPermIds() })
// });
如果后端没传 full_ids，就说明它按传统方式要求“所有勾选节点 ID”，此时必须确保树节点 ID 本身已是最终权限标识符（例如 "user:create"），而非分类 ID（如 "user"）。
移动端点击区域太小？给 label 加 pt-2 pb-2，别改 checkbox 大小
Bootstrap 5 的 form-check-input 默认很小，直接放大 transform: scale(1.3) 会破坏对齐，且 iOS Safari 对缩放 checkbox 支持不稳定。正确解法是扩大包裹它的 label 点击范围：
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="perm_42" data-full-ids='["order:export"]'><label class="form-check-label pt-2 pb-2" for="perm_42">导出订单</label>
</div>
这样既保持原生 checkbox 样式稳定，又提升触控体验。如果用的是自定义图标（如 Font Awesome），务必确保 for 属性与 id 严格匹配，否则点击 label 不会触发 checkbox。
真正难的不是画出树，而是让勾选状态精确反映权限继承关系，并和后端约定好哪些 ID 该存、哪些该忽略。很多项目卡在这一步，反复调试才发现后端返回的 pid 是字符串而前端当数字比对，或者 indeterminate 被 CSS 重置样式覆盖掉了。