README

用于 DataTables.net 库的 DataTable 包，支持服务器端处理和 VueJS 组件。

^{点击图片查看兼容浏览器中的简短演示}

详细信息

支持

• 服务器端数据加载，支持多参数
• 在表格的所有列中进行搜索（您也可以选择排除某些列）
• 可自定义列的可见性
• 为布尔标志列提供美丽的标签渲染
• 条纹行，视觉效果更佳
• 支持自定义列中数据的渲染
• 每个表格的保存状态，对于某些选项和首选项，可以选择重置所有内容为默认值
• 列的重新排序
• 对任何列进行排序（您也可以选择在配置中排除某些列）
• 用户可配置的分页
• 按需重新加载数据
• 根据可用的权限自动显示查看/编辑/删除按钮
• 支持服务器端导出表格数据为 Excel，使用当前搜索过滤，最多可配置限制
• 允许覆盖主查询模型的 appends 属性
• 为表格模板等提供 Sublime 插件片段

安装

组件已包含在 Enso 安装中，无需进行任何额外的安装步骤。

使用

1. 可选地，您可能需要发布示例表格结构类

   php artisan vendor:publish --tag=datatable-class
   

2. 在您的控制器中添加 DataTable 特性。这包括两个辅助方法，用于管理构建器

   • initTable
   • getTableData

3. 在控制器中，您必须定义一个用于查询构建器的方法，例如

   public function getTableQuery()
   {
       return MyModel::select(\DB::raw('id as DT_RowId, attribute1, ..., attributeN'));
   }
   

   请注意，它应返回一个 QueryBuilder 对象，而不是结果集合。

4. 同样，在控制器中添加 protected $tableStructureClass = MyTableStructure::class，这应该是一个完全限定的类名，用于描述在您的页面上渲染的表格结构

5. 在您的路由文件中添加辅助方法的路由，并命名为 myRoute.initTable、myRoute.getTableData 和可选的 myRoute.exportExcel，如果您想启用结果导出功能

6. 如果您需要，不要忘记为新路由添加用户权限

7. 在您的页面/组件中添加

   <data-table
       source="myRoute"
       id="my-table-id"
       :custom-render="customRender">
   </data-table>
   

8. 从结构类配置表格

选项

• source - 必需的，必须引用控制器的基本路由，其中存在 initTable & getTableData 端点
• extra-filters - 格式如下所示的反应性对象

  "extraFilters": {
      "table": {
          "field_1" : '',
          "field_2" : '',
      }
  }
  

• custom-params - 向后端发送的额外参数，用于自定义逻辑/查询

  "customParams": {
      "orders": {
          dispatched: ''
      }
  }
  

• interval-filters - 如果筛选值是日期，则必需 dbDateFormat。给定的格式必须与数据库日期格式匹配

  "intervalFilters": {
     "table":{
        "created_at": {
           "min":"value",
           "max":"value",
           "dbDateFormat": "Y-m-d"
        },
        "amount": {
          "min": 0,
          "max": 1000
        }
     }
  }
  

TableStructure

• crtNo - 当前数字列的标签
• actionButtons - 要渲染的自定义按钮类型的数组
• headerButtons - 要在表头上方渲染的按钮类型的数组
• responsePriority - 响应模式中列的优先级，即在内容不适合屏幕时
• headerAlign & bodyAlign - 单元格中文本的对齐方式，例如 'center'
• icon - 用于包含数据表的卡片所使用的图标
• notSearchable - 不使用组件搜索可搜索的列索引的简单数组 NOT
• notSortable - 不可排序的列索引的简单数组 NOT
• boolean - 应作为布尔值处理的列索引的数组
• enumMappings - 键值对数组，其中键是列名，值是用于翻译的枚举类名。这些枚举包含您希望以更人性化的方式呈现的标志类型值，例如 Shipped/Delivered 而不是 5 / 6。
• appends - 可选的模型属性数组，可以在返回查询结果之前附加 ^{1 2}
• columns - 数组数组。每个内部数组包含
  • label - 表列头标签
  • data - 查询结果中数据的别名，例如 'owner'
  • name - 搜索时使用的表列，例如 'owner.name'

¹ 如果您正在追加通过关系获取的属性，您需要在原始查询中包含模型的 id 属性 ² 使用附加属性时，由于这些属性实际上不存在于模型的数据库表中，您需要使用 notSearchable 选项排除它们，否则在搜索时会出现错误

Config

• excelRowLimit - 使用导出功能时导出的最大条目数。您可能需要根据服务器的 RAM 和 PHP 设置进行调整。

Publishes

• php artisan vendor:publish --tag=datatable-component - VueJS 组件文件
• php artisan vendor:publish --tag=datatable-options - json 选项文件
• php artisan vendor:publish --tag=datatable-lang - 默认语言文件
• php artisan vendor:publish --tag=datatable-class - 必须在创建特定结构时扩展的抽象 TableStructure 类
• php artisan vendor:publish --tag=enso-update - 当新版本发布时，想要更新 VueJS 组件时的常用别名

Notes

Laravel Enso 包包含此包。在那里您可以找到使用组件的工作示例

在 snippets 文件夹中，您将找到一个用于快速创建存根表结构类的 sublime 缩略图

依赖项

• Core 用于用户模型
• Helpers 用于一些通用类
• VueComponents 用于配套的 VueJS 组件
• Laravel-Excel 用于处理 Excel 文件

贡献

非常欢迎。拉取请求很棒，但问题报告也同样重要。

许可证

本软件包是在MIT许可证下发布的。