arseto/laravel-table-view

Laravel 5 包,用于轻松显示具有内置搜索和排序功能的 Eloquent 集合的表格视图。

v0.1 2018-04-12 03:32 UTC

This package is auto-updated.

Last update: 2024-09-28 05:09:39 UTC


README

Laravel 5 包,用于轻松显示具有内置搜索和排序功能的 Eloquent 集合的表格视图。

这是一个分支,旨在继续原项目的开发 这里.

安装

更新您的 composer.json 文件,将其作为依赖项包含此包。

"arseto/laravel-table-view": "dev-master"

通过将其添加到 config/app.php 文件中的 providers 数组来注册 TableView 服务提供者。

'providers' => array(
    Arseto\LaravelTableView\LaravelTableViewServiceProvider::class
)

如果您想,可以添加到 config/app.php 文件中的 aliases 数组来将 TableView 门面别名化。

'aliases' => array(
        'TableView' => Arseto\LaravelTableView\Facades\TableView::class,
)

配置

通过运行以下命令将供应商文件视图和资源复制到您的项目中

php artisan vendor:publish

这将向 public/vendor/table-view 添加多个样式和一个脚本。插件依赖于 jQuery,v1.9.1 将包含在 public/vendor/table-view 中 - Bootstrap CSS v3.3.2 - Font Awesome v4.3.0 - jQuery v1.9.1

用法

通过传递 \Illuminate\Eloquent\Builder 的实例或简单地传递表格视图模型的类名来初始化表格视图。

	$users = User::select('id', 'name', 'email', 'created_at');

	$usersTableView = TableView::collection( $users )
	// or $usersTableView = TableView::collection( \App\User::class )

向表格视图添加列

	$usersTableView = $usersTableView
		// you can pass in the title for the column, and the Eloquent\Model property name
		->column('Email', 'email')

		// Add a colon after the Eloquent\Model property name along with sort and/or search to enable these options
		->column('Name', 'name:sort,search')

		// Set the default sorting property with 
		->column('Name', 'name:sort*,search')	// Sorted Ascending by default or specify
		->column('Name', 'name:sort*:asc')
		->column('Name', 'name:sort*:desc')

		// Custom column values are created by passing an array with the Eloquent\Model property name as the key
		//  and a closure function
		->column('Joined At', ['created_at:sort*' => function ($user) 
		{
			return $user->created_at->diffForHumans();
		}])



		// OR
		->column(function ($user) 
		{
			return '<img src="' . $user->image_path . '" height="60" width="60">';
		})
		->column('Email', 'email:sort,search')
		->column(function ($user) 
		{
			return '<a class="btn btn-success" href="/users/' . $user->id . '">View</a>';
		});

自定义列值

	$usersTableView = $usersTableView
		// You can pass in an array for the column's row value with the Eloquent\Model property name as the key
		//  and a closure function
		->column('Joined At', ['created_at:sort*' => function ($user) 
		{
			return $user->created_at->diffForHumans();
		}])

		// OR if sorting and searching is unnecessary, simply pass in the Closure instead of the array
		->column('Image', function ($user) 
		{
			return '<img src="' . $user->image_path . '" height="60" width="60">';
		});
}]);

无标题的列

	$usersTableView = $usersTableView
		// Just leave the column title out if you don't want to use it
		->column(function ($user) 
		{
			return '<img src="' . $user->image_path . '" height="60" width="60">';
		});

附加控件 - 您可以向包含自定义控件(如筛选按钮)的片段视图添加附加功能到您的表格中

	$usersTableView = $usersTableView
		// Just pass in the partial view file path of the custom control
		->headerControl('_types_filter_button');

		// access the TableView data collection with $usersTableView->data()

最后,构建 TableView 并将其传递到视图中

	$usersTableView = $usersTableView->build();

	return view('test', [
		'usersTableView' => $usersTableView
	]);

全部使用链式调用

Route::get('/', function(\Illuminate\Http\Request $request) 
{
	$users = User::select('id', 'name', 'email', 'created_at');

	$usersTableView = TableView::collection( $users, 'Administrator' )
		->column(function ($user) 
		{
			return '<img src="' . $user->image_path . '" height="60" width="60">';
		})
		->column('Name', 'name:sort,search')
		->column('Email', 'email:sort,search')
		->column('Joined At', ['created_at:sort*' => function ($user) 
		{
			return $user->created_at->diffForHumans();
		}])
		->column(function ($user) 
		{
			return '<a class="btn btn-success" href="/users/' . $user->id . '">View</a>';
		})
		->headerControl('_types_filter_button')
		->build();

	return view('test', [
		'usersTableView' => $usersTableView
	]);
});

前端

包含 Bootstrap 和 Font Awesome 的样式表 - Bootstrap CSS v3.3.2 和 Font Awesome v4.3.0 已包含在供应商中

<link href="{{ asset('vendor/table-view/bootstrap.min.css') }}" rel="stylesheet" />
<link href="{{ asset('vendor/table-view/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" />
<link href="{{ asset('vendor/table-view/css/themes/tableview-a.css') }}" rel="stylesheet" />

在视图中包含 tablview,引用分配给它的变量名

@include('table-view::container', ['tableView' => $usersTableView])

还包含 tablview 脚本 ** 需要 jQuery 和 v1.9.1 将包含在 public/vendor/table-view 中

<script src="{{ asset('vendor/table-view/js/jquery-1.9.1.min.js') }}"></script>

@include('table-view::scripts')

中间件 Cookie 存储

使用内置中间件轻松将 tableview 的选择选项添加到 Cookie 存储中。

排序选项和每页限制分别添加到永久存储。在任何时候,返回 tableview 的用户将看到这些选项填充了他/她最近会话中选择的相同值。

搜索查询和页码在用户的当前会话期间临时存储。通过这种方式,用户可以访问 http://tableview.com/blog-articles,其中包含 tableview 列表文章。当用户查看特定文章,如 http://tableview.com/blog-articles/laravel-blog/article 时,任何链接回 http://tableview.com/blog-articles 将显示包含最新页码和搜索查询的 tableview。

您需要做的只是

编辑 app/Http/Kernel.php,添加对中间件的引用

    /**
     * The application's route middleware.
     *
     * @var array
     */
    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,

        // Laravel TableView Middleware
        'table-view.storage' => \Arseto\LaravelTableView\Middleware\TableViewCookieStorage::class,
    ];

然后将它添加到包含 tableview 的路由中

    Route::get('/', ['middleware' => 'table-view.storage', function () {

就这样!

它很特别,但只需几行代码,您就有了一个具有强大功能的动态表格视图。请随意自定义 tableview 和元素部分视图。即将推出更多主题和样式。