侧边栏表格

简介

侧边栏组件用于在表格左侧显示分类导航菜单，实现数据分类筛选功能。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

// 创建表格
Builder::crud(function($builder) {
  // 使用侧边栏（指定URL参数名）
  $builder->useSidebar('category');
  
  // 添加侧边栏项
  $builder->addSidebar('全部', '');
  $builder->addSidebar('分类A', 'a');
  $builder->addSidebar('分类B', 'b');
  $builder->addSidebar('分类C', 'c');
});

带图标的侧边栏

Builder::crud(function($builder) {
  $builder->useSidebar('type');
  
  // 添加带图标的侧边栏项
  $builder->addSidebar('全部', '', 'fa fa-list');
  $builder->addSidebar('文档', 'doc', 'fa fa-file-text');
  $builder->addSidebar('图片', 'image', 'fa fa-image');
  $builder->addSidebar('视频', 'video', 'fa fa-video-camera');
});

批量添加侧边栏

Builder::crud(function($builder) {
  $builder->useSidebar('status');
  
  // 批量添加
  $builder->addSidebars([
    ['label' => '全部', 'value' => '', 'icon' => 'fa fa-list'],
    ['label' => '待审核', 'value' => 'pending', 'icon' => 'fa fa-clock-o'],
    ['label' => '已通过', 'value' => 'approved', 'icon' => 'fa fa-check'],
    ['label' => '已拒绝', 'value' => 'rejected', 'icon' => 'fa fa-times']
  ]);
});

自定义侧边栏

Builder::crud(function($builder) {
  // 使用侧边栏组件实例进行高级配置
  $sidebar = $builder->useSidebar('nav');
  $sidebar->stacked(true); // 堆叠显示
  
  $builder->addSidebar('所有项目', '');
  $builder->addSidebar('进行中', 'active', 'fa fa-spinner');
  $builder->addSidebar('已完成', 'completed', 'fa fa-check-circle');
  $builder->addSidebar('已归档', 'archived', 'fa fa-archive');
});

可用方法

方法名参数返回值说明
useSidebaractiveNav启用侧边栏并指定URL参数名
addSidebarlabel, value, icon, propsthis添加单个侧边栏项
addSidebarssidebarsthis批量添加侧边栏项

方法参数说明

useSidebar

参数名类型默认值说明
activestring'_nav'URL参数名，用于标识选中的菜单项

addSidebar

参数名类型默认值说明
labelstring必填菜单项显示文本
valuemixed必填菜单项的值
iconstring''图标类名
propsarray[]其他属性

addSidebars

参数名类型默认值说明
sidebarsarray必填侧边栏项数组，每项包含 label、value、icon 等字段

侧边栏项配置

字段名类型必填说明
labelstring是显示文本
valuemixed是值（将作为URL参数）
iconstring否图标类名
activebool否是否选中（自动计算）

使用场景

  • 数据分类筛选
  • 状态分组展示
  • 类型快速切换
  • 分类导航菜单

注意事项

  1. 侧边栏显示在表格左侧
  2. 点击侧边栏项会自动更新URL参数并刷新数据
  3. 当前选中项会自动高亮显示
  4. 如果未设置图标，默认使用 'fa-regular fa-folder-open'
  5. URL参数会保留其他筛选条件
  6. 侧边栏值为空字符串表示"全部"或不筛选