千牛包表包下载
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
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:
下一个:
-
composer require laravel-enso/vuedatatable
to pull in the package and its dependenciescomposer require laravel-enso/vuedatatable
来composer require laravel-enso/vuedatatable
软件包及其依赖项 -
php artisan vendor:publish --tag=enso-assets
to publish resourcesphp artisan vendor:publish --tag=enso-assets
发布资源 -
php artisan vendor:publish --tag=vuedatatable-config
to publish the configuration filephp artisan vendor:publish --tag=vuedatatable-config
发布配置文件 -
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 文档以获取更多详细信息。
-
Create the JSON table configuration template.
创建JSON表配置模板。
Example: exampleTable.json
-
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
-
Create the table builder class, which must extend the abstract
Table
class, set the$templatePath
variable and implement thequery
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
-
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
-
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, defaultActions
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 theaction
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 tablesmapping
,样式的配置数组。 在为布尔玛设计/针对布尔玛设计时,您可以在此处指定自定义类以个性化您的表格
出口 (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, defaultexports
. This folder is expected to reside instorage/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 thatnotifications
,通知选项数组,默认值['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 theroutePrefix
readSuffix
,必需,字符串,路由端点,被连接到routePrefix
writeSuffix
, optional, string, the route endpoint, that gets concatenated to theroutePrefix
.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 classesicon
(可选),字符串或字符串数组,需要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 numbercrtNo
,可选,布尔值,用于显示当前行号的标志auth
, optional, boolean, flag for removing auth when using in enso contextauth
,可选,布尔值,用于在enso上下文中删除auth的标志lengthMenu
, optional, array, list of options for the table pagination. If missing, the default values in thelengthMenu
,可选,数组,表分页的选项列表。 如果缺少,则默认值为
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 themethod
,可选,字符串,“ 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 informationbuttons
,可选,数组,需要呈现的按钮列表。 请参阅下面的详细信息columns
, required, array, list of column configurations. See below for more in-depth informationcolumns
,必填,数组,列配置列表。 请参阅下面的详细信息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 thetype:"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 thetype:"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 linkhref
,通过纯HTML链接触发动作/导航的按钮export
, buttons that trigger an exportexport
,触发导出的按钮ajax
, buttons that trigger an ajax request.ajax
,触发ajax请求的按钮。
The configuration options for buttons are, as follows:
按钮的配置选项如下:
type
: required, string, available options arerow
/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 classesclass
:必需,字符串,需要CSS样式类routeSuffix
: optional, string, if given, gets appended to theroutePrefix
paramrouteSuffix
:可选,字符串(如果给定)将附加到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 requestpostEvent
:可选,字符串,在ajax请求完成后发出的事件的名称
(only applies to ajax type of buttons)
(仅适用于ajax类型的按钮)action
: optional, string, available options arerouter
/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 theroutePrefix
paramfullRoute
:可选,字符串(如果给定),独立于routePrefix
参数使用label
: optional, string, should be given only for global buttonslabel
:可选,字符串,仅应为全局按钮提供confirmation
: optional, boolean, flag for showing a confirmation modal before processing the action, such as deletionconfirmation
:可选,布尔值,标志,用于在处理动作(例如删除)之前显示确认模式message
: optional, string, used in conjunction withconfirmation
, when you want to customize the modal's messagemessage
:可选,字符串,当您要自定义模式的消息时,与confirmation
结合使用method
: optional, string, should be given if you haveaction
set asajax
,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 objectparams
:可选,对象,如果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 functionlabel
,必需,字符串,表标题中使用的列名。 如果翻译功能可以翻译
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 queryname
,必需,字符串,该列数据的别名(在选择查询中给出)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 tooltiptooltip
,可选,用于此列标题的工具提示的文本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 templatealign
attributealign
(可选),[[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 propsslot
(可选)为指定列之后的名称呈现一个有范围的插槽,作为propscolumn
(object),column
(对象),row
(array) androw
(数组)和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函数应返回HTMLdate
, 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库实现的,因此您应该查看其文档
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 requestpath
,必需,字符串,表初始化请求的URIfilters
, optional, object, reactive options that, if available, are sent along with the getTableData request andfilters
,可选,对象,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 andparams
,可选的,对象,React性参数(如果可用)与getTableData请求一起发送,并且
are be used to filter results
用于过滤结果intervals
, optional, object, reactive parameters, that, if available are used for interval filtering of the resultsintervals
,可选的,对象,React性参数,如果可用,则用于结果的间隔过滤i18n
, optional, function, that is used for translating labels, headers, and table datai18n
(可选)函数,用于翻译标签,标题和表数据
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 formatfilters
以下格式的React对象"filters": { "table": { "field_1" : '', "field_2" : '', } }
params
- extra parameters sent to the back-end for custom logic / queriesparams
-额外的参数发送到后端进行自定义逻辑/查询"params": { "orders": { dispatched: '' } }
intervals
- wheredbDateFormat
is REQUIRED if the filter values are dates. The given format has to match the database date formatintervals
如果过滤器值为日期,则需要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 boxinput
,使用搜索框时将搜索输入作为有效负载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 tablereload
加载表时,没有有效载荷的reloadreset
, with no payload, when resetting the table preferencesreset
表首选项时,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页面的代码:
live result (if you're not already logged in, use
[email protected]
andpassword
)实时结果 (如果您尚未登录,请使用
[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表添加了一个新按钮:
-
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.
请注意,如果需要,您可以以类似的方式定义几个按钮。
-
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 theprocess
method. The process method will be called for each available chunk of data, and the respective chunk is retrieved via the publicdata
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.
根据您的要求,您可以在此处进行处理,甚至生成将异步处理的作业。
-
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
andDatatable
和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 anaction
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,创建多个动作方法以实现与上述相同的过程,并结合适当的路由,可以完成此操作。
-
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”。
-
Create the new permission Navigate in the app to
system/permissions
and add the newadministration.owners.myAction
permission.创建新权限在应用程序中导航至
system/permissions
然后添加新的administration.owners.myAction
权限。 -
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 configurationphp artisan vendor:publish --tag=vuedatatable-config
组件配置php artisan vendor:publish --tag=tables
- the example table json config and builderphp artisan vendor:publish --tag=tables
示例表json配置和构建器php artisan vendor:publish --tag=vuedatatable-assets
- all the VueJS components and assetsphp 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 notificationsphp artisan vendor:publish --tag=vuedatatable-mail
用于通知的模板php artisan vendor:publish --tag=enso-mail
- a common alias for when wanting to update the templatesphp artisan vendor:publish --tag=enso-mail
想要更新模板时的通用别名
used for notifications
用于通知
翻译自: https://vuejsexamples.com/data-table-package-with-server-side-processing-and-vuejs-components/
千牛包表包下载