千牛包表包下载

Vue数据表 (Vue Data Table)

Data Table package with server-side processing and VueJS components. Build fast any complex table based on a JSON template.

具有服务器端处理和VueJS组件的数据表包。 基于JSON模板快速构建任何复杂的表。

^{click on the photo to view a short demo in compatible browsers}

^{单击照片以在兼容的浏览器中查看简短的演示}

特征 (Features)

• efficient server side data loading

  高效的服务器端数据加载

• multi-column searching

  多列搜索

• multi-column sorting

  多列排序

• configurable pagination

  可配置分页

• user customizable column visibility

  用户可定制的列可见性

• configurable action buttons

  可配置的动作按钮

• beautiful tag rendering for boolean flags

  布尔标志的漂亮标签呈现

• can display and format numbers as money values, and the formatting can be customized via the template

  可以显示数字并将其格式化为货币值，并且可以通过模板自定义格式

• full customization via the use of scoped slots for your columns

  通过为列使用作用域内的插槽来完全自定义

• smart resizing & auto-hide based on screen width. Data is still accessible under an optional child row

  根据屏幕宽度智能调整大小和自动隐藏。 仍然可以在可选的子行下访问数据

• tooltips for columns/rows

  列/行的工具提示

• front-end translations for labels and even data

  标签甚至数据的前端翻译

• configurable, on-the-fly view modes: compact, striped, bordered, hover

  可配置的即时查看模式：紧凑，条纹，边框，悬停

• configurable column alignment from the template left / center / right

  可从模板左/中/右配置列对齐

• preferences/state save for each table in the browser's localStorage

  在浏览器的localStorage中为每个表保存首选项/状态

• server-side Excel exporting of the table data, using your current sorting and filtering choices, with email delivery and optional push notifications

  使用当前的排序和过滤选项，通过电子邮件传递和可选的推送通知，在服务器端Excel中导出表数据

• reloading of data on demand

  按需重新加载数据

• smart management of huge datasets, with configurable limit

  可管理的大型数据集，具有可配置的限制

• posibility to define actions that apply to the entire, filtered, dataset

  定义适用于整个过滤数据集的操作的可能性

• Enso Enum computation

  Enso枚举计算

• Laravel accessors for the main query model

  用于主要查询模型的Laravel访问器

• the configuration template for each table has been designed to be as light and straightforward as possible without losing

  每个表的配置模板都设计得尽可能轻便，简单，而不会丢失

  out on features
  在功能上

• thorough validation of the JSON template with developer friendly messages, in order to avoid misconfiguration issues

  使用开发人员友好的消息对JSON模板进行全面验证，以避免配置错误

• can be used independently of the Enso ecosystem

  可以独立于Enso生态系统使用

在将来 (In the future)

• PDF export alongside the XLSX report

  PDF导出以及XLSX报告

考虑中 (Considering)

• editable table cells, with input, date-picker, select, checkbox support

  可编辑表格单元格，具有输入，日期选择器，选择和复选框支持

安装 (Installation)

恩索 (Enso)

If you're using Laravel Enso, this package is already included, so no further installation is required

如果您使用的是Laravel Enso ，则此软件包已包含在内，因此无需进一步安装

独立地 (Independently)

Note: the following steps assume you have some experience with Laravel and VueJS.

注意：以下步骤假定您对Laravel和VueJS有一定的经验。

Outside of Laravel Enso, the following dependencies are required:

在Laravel Enso之外，需要以下依赖项：

• Bulma for styling

  布尔玛造型

• Axios for AJAX requests

  Axios的AJAX请求

• Lodash for debounce

  Lodash进行反跳

• Font Awesome 5 for the icons

  图标的Font Awesome 5

• Akryum v-tooltip for displaying tooltips

  Akryum v-tooltip用于显示工具提示

• Css element queries - resize detector for responsiveness

  CSS元素查询-调整大小检测器的响应度

• accounting.js for formatting numbers as money values

  accounting.js，用于将数字格式化为货币值

Next:

下一个：

1. composer require laravel-enso/vuedatatable to pull in the package and its dependencies

   composer require laravel-enso/vuedatatable来composer require laravel-enso/vuedatatable软件包及其依赖项

2. php artisan vendor:publish --tag=enso-assets to publish resources

   php artisan vendor:publish --tag=enso-assets发布资源

3. php artisan vendor:publish --tag=vuedatatable-config to publish the configuration file

   php artisan vendor:publish --tag=vuedatatable-config发布配置文件

4. import, include, setup the resources and dependencies

   导入，包含，设置资源和依赖项

   import axios from 'axios';
   import VueTable from './components/enso/vuedatatable/VueTable.vue';
   import Toastr from './components/enso/bulma/toastr';import fontawesome from '@fortawesome/fontawesome';
   import FontAwesomeIcon from '@fortawesome/vue-fontawesome';Vue.component('fa', FontAwesomeIcon);Vue.use(Toastr, {position: 'right',duration: 3000,closeButton: true,
   });window.axios = axios;

   Note on Font Awesome: Each icon used in the datatable should be available (imported) in the page/component where vue-table is used, for example:

   关于Font Awesome的注释：数据表中使用的每个图标应该在使用vue-table的页面/组件中可用(导入)，例如：

   import { faSearch, faSync, faAngleDown, faInfoCircle }from '@fortawesome/fontawesome-free-solid/shakable.es';
   fontawesome.library.add(faSearch, faSync, faAngleDown, faInfoCircle);

   Please read the official Font Awesome documentation for further details.

   请阅读官方的Font Awesome 文档以获取更多详细信息。

5. Create the JSON table configuration template.

   创建JSON表配置模板。

   Example: exampleTable.json

   示例： exampleTable.json

6. Create the table controller which defines the query and gives the path to the JSON template

   创建定义查询的表控制器，并提供JSON模板的路径

   class UserTableController extends Controller
   {use Datatable, Excel;protected $tableClass = UserTable::class;
   }

   Example: TableController.php

   示例： TableController.php

7. Create the table builder class, which must extend the abstract Table class, set the $templatePath variable and implement the query method

   创建表构建器类，该类必须扩展抽象Table类，设置$templatePath变量并实现query方法

   class UserTable extends Table
   {protected $templatePath = __DIR__.'/../Templates/users.json';public function query(){return User::select(\DB::raw('users.id as "dtRowId", owners.name as owner, users.first_name, users.last_name, users.phone,users.email, roles.name as role, users.is_active'))->join('owners', 'users.owner_id', '=', 'owners.id')->join('roles', 'users.role_id', '=', 'roles.id');}
   }

   Example: ExampleTable

   示例： ExampleTable

8. Declare the route in your route file, to present your controller's methods

   在路由文件中声明路由，以显示控制器的方法

   Route::get('init', '[email protected]')->name('init');
   Route::get('data', '[email protected]')->name('data');
   Route::get('exportExcel', '[email protected]')->name('exportExcel');
   

   Full example: web.php

   完整示例： web.php

9. Place the vuedatatable VueJS component in your page/component:

   将vuedatatable VueJS组件放置在页面/组件中：

   <vue-table class="box"path="administration.users.initTable"id="users">
   </vue-table>

   Example: index.blade.php

   示例： index.blade.php

用法 (Usage)

The Vue Data Table component works by pulling its configuration through an initialization request. After loading its configuration through that first request, it makes another request for pulling in its data, based on its configuration.

Vue数据表组件通过初始化请求拉动其配置来工作。 通过第一个请求加载其配置后，它会根据其配置发出另一个请求以提取其数据。

If UI changes occur that require the reload of the data (such as when searching, sorting, etc) or the loading of additional data, such as when changing to the next page of results, another request for data is made.

如果发生UI更改而需要重新加载数据(例如在搜索，排序等时)或加载其他数据(例如在更改到结果的下一页时)，则会提出另一个数据请求。

This means that the configuration is not re-read as long as the component is not re-drawn.

这意味着只要不重新绘制组件，就不会重新读取配置。

For the data editor functionality (N/A), separate requests will be used.

对于数据编辑器功能(N / A)，将使用单独的请求。

Note: In order to make the above requests, named routes are required.

注意：为了发出上述请求，需要命名路由。

可配置的巨大结果集管理 (Configurable huge resultset management)

When you have huge resultsets, the table component will take longer to respond to the user input. In order to improve the user experience, when we have more results than the limit set in the configuration (in the fullInfoRecordLimit key), the back-end builder no longer computes the number filtered and any totals for that table.

当结果集很大时，表组件将花费更长的时间来响应用户输入。 为了改善用户体验，当我们得到的结果超出配置中设置的限制(在fullInfoRecordLimit键中)时，后端构建器将不再计算该表的筛选数量和任何总计。

However, a blue information icon becomes available in the list of table buttons, that allows the user to request this computed information.

但是，一个蓝色的信息图标在表格按钮列表中变为可用，这使用户可以请求此计算出的信息。

Since this is an extreme case with tables this big and is a seldom situation, the configuration for the limit is global.

由于这是一个如此大的表的极端情况，很少出现，因此限制的配置是全局的。

组态 (Configuration)

The package comes with with a publishable configuration file which you may update in order to fit your project requirements. The various options are explained below.

该软件包随附一个可发布的配置文件，您可以对其进行更新以适合您的项目要求。 各种选项说明如下。

return ['validations' => 'local','labels' => ['crtNo'   => '#','actions' => 'Actions',],'lengthMenu' => [10, 15, 20, 25, 30,],"method": "GET",'buttons' => ['global' => ['create' => ['icon' => 'plus','class' => 'is-success','routeSuffix' => 'create','event' => 'create','action' => 'router','label' => 'Create',],'excel' => ['icon' => 'file-excel','class' => null,'routeSuffix' => 'exportExcel','event' => 'export-excel','action' => 'export','label' => 'Excel',],'action' => ['icon' => 'check','class' => null,'routeSuffix' => 'action','event' => 'custom-action','postEvent' => 'custom-action-done','action' => 'ajax','method' => 'PATCH','label' => 'Action',],],'row' => ['show' => ['icon' => 'eye','class' => 'is-success','routeSuffix' => 'show','event' => 'show','action' => 'router',],'edit' => ['icon' => 'pencil-alt','class' => 'is-warning','routeSuffix' => 'edit','event' => 'edit','action' => 'router',],'destroy' => ['icon' => 'trash-alt','class' => 'is-danger','routeSuffix' => 'destroy','event' => 'destroy','action' => 'ajax','method' => 'DELETE','message' => 'The selected record is about to be deleted. Are you sure?','confirmation' => true,'postEvent' => 'destroyed',],'download' => ['icon' => 'cloud-download-alt','class' => 'is-primary','routeSuffix' => 'download','event' => 'download','action' => 'href',],],],'style' => ['default' => ['striped', 'hover', 'bordered', 'center',],'mapping' => ['left' => 'has-text-left','center' => 'has-text-centered','right' => 'has-text-right','compact' => 'is-narrow','striped' => 'is-striped','bordered' => 'is-bordered','hover' => 'is-hoverable',],],'export' => ['path' => 'exports','limit' => 20000,'maxExecutionTime' => 100,'notifications' => ['broadcast', 'database'],],'dateFormat' => 'd-m-Y','fullInfoRecordLimit' => 100000,
];

验证 (validations)

is a string, values may be always/local, default local. When parsing the template, the given options are validated because we want to avoid misconfiguration leading to unexpected results. It makes sense to run the validator just during development, however, if you want to also run it in production, you may configure that here.

是一个字符串，值可以always / local ，默认为local 。 解析模板时，将验证给定的选项，因为我们希望避免配置错误导致意外结果。 仅在开发期间运行验证器是有意义的，但是，如果您还想在生产环境中运行它，则可以在此处进行配置。

标签 (labels)

is an array of options for the header names of the implicit columns. Note that these labels are also translated if a translation function is given to the VueJS component, through the i18n parameter. Options:

是隐式列的标题名称的选项数组。 请注意，如果通过i18n参数将翻译功能提供给VueJS组件，则也会翻译这些标签。 选项：

• crtNo is the current line number, default #

  crtNo是当前行号，默认为#

• actions, is the last table column that contains the row's buttons, default Actions

  actions ，是包含该行按钮的最后一个表格列，默认为Actions

lengthMenu (lengthMenu)

is an array of numbers, default [10, 15, 20, 25, 30] representing the pagination options for the table. For each table's JSON template, the lengthMenu parameter is also available, and, if given, it will have higher priority over the global configuration. This allows for some tables to have a different pagination than the default.

是一个数字数组，默认为[10, 15, 20, 25, 30]代表表格的分页选项。 对于每个表的JSON模板， lengthMenu参数也是可用的，并且，如果给定的话，它将比全局配置具有更高的优先级。 这允许某些表的分页与默认表不同。

方法 (method)

is a either "GET" or "POST". If you're working with larger tables sometimes the URI can get too long and you may run in a 414 Exception. This option allows to configure the request method for fetching data in a local table, and if is given it will have higher priority over the global configuration.

是“ GET”或“ POST”。 如果您使用较大的表，则URI有时可能会太长，并且可能会在414异常中运行。 此选项允许配置用于在本地表中获取数据的请求方法，如果提供该方法，则该方法将比全局配置具有更高的优先级。

纽扣 (buttons)

is an array of button configurations, with 2 types:

是按钮配置的数组，有2种类型：

• global, these buttons are the buttons that are rendered above the search input, global for the whole table, which do not depend on the data of a particular row. Defaults:

  global ，这些按钮是呈现在搜索输入上方的按钮，对于整个表是全局的，而不依赖于特定行的数据。 默认值：

  • create, button for creating a new resourcecreate ，用于创建新资源的按钮
  • excel, button for exporting the contents of the table. Note: The export process takes into account your current sorting and filtering.excel ，用于导出表格内容的按钮。 注意：导出过程会考虑您当前的排序和过滤。

• row, these are the buttons rendered in the action column, and defaults include:

  row ，这些是在“ action列中呈现的按钮，默认值包括：

  show, edit, destroy, download

  show ， edit ， destroy ， download

样式 (style)

is an array of style configurations, with 2 sections:

是样式配置的数组，包括2个部分：

• default, array of classes, default is ['striped', 'hover', 'bordered', 'center'], that are applied by default for all tables. Note that you should set only one alignment specific class in the default.

  default ，类数组，默认为['striped', 'hover', 'bordered', 'center'] ，默认情况下将应用于所有表。 请注意，默认情况下，您只应设置一个对齐特定的类。

• mapping, array of configurations for the styles. While designed for/with Bulma, you may specify here custom classes in order to personalize your tables

  mapping ，样式的配置数组。 在为布尔玛设计/针对布尔玛设计时，您可以在此处指定自定义类以个性化您的表格

出口 (export)

is an array of configuration options for exporting the contents of a file. Note: The export process takes into account your current sorting and filtering. Available options:

是用于导出文件内容的一系列配置选项。 注意：导出过程会考虑您当前的排序和过滤。 可用选项：

• path, string, folder where the temporary export file is saved, default exports. This folder is expected to reside in storage/app

  path ，字符串，保存临时导出文件的文件夹，默认exports 。 该文件夹应位于storage/app

• limit, number, the maximum limit of results that are exported, default 20000. You may want to tweak this depending on the time the export takes, the size of the file, etc.

  limit ，number，导出结果的最大限制，默认为20000。您可能要根据导出时间，文件大小等进行调整。

• maxExecutionTime, number, max number of seconds for the php script to run, before it times out. You may need to adjust this depending on how big your reports are.

  maxExecutionTime ，数字，php脚本在超时之前运行的最大秒数。 您可能需要根据报告的大小进行调整。

• notifications, array of notification options, default ['broadcast', 'database']. Note that

  notifications ，通知选项数组，默认值['broadcast', 'database'] 。 注意

  email notifications are always used for sending the actual export file, so you should take into account email attachment size and mail server timeout / other limitations when choosing values for the export.
  电子邮件通知始终用于发送实际的导出文件，因此在选择导出值时，应考虑电子邮件附件大小和邮件服务器超时/其他限制。

日期格式 (dateFormat)

is a string, with the date format for date columns, which will be used when displaying date values

是一个字符串，具有日期列的日期格式，将在显示日期值时使用

fullInfoRecordLimit (fullInfoRecordLimit)

is a numeric limit, representing the top resultset limit when the computation of the filtered & totals functionality becomes disabled by default and is made avaible on-demand.

是一个数字限制，代表当默认情况下禁用“过滤和总计”功能的计算并按需可用时的最高结果集限制。

模板 (Template)

{"routePrefix": "route.prefix","readSuffix": "read.suffix","writeSuffix": "write.suffix","name": "Table Name","icon": "list-alt","crtNo": true,"auth": false,"lengthMenu": [10, 15, 20, 25, 30],"method": "POST","appends": ["customAttribute"],"buttons": ["show", "create", "edit", "destroy", "download", "exportExcel",{"type": "row","icon": "bell","class": "has-text-purple","routeSuffix": "custom","event": "custom-event","action": "router","fullRoute": "optional.full.route","label": "Button Label","confirmation": false,"message": "Are you sure?","method": "GET/PUT/PATCH/POST/DELETE","params": {"first": "foo","second": "bar"}}],"columns": [{"label": "Name","data": "table.column","name": "columnAlias","meta": ["searchable", "sortable", "translation", "boolean", "slot", "rogue", "editable", "total", "date","icon", "clickable", "tooltip"],"enum": "EnumClass","tooltip": "My Tooltip Column Detail","class": "is-custom-class","align": "right","money": {"symbol": "$","decimal": ".","thousand": ",","precision": 2,"format": "%s%v"}}]
}

Options:

选项：

• routePrefix, required, string, the common route segment, used for both read and write (N/A)

  routePrefix ，必需，字符串，公用路由段，用于读取和写入(不适用)

• readSuffix, required, string, the route endpoint, that gets concatenated to the routePrefix

  readSuffix ，必需，字符串，路由端点，被连接到routePrefix

• writeSuffix, optional, string, the route endpoint, that gets concatenated to the routePrefix.

  writeSuffix (可选)字符串，路由端点，被连接到routePrefix 。

  This is only needed when using the editor (N/A).
  仅在使用编辑器(N / A)时才需要。

• name, optional, string, the title used for the table.

  name ，可选，字符串，表标题。

• icon, optional, string or array of strings, expects Font Awesome icon classes

  icon (可选)，字符串或字符串数​​组，需要Font Awesome图标类

  (make sure the used class is avaible in the page, via a local or global import)
  (通过本地或全局导入，确保所用的类在页面中可用)

• crtNo, optional, boolean, flag for showing the current line number

  crtNo ，可选，布尔值，用于显示当前行号的标志

• auth, optional, boolean, flag for removing auth when using in enso context

  auth ，可选，布尔值，用于在enso上下文中删除auth的标志

• lengthMenu, optional, array, list of options for the table pagination. If missing, the default values in the

  lengthMenu ，可选，数组，表分页的选项列表。 如果缺少，则默认值为

  global configuration are used. If given, the template values have higher precedence over the global configuration
  使用全局配置。 如果给定，则模板值的优先级高于全局配置

• method, optional, string, either "GET" or "POST". If missing, the default value in the

  method ，可选，字符串，“ GET”或“ POST”。 如果缺少，则默认值为

  global configuration is used.
  使用全局配置。

• appends - optional, array, list of appended attributes that need to be added to the query results.

  appends可选的数组，需要添加到查询结果中的附加属性列表。

  Note that the appended attributes are available from the main query model.
  请注意，可以从主查询模型获得附加的属性。
  Also note, that in order the if the appended attributes use any of the model's relationships,
  另请注意，如果附加属性使用了模型的任何关系，
  the raw table query should also select the id as id (this is a Laravel requirement).
  原始表查询还应该选择id作为id(这是Laravel的要求)。

• buttons, optional, array, list of buttons that need to be rendered. See below for more in-depth information

  buttons ，可选，数组，需要呈现的按钮列表。 请参阅下面的详细信息

• columns, required, array, list of column configurations. See below for more in-depth information

  columns ，必填，数组，列配置列表。 请参阅下面的详细信息

• debounce, optional, number, the time in milliseconds that is used for the debounce when reloading data for the table,

  debounce ，可选，数字，为表重新加载数据时用于去抖动的时间(以毫秒为单位)，

  for example when typing in the search box or changing filters, default
  例如在搜索框中输入或更改过滤器时，默认

  100

  100

纽扣 (Buttons)

There are several type of buttons, depending on how you classify them.

按钮有几种类型，具体取决于您如何对其进行分类。

By configuration:

通过配置：

• simple, declared as a string, representing one of the string buttons from the config.

  simple ，声明为字符串，表示配置中的字符串按钮之一。

  Example:
  例：

  "show", "create", "edit", "destroy", "download", "exportExcel"

  "show", "create", "edit", "destroy", "download", "exportExcel"

• complex, declared as an object, with several attributes.

  complex ，声明为具有多个属性的对象。

By position:

按职位：

• row, buttons that are rendered on each row, in the actions column.

  row ，在动作列中每行呈现的按钮。

  Example:
  例：

  "show", "edit", "destroy", "download", or custom buttons with the type:"row" configuration.

  "show", "edit", "destroy", "download"或type:"row"配置的自定义按钮。

• global, buttons that are rendered above the search input, at the top of the table VueJS component.

  global ，在表VueJS组件顶部的搜索输入上方呈现的按钮。

  Example:
  例：

  "create", "exportExcel", or custom buttons with the type:"global" configuration.

  "create", "exportExcel"或type:"global"配置的自定义按钮。

By action:

通过动作：

• router, buttons that trigger an action/navigation through the VueJS router, "action": "router"

  router ，用于触发通过VueJS路由器进行操作/导航的按钮， "action": "router"

• href, buttons that trigger an action/navigation through a plain HTML link

  href ，通过纯HTML链接触发动作/导航的按钮

• export, buttons that trigger an export

  export ，触发导出的按钮

• ajax, buttons that trigger an ajax request.

  ajax ，触发ajax请求的按钮。

The configuration options for buttons are, as follows:

按钮的配置选项如下：

• type: required, string, available options are row / global

  type ：必需，字符串，可用选项为row / global

• icon: required, string, expects Font Awesome icon classes (ensure classes are available in the page)

  icon ：必需，字符串，需要Font Awesome图标类(确保页面中提供类)

• class: required, string, expects CSS styling classes

  class ：必需，字符串，需要CSS样式类

• routeSuffix: optional, string, if given, gets appended to the routePrefix param

  routeSuffix ：可选，字符串(如果给定)将附加到routePrefix参数

• event: optional, string, the name of an event that is emitted on click, which allows for custom in-page handling,

  event ：可选，字符串，点击时发出的事件的名称，允许自定义页内处理，

  outside of the table
  在桌子外面

• postEvent: optional, string, the name of the event that is emitted after the completion of the ajax request

  postEvent ：可选，字符串，在ajax请求完成后发出的事件的名称

  (only applies to ajax type of buttons)
  (仅适用于ajax类型的按钮)

• action: optional, string, available options are router / href / export / ajax.

  action ：可选，字符串，可用选项为router / href / export / ajax 。

  Depending on the chosen options, other parameters could be required
  根据选择的选项，可能需要其他参数

• fullRoute: optional, string, if given, is used independently from the routePrefix param

  fullRoute ：可选，字符串(如果给定)，独立于routePrefix参数使用

• label: optional, string, should be given only for global buttons

  label ：可选，字符串，仅应为全局按钮提供

• confirmation: optional, boolean, flag for showing a confirmation modal before processing the action, such as deletion

  confirmation ：可选，布尔值，标志，用于在处理动作(例如删除)之前显示确认模式

• message: optional, string, used in conjunction with confirmation, when you want to customize the modal's message

  message ：可选，字符串，当您要自定义模式的消息时，与confirmation结合使用

• method: optional, string, should be given if you have action set as ajax,

  method ：如果您将action设置为ajax ，则应给出可选的字符串

  available options are:
  可用的选项有：

  "GET" / "PUT" / "PATCH" / "POST" / "DELETE"

  "GET" / "PUT ” / "PATCH ” / "POST ” / "DELETE ”

• params: optional, object, used if action = router, object is added to route params object

  params ：可选，对象，如果action = router ，则使用对象，以将对象添加到路由params对象

列 (Columns)

The columns configuration attribute is required, and expects an array of configuration objects. Each configuration object may have the following attributes:

列配置属性是必需的，并且需要一个配置对象数组。 每个配置对象都可以具有以下属性：

• label, required, string, the column name used in the table header. This will be translated if a translation function

  label ，必需，字符串，表标题中使用的列名。 如果翻译功能可以翻译

  is available.
  可用。

• data, required, string, the table + column wherefrom data gets pulled, in the query. For example 'users.email'

  data ，必需，字符串，在查询中从中获取数据的表+列。 例如“ users.email”

• name, required, string, the alias for that column's data, given in the select query

  name ，必需，字符串，该列数据的别名(在选择查询中给出)

• enum, optional, string, the class name of the enumeration used to transform/map the values of that column/attribute.

  enum ，可选，字符串，用于转换/映射该列/属性值的枚举的类名。

  For example, you may use this mechanism to show labels instead of integer values, for an attribute that holds
  例如，对于包含以下内容的属性，您可以使用此机制来显示标签而不是整数值
  the type for a model/table.
  模型/表格的类型。

• tooltip, optional, the text used for this column header's tooltip

  tooltip ，可选，用于此列标题的工具提示的文本

• class, optional, will be applied on the tables <td>

  class (可选)将应用于表<td>

• align, optional, a value in ["left", "center", "right"], will be applied to the column including header and footer. It has higher priority than the global template align attribute

  align (可选)，[[left]，“ center”，“ right”]中的值将应用于包括页眉和页脚的列。 它具有比全局模板align属性更高的优先级

• meta, optional, array of string tags/options, allowing further transformations:

  meta ，可选，字符串标签/选项的数组，允许进行进一步的转换：

  • searchable, optional, marks this column as searchable. If not searchable, a column is not used whensearchable (可选)，将此列标记为可搜索。 如果不可搜索，则在以下情况下不使用列
    using the table search functionality
    使用表格搜索功能
  • sortable, optional, marks this column as sortable. If not sortable, the controls to sort aresortable (可选)，将该列标记为可排序。 如果无法排序，则要排序的控件为
    not available for sorting
    不可排序
  • translation, optional, marks this column's values as translatable.translation (可选)将该列的值标记为可翻译。
    The
    i18n parameter translation function should be given to the VueJS table component in order for this to worki18n参数转换功能应提供给VueJS表组件，以使其工作
  • boolean, optional, marks this column as boolean, which means it will be rendered as suchboolean (可选)，将此列标记为boolean，这意味着它将照此显示
  • slot, optional, renders a scoped slot for the named after the specified column, exposing as props slot (可选)为指定列之后的名称呈现一个有范围的插槽，作为props column (object), column (对象)， row (array) and row (数组)和loading (boolean)loading (布尔值)公开
  • rogue, optional, marks this column as a rogue column. This marks the column as hidden for display,rogue (可选)将此列标记为流氓列。 这会将列标记为隐藏以显示，
    while still being available and used for searching
    同时仍然可用并用于搜索
  • editable, optional, marks this column as editable (N/A)editable ，可选，将此列标记为可编辑(N / A)
  • total, optional, if flagged, calculates a total for this columntotal ，可选，如果已标记，则为此列计算总计
  • render, optional, flags this column for custom rendering, allowing for unlimited customizationrender (可选)，将该列标记为自定义呈现，允许无限的自定义
    of the data in this column.
    此列中的数据。
    The column name and the whole row data are available as function parameters, and the render function should return HTML
    列名和整个行数据可用作函数参数，并且render函数应返回HTML
  • date, optional, marks the data of the column as dates,date (可选)将列的数据标记为日期，
  • icon, optional, if given, it renders a Font Awesome 5 icon as contents, using the 'column.icon' as the icon's classicon (可选)(如果提供的话)，它使用“ column.icon”作为图标的类，将Font Awesome 5图标呈现为内容
  • clickable, optional, flags the column as clickable, which means it makes it - you guessed it - clickable.clickable (可选)，将列标记为可点击，这意味着它使它(您猜到了)可点击。
    When clicked, it emits the
    当单击时，它将发出clicked event, with the column & row as event payloadclicked事件，其中列和行作为事件有效负载

• money, optional, object, is the configuration object used for formatting numbers as money values.

  money (可选的object)是用于将数字格式化为money值的配置对象。

  Since this is achieved via the accounting.js library, you should take a look at its documentation
  由于这是通过Accounting.js库实现的，因此您应该查看其文档

  here

  这里

VueJS组件 (The VueJS Component)

The VueTable component takes the following parameters:

VueTable组件采用以下参数：

• id, required, string, identification for this table, is used to store the preferences in the browser's local storage

  此表的id ，必需，字符串，标识用于将首选项存储在浏览器的本地存储中

• path, required, string, the URI for the table initialization request

  path ，必需，字符串，表初始化请求的URI

• filters, optional, object, reactive options that, if available, are sent along with the getTableData request and

  filters ，可选，对象，React性选项(如果可用)与getTableData请求一起发送，并且

  are used to filter results. Note that the selected values for the filters may be a value or an array
  用于过滤结果。 请注意，为过滤器选择的值可以是一个值或一个数组
  (in which case a
  (在这种情况下

  WHERE IN logic is applied when filtering)

  过滤时应用WHERE IN逻辑)

• params, optional, object, reactive parameters, that, if available, are sent along with the getTableData request and

  params ，可选的，对象，React性参数(如果可用)与getTableData请求一起发送，并且

  are be used to filter results
  用于过滤结果

• intervals, optional, object, reactive parameters, that, if available are used for interval filtering of the results

  intervals ，可选的，对象，React性参数，如果可用，则用于结果的间隔过滤

• i18n, optional, function, that is used for translating labels, headers, and table data

  i18n (可选)函数，用于翻译标签，标题和表数据

  The default value (function) for this parameter simply returns its argument as the translated value if used outside of
  如果在外部使用此参数的默认值(函数)，则仅将其参数作为转换后的值返回
  Enso while within Enso it will use it's translation function.
  在Enso中使用Enso时，它将使用其翻译功能。

Examples:

例子：

• filters - reactive object of the following format

  filters以下格式的React对象

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

• params - extra parameters sent to the back-end for custom logic / queries

  params -额外的参数发送到后端进行自定义逻辑/查询

  "params": {"orders": {dispatched: ''}
  }

• intervals - where dbDateFormat is REQUIRED if the filter values are dates. The given format has to match the database date format

  intervals如果过滤器值为日期，则需要dbDateFormat 。 给定的格式必须与数据库日期格式匹配

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

事件 (The Events)

For integration with other in-page components, the datatable component can emit serveral events, depending on the configuration:

为了与其他页内组件集成，数据表组件可以发出服务器事件，具体取决于配置：

• draw, with no payload, after each retrieval of the table data, such as when first loading the initial chunk,

  在每次检索表数据之后(例如首次加载初始块时)，不使用有效负载draw

  when loading the next 'page' of data, when reloading after a filter has changed, etc.
  在加载数据的下一个“页面”时，在更改过滤器后重新加载时等。

• input, with the search input as payload, when using the search box

  input ，使用搜索框时将搜索输入作为有效负载

• update-length, with the selected length, when changing the pagination length

  更改分页长度时， update-length具有选定的长度

• update-visibility, with no payload, when changing the columns visibility

  更改列可见性时， update-visibility ，没有有效负载

• reload, with no payload, when reloading the table

  reload加载表时，没有有效载荷的reload

• reset, with no payload, when resetting the table preferences

  reset表首选项时， reset ，没有有效负载

• request-full-info, with no payload, when clicking on the button that load all information for a table working with a huge data set

  单击按钮时，没有负载的request-full-info为使用巨大数据集的表加载所有信息

• clicked, with the column and the whole row as payload, when clicking on a clickable table cell,

  clicked ，将列和整行作为有效载荷，当单击可单击的表格单元格时，

  as configured in the template (also see the Columns section above)
  按照模板中的配置(另请参见上方的“列”部分)

• custom events, with no payload, for ajax type of buttons,

  自定义事件，没有有效负载，用于ajax类型的按钮，

  as configured in the template (also see the Buttons section above).
  按照模板中的配置进行操作(另请参见上面的“按钮”部分)。

• custom events, with the whole row the button is positioned on as payload,

  自定义事件，整行按钮都作为有效负载放置在按钮上，

  for buttons that have a meta event property (the even name is the property value)
  对于具有meta事件属性(偶数名称是属性值)的按钮

查询 (The query)

In your TableBuilder implementation, the query must look like this:

在您的TableBuilder实现中，查询必须如下所示：

public function query()
{return Owner::select(\DB::raw('id as "dtRowId", id, name, description, is_active, created_at'));
}

Keep in mind that at this stage, we're returning a QueryBuilder not a collection of results.

请记住，在此阶段，我们返回的是QueryBuilder而不是结果的集合。

If you need custom logic based on the request you have a request() getter available in the TableBuilder.

如果您需要基于请求的自定义逻辑，则可以在TableBuilder中使用request()获取方法。

进一步的例子 (Further Examples)

You may see the vue data table in action, with the code for the Owners page, right here:

您可能会在这里看到vue数据表，其中包含Owners页面的代码：

• data controller

  数据控制器

• table template

  表格模板

• front-end vue page

  前端Vue页面

• live result (if you're not already logged in, use [email protected] and password)

  实时结果 (如果您尚未登录，请使用[email protected]和password )

Feel free to look around at the various packages in the laravel-enso repository, to find more examples.

随意浏览laravel-enso存储库中的各种软件包，以找到更多示例。

动作 (Actions)

While you may have action buttons on each table row, sometimes you may wish to have custom actions, for the entire resultset of the table.

尽管您可能在每个表格行上都有操作按钮，但有时您可能希望针对表格的整个结果集执行自定义操作。

It is important to note that the action will be applied for ALL the FILTERED results, even the ones that might not be visible on the current page of the table (if there is more than one page).

重要的是要注意，该操作将应用于所有 FILTERED结果，即使该结果可能在表的当前页面上不可见(如果有多个页面)。

深入的例子 (In-depth example)

In order to achieve this functionality, we've included an example below, where we add a new button for the owners table:

为了实现此功能，我们在下面提供了一个示例，其中为owners表添加了一个新按钮：

1. Update your table JSON template, to include the button(s) for the action(s)

   更新您的表JSON模板，以包含用于操作的按钮

   ...
   "buttons": ["excel", "create", "edit", "destroy",{"type": "global","icon": "check","class": null,"routeSuffix": "myAction","event": "custom-action","postEvent": "custom-action-done","action": "ajax","method": "PATCH","label": "My Action"}
   ]
   ...

   Customize the attributes as required, keeping in mind:

   请根据需要自定义属性，请记住：

   • the method should match the action performed and needs to be the same as when defining the route该方法应与所执行的动作相匹配，并且必须与定义路线时相同
   • the suffix is what you'll need to use when defining the route (more on that below)后缀是定义路线时需要使用的后缀(下面有更多内容)

   Note that, if needed, you may define several buttons in a similar fashion.

   请注意，如果需要，您可以以类似的方式定义几个按钮。

2. Add a new Action implementation class, where you actually process the results.

   添加一个新的Action实现类，在其中实际处理结果。

   class OwnerMyAction extends Action
   {public function process(){\Log::info($this->data());}
   }

   This needs to extend the abstract LaravelEnso\VueDatatable\app\Classes\Action class, and implement the process method. The process method will be called for each available chunk of data, and the respective chunk is retrieved via the public data method.

   这需要扩展抽象的LaravelEnso\VueDatatable\app\Classes\Action类，并实现process方法。 将为每个可用数据块调用该处理方法，并通过公共data方法检索相应的块。

   The data method will return an array of the IDs in a chunk.

   data方法将以块的形式返回ID数组。

   Depending on your requirements, you may do the processing here or even generate jobs that will do the processing asynchronously.

   根据您的要求，您可以在此处进行处理，甚至生成将异步处理的作业。

3. Add a new controller for the action

   为动作添加新的控制器

   class OwnerMyActionController extends Controller
   {use Datatable, Action;protected $tableClass = OwnerTable::class;protected $actionClass = OwnerMyAction::class;protected $chunk = 2;
   }

   The controller manages the VueJS component's action request. You require:

   控制器管理VueJS组件的动作请求。 您需要：

   • Datatable and Datatable和Action traitAction特征
   • $tableClass variable, for the query$tableClass变量，用于查询
   • $actionClass variable, for your particular action implementation (from step 2)$actionClass变量，用于您的特定操作实现(来自步骤2)
   • $chunk variable is $chunk变量是optional, and represents the number of results in a chunk of data,可选变量，它代表数据块中结果的数量，
     the maximum available at any time, within the
     在行动实施的process method of your action implementation.process方法范围内，随时可以使用的最大值。
     Be default, a chunk of
     默认情况下，如果缺少变量，则使用1000 is used if the variable is missing.1000的块。

   Note that you may also reuse your TableController if you prefer and have only one 'action' for a given table.

   请注意，如果您愿意并且对于给定的表仅执行一个“操作”，则也可以重用TableController。

   其他高级详细信息 (Additional Advanced Details)

   The Action trait defines an action method that is a bit of a wrapper, and looks like this:

   Action特质定义了一个有点包装的action方法，如下所示：

   public function action(Request $request){(new $this->actionClass())->request($request->all())->class($this->tableClass)->chunk($this->chunk ?? 1000)->run();}

   If for any reason you want to handle more than one action through the same controller, you may declare multiple actionClasses, create multiple action methods that achieve the same process as the above, and, in conjuction with the proper routes, it can be done.

   如果出于任何原因要通过同一控制器处理多个动作，则可以声明多个actionClasses，创建多个动作方法以实现与上述相同的过程，并结合适当的路由，可以完成此操作。

4. Add the new route

   添加新路线

   Route::patch('myAction', '[email protected]')->name('myAction');
   

   Remember to place the route nested correctly, considering the possible uri and route name prefixes, as well as the controller namespace.

   请记住，考虑到可能的uri和路由名称前缀以及控制器名称空间，将路由正确嵌套。

   In this example, the url called for the Owners table will be 'administration/owners/myAction' and the name of the route will be 'administration.owners.myAction'.

   在此示例中，为“所有者”表调用的url将为“ administration / owners / myAction”，而路由的名称将为“ administration.owners.myAction”。

5. Create the new permission Navigate in the app to system/permissions and add the new administration.owners.myAction permission.

   创建新权限在应用程序中导航至system/permissions然后添加新的administration.owners.myAction权限。

6. That's it.

   而已。

默认操作按钮 (The default action button)

If you take a look the package config file, you'll notice that there already is a global action button defined. If you want to use it, you make skip the definition of a button at #1 step above, instead just declare "action" and continue with the other steps, taking into account the changed suffix (the route and permissions need to be altered).

如果查看软件包配置文件，您会注意到已经定义了一个全局操作按钮。 如果要使用它，请在上面的＃1步骤中跳过按钮的定义，而是声明"action"并继续其他步骤，并考虑到已更改的后缀(需要更改路由和权限) 。

定义可重复使用的操作按钮 (Defining reusable action buttons)

Similarly to the default action button, you may define other 'global' action buttons in the datable configuration, that can then be used as needed in any table templates in your project.

与默认操作按钮相似，您可以在datable配置中定义其他“全局”操作按钮，然后可以根据需要在项目中的任何表模板中使用它们。

出版 (Publishes)

• php artisan vendor:publish --tag=vuedatatable-config - the component configuration

  php artisan vendor:publish --tag=vuedatatable-config组件配置

• php artisan vendor:publish --tag=tables - the example table json config and builder

  php artisan vendor:publish --tag=tables示例表json配置和构建器

• php artisan vendor:publish --tag=vuedatatable-assets - all the VueJS components and assets

  php artisan vendor:publish --tag=vuedatatable-assets assets-所有VueJS组件和资产

• php artisan vendor:publish --tag=enso-assets - a common alias for when wanting to update the VueJS components,

  php artisan vendor:publish --tag=enso-assets想要更新VueJS组件时常用的别名，

  once a newer version is released, usually used with the
  一旦发布了较新的版本，通常与

  --force flag

  --force标志

• php artisan vendor:publish --tag=vuedatatable-mail - the templates used for notifications

  php artisan vendor:publish --tag=vuedatatable-mail用于通知的模板

• php artisan vendor:publish --tag=enso-mail - a common alias for when wanting to update the templates

  php artisan vendor:publish --tag=enso-mail想要更新模板时的通用别名

  used for notifications
  用于通知

翻译自: https://vuejsexamples.com/data-table-package-with-server-side-processing-and-vuejs-components/

千牛包表包下载