tttstudios/alpinejs-table

一个简单的表格组件，具有排序、过滤和分页功能

维护者

详细信息

github.com/StreetYo/alpinejs-table

源代码

安装: 140

依赖者: 0

建议者: 0

安全: 0

星级: 0

关注者: 0

分支: 7

语言：JavaScript

dev-master 2021-11-13 13:15 UTC

Requires

MIT 264df29552efdef72e2b83370bf05d19ecc049db

This package is auto-updated.

Last update: 2024-09-13 19:28:04 UTC

README

Cover.png

Alpinejs Table

Alpinejs Table 是一个Laravel包，可以将简单的表格视图组件注入到任何Laravel项目中。

使用 Laravel、Alpine.js、Moment.js、@bevacqua/rome 和 Tailwind CSS 构建。

主要功能

  • 按单元格值排序行（升序 & 降序）
  • 通过文本匹配或下拉列表过滤数据
  • 通过日期选择器过滤（如果单元格值是日期格式）
  • 可自定义分页、表头标题和单元格值

跳转到



依赖

推荐

  • Laravel 5.7 或更高版本（支持 ServiceProvider::loadViewsFrom() ）
  • PHP 7.1 或更高版本

您可以在旧版本的Laravel中使用此包，但需要额外的安装步骤（如下所示）。


安装

1. 通过composer

composer require tttstudios/alpinejs-table

2. 手动安装

对于Laravel ≥ 5.7

  1. 解压缩代码并将其放在 your-repo/packages/tttstudios/ 文件夹下，看起来像这样
├── your-repo
│   ├── app
│   ├── config
│   ├── composer.json
│   ├── vendor
│   └── packages
│	   └── tttstudios
│		   └── alpinejs-table
  1. 在 your-repo/composer.json 中添加一行
"autoload": {
	"psr-4": {
		"Tttstudios\\AlpinejsTable\\": "packages/tttstudios/alpinejs-table/src/"
	},
}
  1. 然后，在 your-repo/config/app.php 中添加一行
'providers' => [
	Tttstudios\AlpinejsTable\Providers\AlpinejsTableServiceProvider::class
]
  1. 最后，通过运行以下命令刷新composer的autoload文件
composer dump-autoload

对于Laravel < 5.7

  1. 将 alpinejs-table/resources/views 下的所有源文件复制到您自己的repo的 views/alpinejs-table 文件夹中。

  2. 使用Laravel Blade的 @include() 语法在视图文件中使用它们。见下文示例。



基本用法（捆绑）

Alpinejs Table 随附3个 Blade别名

对于Laravel ≥ 5.7

您可以直接使用Alpinejs Table。只需在任何blade视图中将数组传递给AlpineHtml()的 collection 即可。

  1. 将数据格式化为数组
// ExampleController.php:

public function index() {

	$users=\App\User::get()->map(function ($user) {
		return [
			'status' => $user->status,
			'name'   => $user->name,
			'email'  => $user->email,
		];
	})->all();
	
	return view('example', compact('users'));
}
  1. 将数组传递到blade视图中
<!-- in example.blade.php -->

<!--Import styles-->
<style> @AlpinejsTableCss() </style>

<!--Import js scripts-->
<script> @AlpinejsTableBundle() </script>

<!--Import table html-->
@AlpinejsTableHtml(['collection' => $users])

这就是您得到的结果

2020-06-17_16.58.57.gif

对于Laravel < 5.7

先决条件：将 alpinejs-table/resources/views 下的所有文件复制到您自己的repo的 views/alpinejs-table 文件夹中。

# in example.blade.php:

<style> @include('alpinejs-table.css') </style>

<script> @include('alpinejs-table.js-bundle') </script>

@include('alpinejs-table.html', ['collection' => $users])


基本用法（独立）

如果您的应用程序已经导入了 Alpine.js，则不需要导入捆绑的javascript文件。相反，您可以调用 AlpineJsTableCore。示例

# in example.blade.php:

<style> @AlpinejsTableCss() </style>

<!-- Without importing Alpine.js: -->
<script> @AlpinejsTableCore() </script>

@AlpinejsTableHtml(['collection' => $users])

对于Laravel < 5.7

# in example.blade.php:

<style> @include('alpinejs-table.css') </style>

<!-- Without importing Alpine.js: -->
<script> @include('alpinejs-table.js-core') </script>

@include('alpinejs-table.html', ['collection' => $users])


与您的js/css集成

您可以通过以下链接了解 Alpinejs Table 使用 moment.js 解析日期和时间，并使用 Tailwind CSS 组成样式。如果您的应用在全局范围内导入它们，或者您想要将 Alpinejs Table 的源代码集成到应用的打包 js & css 中，请简单按照以下步骤操作（仅限 Laravel ≥5.7）

  1. 通过运行以下命令发布 Alpinejs Table 的资源
php artisan vendor:publish --tag=alpinejs-table
  1. 上述命令会将这些文件复制到您的仓库中
# js:
/resources/js/plugins/rome-modified.js
/resources/js/plugins/alpinejs-table.js

# css:
/resources/sass/plugins/alpinejs-table.scss
  1. 然后您可以将 Alpinejs Table 的核心 js 导入到自己的 app.js 中
// Source File: /resources/js/app.js

import 'alpinejs';

import AlpinejsTablePlugin from './plugins/alpinejs-table.js'

// Make it accessible in global ssope:
window.AlpinejsTablePlugin = AlpinejsTablePlugin;
  1. 并且您可以将 Alpinejs Table 的样式导入到自己的 app.scss 中
/* Source File: /resources/sass/app.scss */

@tailwind base;

@tailwind components;

@import 'plugins/alpinejs-table';

@tailwind utilities;
  1. 最后，您只需单独导入 AlpinejsTableHtml
<!-- in example.blade.php -->

@AlpinejsTableHtml(['collection' => $users, 'options'=>$options])


内置过滤器

6. 文本过滤器

Alpinejs Table 默认为每个列生成一个文本过滤器，这意味着，所有列都可以默认通过文本匹配进行过滤，除非您故意 禁用它。

2020-06-24_13.59.26.gif

7. 下拉过滤器

对于有限的数据类型，您可能需要一个下拉过滤器。例如：状态可能只有 2 个有效的值：活动 或 待定。在这种情况下，您可以将其设置为下拉过滤器。

示例

  1. 将数据格式化为数组
// ExampleController.php:

public function index() {

	$users=\App\User::get()->map(function ($user) {
		return [
			'status' => $user->status,
			'name'   => $user->name,
			'email'  => $user->email,
		];
	})->all();
	
	$options=[
		 'dropdowns' => ['status'],
	];

	return view('example', compact('users', 'options'));
}
  1. 将数组传递到blade视图中
<!-- in example.blade.php -->

<style> @AlpinejsTableCss() </style>

<script> @AlpinejsTableBundle() </script>

@AlpinejsTableHtml(['collection' => $users, 'options' => $options])

这就是您会得到的结果

Untitled.png

8. 日期过滤器

如果某些列是日期格式，您可能需要定义 dates 在选项中。

示例

// ExampleController.php:

public function index() {

	$users=\App\User::get()->map(function ($user) {
		return [
			'status' => $user->status, // "Active" or "Pending"
			'name'   => $user->name,
			// must be in ISO 8601 format, e.g.: 2020-05-27T18:26:58+00:00
			'birthday'  => $user->birthday->toIso8601String()
		];
	})->all();
	
	$options=[
		'dropdowns' => ['status'],
		'dates' => ['birthday'],
	];

	return view('example', compact('users', 'options'));
}

瞧！生日列自动变成了日期选择器。感谢 @bevacqua/rome 提供这个出色的日期选择器插件。

2020-06-16_18.37.29.gif

您甚至可以设置自己的日期格式

$options=[
	'dates' => ['birthday'],
	'dateFormat' => 'YYYY/M/D',
  ];

2020-06-17_15.25.34.gif


自定义

1. 自定义单元格宽度

Alpinejs Table 默认为每个列设置单元格宽度为 200px。您可以通过传递一个 JavaScript 闭包给 cellWidth(key) 来自定义每个单元格的宽度

示例

$options=[
		// make sure the syntax is for Javascript:

		'cellWidth(key)'=>' 

		if(key=="status")
			return `120px`;

		if(key=="email")
			return `400px`;

		return `200px`;
	',
];

刷新页面，您可以看到新的布局

Untitled%201.png

2. 自定义分页

Alpinejs Table 默认每页显示 10 个条目。您可以通过在 options 中设置 perPage 来轻松覆盖它

示例

$options=[
	'perPage' => 24
];

您还可以设置选项以允许访客在动态更改 perPage

$options=[
	'perPageOptions' => [24, 48, 96]
];

然后您可以在表格的右下角看到设置的设置生效

2020-06-16_18.54.55.gif


3. 自定义表头标题

默认情况下，Alpinejs Table 将 key 转换为大写并显示在表头中。例如：user_email 将被转换为 User Email。

如果您需要自定义标题，可以使用 titleRenderer(key)

示例

// ExampleController.php:
		
	$options=[
		'titleRenderer(key)'=>'
			if(key=="id")
				return `User ID`;

			// by default: return nothing
		'
	];

结果

Untitled%202.png


4. 自定义单元格内容

有时您需要显示某些单元格的转换后的内容。例如，您可能希望为具有“待定”状态的用户显示红色字体颜色，甚至为不同的单元格添加不同的操作按钮。

这就是 cellRenderer(key,cell,row) 的魔力

示例

// ExampleController.php:

public function index() {

	$users=\App\User::get()->map(function ($user) {
		return [
			'id'	 => $user->id,
			'status' => $user->status,
			'name'   => $user->name,
			'email'  => $user->email,
		];
	 })->all();
	
		
	$options=[
		'cellRenderer(key,cell,row)'=>'

			if(key == "status" && cell.value == "Pending")
				return `<span style="color:red">` + cell.value + `</span>`;

			if(key == "name")
			{
				const isPending = row.status.value == "Pending";
				return cell.value 
						+ `<a class="`+(isPending ? "btn-dark" : "btn-green") + ` float-right" href="/users/` + row.id.value + `">`
								+ (isPending ? "Approve" : "Details")
						+`</a> `;
			}

			return cell.value; // default
		'
	];

	return view('example', compact('users', 'options'));
}

结果

Untitled%203.png


其他选项

1. 不显示

该列将不会显示，但它的值仍然可以通过闭包中的 row 访问。

示例

// ExampleController.php:
		
	$options=[
		'notVisible' => ['id']
		'cellRenderer(key,cell,row)'=>'
			if(key=="name")
				return `<b style="color:blue">ID #`
						+ row.id.value 
						+ "</b>: "
						+ cell.value;
			return cell.value;
		'
	];

结果

Untitled%204.png

2. 不能排序

该列不能排序，但它的值仍然可以通过闭包中的 row 访问。

示例

// ExampleController.php:
		
	$options=[
		'notSortable' => ['email']
	];

结果

Pasted_Image_2020-06-17__4_25_PM.png

不能过滤

该列不能通过文本或下拉菜单进行过滤，但它的值仍然可以通过闭包中的 row 访问。

示例

// ExampleController.php:
		
	$options=[
		'notFilterable' => ['email']
	];

结果

Pasted_Image_2020-06-17__4_29_PM.png


附录

选项参数



注意

Alpinejs Table 将所有数据加载到单个 JavaScript 实例中。如果数据太多，性能可能会受到影响。


许可

Alpinejs Table 是开源软件，许可协议为 MIT 许可证。


贡献者

@haoluo-ttt

@fpena



由 TTT Studios 提供 VIP 支持

Alpinjs 表格由 TTT 工作室的网络开发团队推出。我们是一家位于加拿大大温哥华的数字创新工作室，提供完全自主研发的定制软件和解决方案。我们使用的包括 AR & VR、物联网、人工智能、安全与加密和云计算等技术。

ttt-logo.png