tartan / laravel-table-view
Laravel 5 包,用于轻松显示具有内置搜索和排序功能的 Eloquent 集合的表格视图。
Requires
- php: >=5.4.0
- illuminate/support: >=5.0.0
Requires (Dev)
- phpspec/phpspec: ~2.0
- phpunit/phpunit: 4.*
This package is auto-updated.
Last update: 2024-09-20 11:10:31 UTC
README
Laravel 5 包,用于轻松显示具有内置搜索和排序功能的 Eloquent 集合的表格视图。
安装
更新您的 composer.json 文件,将其作为依赖项包含此包
composer require "tartan/laravel-table-view"
通过将其添加到 config/app.php 文件中的 providers 数组来注册 TableView 服务提供者。
'providers' => array( Tartan\LaravelTableView\LaravelTableViewServiceProvider::class )
如果您想,可以添加到 config/app.php 文件中的 aliases 数组来别名 TableView 门面。
'aliases' => array( 'TableView' => Tartan\LaravelTableView\Facades\TableView::class, )
配置
通过运行将供应商文件 views 和 assets 复制到您的项目
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 的实例或简单地传递用于 tableview 的模型类的名称来初始化表格视图
$users = User::select('id', 'name', 'email', 'created_at'); $usersTableView = TableView::collection( $users ) // or $usersTableView = TableView::collection( \App\User::class )
向 tableview 添加列
$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' => \Tartan\LaravelTableView\Middleware\TableViewCookieStorage::class, ];
然后将它添加到包含 tableview 的路由中
Route::get('/', ['middleware' => 'table-view.storage', function () {
就是这样!
它很特别,但在几行代码中您就有了一个功能强大的动态表格视图。您可以随意自定义 tableview 和元素局部视图。即将推出更多主题和样式。