摘要:我們知道,做后臺(tái)管理系統(tǒng)需要很多表格用來展示我們的數(shù)據(jù),筆者在項(xiàng)目中使用過,對(duì)于快速開發(fā)來說,將是一個(gè)不錯(cuò)的選擇。
我們知道,做后臺(tái)管理系統(tǒng)需要很多表格用來展示我們的數(shù)據(jù),筆者在tp項(xiàng)目中使用過datatables,對(duì)于快速開發(fā)來說,datatables將是一個(gè)不錯(cuò)的選擇。
首先來看一下最終的效果:
準(zhǔn)備工作:
1、首先,確保你的laravel配置正確(站點(diǎn)能夠正常訪問、數(shù)據(jù)庫連接正常...)
2、下載Datatables資源文件(AdminLTE中包含了Datatables資源文件,讀者使用其他模板需另行引入的請(qǐng)自行百度),并在頁面中引入,確保資源文件能夠正確加載。
3、文檔:Laravel Datatables開發(fā)文檔
系統(tǒng)要求:
Laravel 5.5+
jQuery DataTables v1.10.x
ok,開始動(dòng)手!(以administrator頁面為例)
1、安裝composer包
composer require yajra/laravel-datatables-oracle:^8.0
如果你需要使用datatables的全部插件可使用以下命令安裝
composer require yajra/laravel-datatables:^1.0
2、配置Datatables(此步驟可省,但還是配置下,確保后續(xù)不會(huì)出錯(cuò))
安裝完成之后,打開config/app.php,鍵入如下代碼
"providers" => [ // ... YajraDataTablesDataTablesServiceProvider::class, ],
使用命令發(fā)布配置和資源文件
php artisan vendor:publish --tag=datatables
3、創(chuàng)建administrator模型
php artisan make:model Models/Administrator -m
編輯數(shù)據(jù)庫遷移文件
engine = "InnoDB"; $table->increments("id"); $table->string("login_name")->unique(); $table->string("display_name"); $table->string("password"); $table->string("avatar")->nullable(); $table->rememberToken(); $table->tinyInteger("status")->default(1); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists("administrators"); } }
4、創(chuàng)建AdministratorDatatable
php artisan datatables:make Administrator
此命令會(huì)生成DataTables/AdministratorDatatable.php,打開并編輯:
setRowClass("text-center") ->editColumn("avatar", function (Administrator $administrator) { return "avatar."">"; }) ->editColumn("roles", function (Administrator $administrator) { return $administrator->roles->map(function ($role) { return "".$role->identifier."[".$role->name."]".""; })->implode(""); }) ->editColumn("status", function (Administrator $administrator) { if ($administrator->status == 1) { return "正常"; } return "禁用"; }) ->rawColumns(["avatar", "status", "roles", "action"]) ->addColumn("action", function (Administrator $administrator) { $edit_path = admin_base_path("auth/administrators/".$administrator->id."/edit"); $delete_path = admin_base_path("auth/administrators/".$administrator->id); return "". " 編輯". "". " 刪除"; }); } /** * Get query source of dataTable. * * @param AppModelsAdministrator $model * @return IlluminateDatabaseEloquentBuilder */ public function query(Administrator $model) { return $model->newQuery()->select("id", "login_name", "display_name", "avatar", "status", "created_at", "updated_at"); } /** * Optional method if you want to use html builder. * * @return YajraDataTablesHtmlBuilder */ public function html() { return $this->builder() ->addTableClass("table-bordered table-striped") ->columns($this->getColumns()) ->minifiedAjax("administrators") ->addAction(["title" => "操作", "class" => "text-center"]) ->parameters([ "dom" => "Bfrtip", "buttons" => [ ["extend" => "create", "text" => " 創(chuàng)建"], ["extend" => "excel", "text" => " 導(dǎo)出"], ["extend" => "print", "text" => " 打印"], ["extend" => "reload", "text" => " 刷新"], ], ]); } /** * 獲取數(shù)據(jù)列 * * @return array */ protected function getColumns() { return [ ["name" => "id", "data" => "id", "title" => "ID", "class" => "text-center"], ["name" => "login_name", "data" => "login_name", "title" => "登錄名", "class" => "text-center", "orderable" => false], ["name" => "display_name", "data" => "display_name", "title" => "顯示名", "class" => "text-center", "orderable" => false], ["name" => "avatar", "data" => "avatar", "title" => "頭像", "class" => "text-center", "orderable" => false], ["name" => "status", "data" => "status", "title" => "狀態(tài)", "class" => "text-center"], ["name" => "roles", "data" => "roles", "title" => "角色", "class" => "text-center", "orderable" => false], ["name" => "created_at", "data" => "created_at", "title" => "創(chuàng)建時(shí)間", "class" => "text-center"], ["name" => "updated_at", "data" => "updated_at", "title" => "更新時(shí)間", "class" => "text-center"], ]; } /** * 設(shè)置導(dǎo)出文件名 * * @return string */ protected function filename() { return "Administrator_" . date("YmdHis"); } /** * 打印列 * @var array */ protected $printColumns = ["id", "login_name", "display_name", "created_at", "updated_at"]; }
5、創(chuàng)建視圖文件resource/views/admin/auth/administrator/index.blade.php(視圖文件使用布局,讀者可參考之前的文章或參考源碼)
@extends("admin::layouts.layout") @section("content")管理員 列表
{!! $dataTable->scripts() !!} @endsection
創(chuàng)建視圖文件resource/views/admin/auth/administrator/create.blade.php
@extends("admin::layouts.layout") @section("content")管理員 創(chuàng)建
@endsection
創(chuàng)建視圖文件resource/views/admin/auth/administrator/edit.blade.php
@extends("admin::layouts.layout") @section("content")管理員 編輯
@endsection
6、創(chuàng)建administrator控制器
php artisan make:controller Admin/Auth/AdministratorController --resource
打開Admin/Auth/AdministratorController.php并編輯
render(admin_view_path("auth.administrator.index")); } /** * Show the form for creating a new resource. * * @return IlluminateHttpResponse */ public function create() { $roles = Role::all(); return view(admin_view_path("auth.administrator.create"))->with([ "roleList" => $roles, ]); } /** * * @param Request $request * @return IlluminateHttpRedirectResponse|IlluminateRoutingRedirector * @throws Exception */ public function store(Request $request) { $this->validate($request, [ "login_name" => "required|unique:administrators", "display_name" => "required", "roles" => "required", "password" => "required|min:6|confirmed", "password_confirmation" => "required|min:6", ],[ "login_name.required" => "請(qǐng)輸入登錄名", "login_name.unique" => "該登錄名已存在", "display_name.required" => "請(qǐng)輸入顯示名", "roles.required" => "請(qǐng)選擇一個(gè)或多個(gè)角色", "password.required" => "請(qǐng)輸入密碼", "password.min" => "密碼至少6位", "password.confirmed" => "兩次輸入密碼不一致", "password_confirmation.required" => "請(qǐng)輸入確認(rèn)密碼", "password_confirmation.min" => "密碼至少6位", ]); $administrator = new Administrator(); $administrator->login_name = $request->get("login_name"); $administrator->display_name = $request->get("display_name"); $administrator->password = Hash::make($request->get("password")); $roles = $request->get("roles"); DB::beginTransaction(); try { if (!$administrator->save()) { throw new Exception("保存失敗"); } if (!$administrator->updateRelation($roles)) { throw new Exception("保存失敗"); } DB::commit(); admin_toastr("角色更新成功!"); return redirect(admin_base_path("auth/administrator")); } catch (Exception $e) { $error = $e->getMessage(); DB::rollBack(); admin_toastr($error, "error"); return redirect()->back()->withInput()->withErrors([ "error" => $error ]); } } /** * Display the specified resource. * * @param int $id * @return IlluminateHttpResponse */ public function show($id) { } /** * Show the form for editing the specified resource. * * @param int $id * @return IlluminateHttpResponse */ public function edit($id) { $administrator = Administrator::find($id); $roles = Role::all(); return view(admin_base_path("auth.administrator.edit"))->with([ "roleList" => $roles, "administrator" => $administrator ]); } /** * @param Request $request * @param $id * @return IlluminateHttpRedirectResponse|IlluminateRoutingRedirector * @throws Exception */ public function update(Request $request, $id) { $this->validate($request, [ "login_name" => "required|unique:administrators", "display_name" => "required", "roles" => "required", ],[ "login_name.required" => "請(qǐng)輸入登錄名", "login_name.unique" => "該登錄名已存在", "display_name.required" => "請(qǐng)輸入顯示名", "roles.required" => "請(qǐng)選擇一個(gè)或多個(gè)角色", ]); $administrator = Administrator::find($id); $administrator->login_name = $request->get("login_name"); $administrator->display_name = $request->get("display_name"); $roles = $request->get("roles"); DB::beginTransaction(); try { if (!$administrator->save()) { throw new Exception("保存失敗"); } if (!$administrator->updateRelation($roles)) { throw new Exception("保存失敗"); } DB::commit(); admin_toastr("角色更新成功!"); return redirect(admin_base_path("auth/administrator")); } catch (Exception $e) { $error = $e->getMessage(); DB::rollBack(); admin_toastr($error, "error"); return redirect()->back()->withInput()->withErrors([ "error" => $error ]); } } /** * Remove the specified resource from storage. * * @param int $id * @return IlluminateHttpResponse */ public function destroy($id) { if (Administrator::find($id)->delete()) { return response()->json([ "status" => true, "message" => "刪除成功!", ]); } else { return response()->json([ "status" => false, "message" => "刪除失敗,請(qǐng)重試!", ]); } } }
別忘了配置路由:
config("admin.route.prefix"), "namespace" => config("admin.route.namespace"), "middleware" => config("admin.route.middleware"), ], function (Router $router) { //后臺(tái)控制面板 $router->get("/", "HomeHomeController@index")->name("home.index"); //登錄頁面 $router->get("login", "AuthLoginController@getLogin")->name("login.getLogin"); //登錄 $router->post("login", "AuthLoginController@postLogin")->name("login.postLogin"); //注銷登錄 $router->post("logout", "AuthLoginController@postLogout")->name("login.logout"); /** * auth模塊 */ //后臺(tái)用戶管理 $router->resource("auth/administrators", "AuthAdministratorController"); //權(quán)限管理 $router->resource("auth/permissions", "AuthPermissionController"); //權(quán)限策略管理 $router->resource("auth/policies", "AuthPolicyController"); //角色管理 $router->resource("auth/roles", "AuthRoleController"); //菜單管理 $router->resource("auth/menus", "AuthMenuController"); /** * blog模塊 */ //文章管理 $router->resource("blog/articles", "BlogArticleController"); });
7、本地化:創(chuàng)建一個(gè)多帶帶文件,如datatable-language.js并在頁面中引入
$.fn.dataTable.defaults.oLanguage = { "sProcessing": "處理中...", "sLengthMenu": "顯示 _MENU_ 項(xiàng)結(jié)果", "sZeroRecords": "沒有匹配結(jié)果", "sInfo": "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果,共 _TOTAL_ 項(xiàng)", "sInfoEmpty": "顯示第 0 至 0 項(xiàng)結(jié)果,共 0 項(xiàng)", "sInfoFiltered": "(由 _MAX_ 項(xiàng)結(jié)果過濾)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中數(shù)據(jù)為空", "sLoadingRecords": "載入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首頁", "sPrevious": "上頁", "sNext": "下頁", "sLast": "末頁" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }; $.fn.dataTable.defaults.autoWidth = false;
寫在最后:表格中一些按鈕事件請(qǐng)讀者根據(jù)需要自行編碼,這里只給出一個(gè)例子:刪除按鈕事件(引入了sweetalert插件以及toastr插件,如有需要請(qǐng)參考源碼)
//datatables刪除按鈕 $("#pjax-container").on("click", ".row-delete", function () { var del_url = $(this).data("url"); swal({ title: "確定刪除此項(xiàng)?", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "確 定", closeOnConfirm: false, cancelButtonText: "取 消" }, function(){ $.ajax({ method: "post", url: del_url, data: { _method:"delete", _token:csrf_token, }, success: function (data) { if (typeof data === "object") { if (data.status) { swal(data.message, "", "success"); $.pjax.reload("#pjax-container"); } else { swal(data.message, "", "error"); } } } }); }); });
ok,大功告成,enjoy it !
下載:項(xiàng)目源碼
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/113388.html
摘要:我們知道,做后臺(tái)管理系統(tǒng)需要很多表格用來展示我們的數(shù)據(jù),筆者在項(xiàng)目中使用過,對(duì)于快速開發(fā)來說,將是一個(gè)不錯(cuò)的選擇。 我們知道,做后臺(tái)管理系統(tǒng)需要很多表格用來展示我們的數(shù)據(jù),筆者在tp項(xiàng)目中使用過datatables,對(duì)于快速開發(fā)來說,datatables將是一個(gè)不錯(cuò)的選擇。首先來看一下最終的效果:showImg(https://segmentfault.com/img/bVbbpf0?...
摘要:我們知道,做后臺(tái)管理系統(tǒng)需要很多表格用來展示我們的數(shù)據(jù),筆者在項(xiàng)目中使用過,對(duì)于快速開發(fā)來說,將是一個(gè)不錯(cuò)的選擇。 我們知道,做后臺(tái)管理系統(tǒng)需要很多表格用來展示我們的數(shù)據(jù),筆者在tp項(xiàng)目中使用過datatables,對(duì)于快速開發(fā)來說,datatables將是一個(gè)不錯(cuò)的選擇。首先來看一下最終的效果:showImg(https://segmentfault.com/img/bVbbpf0?...
摘要:我們知道,做后臺(tái)管理系統(tǒng)需要很多表格用來展示我們的數(shù)據(jù),筆者在項(xiàng)目中使用過,對(duì)于快速開發(fā)來說,將是一個(gè)不錯(cuò)的選擇。 我們知道,做后臺(tái)管理系統(tǒng)需要很多表格用來展示我們的數(shù)據(jù),筆者在tp項(xiàng)目中使用過datatables,對(duì)于快速開發(fā)來說,datatables將是一個(gè)不錯(cuò)的選擇。首先來看一下最終的效果:showImg(https://segmentfault.com/img/bVbbpf0?...
摘要:繼第一篇文章發(fā)布之后框架學(xué)習(xí)之路一前后臺(tái)用戶認(rèn)證分離,忙著項(xiàng)目上的事情,一直沒有時(shí)間寫文章。進(jìn)入到新公司后,忙里偷閑,繼續(xù)我的框架學(xué)習(xí)之路。附件筆者的布局全局文件整頁刷新時(shí),菜單顯示刪除按鈕確定刪除此項(xiàng)確定取消 繼第一篇文章發(fā)布之后laravel框架學(xué)習(xí)之路(一)前后臺(tái)用戶認(rèn)證分離,忙著項(xiàng)目上的事情,一直沒有時(shí)間寫文章。進(jìn)入到新公司后,忙里偷閑,繼續(xù)我的laravel框架學(xué)習(xí)之路。如需...
摘要:繼第一篇文章發(fā)布之后框架學(xué)習(xí)之路一前后臺(tái)用戶認(rèn)證分離,忙著項(xiàng)目上的事情,一直沒有時(shí)間寫文章。進(jìn)入到新公司后,忙里偷閑,繼續(xù)我的框架學(xué)習(xí)之路。附件筆者的布局全局文件整頁刷新時(shí),菜單顯示刪除按鈕確定刪除此項(xiàng)確定取消 繼第一篇文章發(fā)布之后laravel框架學(xué)習(xí)之路(一)前后臺(tái)用戶認(rèn)證分離,忙著項(xiàng)目上的事情,一直沒有時(shí)間寫文章。進(jìn)入到新公司后,忙里偷閑,繼續(xù)我的laravel框架學(xué)習(xí)之路。如需...
閱讀 1381·2023-04-25 16:45
閱讀 1923·2021-11-17 09:33
閱讀 2312·2021-09-27 14:04
閱讀 918·2019-08-30 15:44
閱讀 2636·2019-08-30 14:24
閱讀 3417·2019-08-30 13:59
閱讀 1695·2019-08-29 17:00
閱讀 894·2019-08-29 15:33