Fastadmin前台表格操作系列一
前台使用bootstrap-table表格及其表格操作
目录
前言
一、bootstrap-table是什么？
二、在Fastadmin中的使用步骤
1.引入库（Js）
其他的就跟后台的js一样了表格初始化啊之类的随便后台生成的复制过来就行。我就放个完整简化版的给做参考：这里我就只需要做展示哦，就用了index，其他的增删改都删掉了没啥作用。
当然前端的页面也要加一下：
2.获取数据（后端）
控制器：要注意index方法，这其中有一些方法需要去后台复制粘贴出来之际改造
模型：把生成的文件copy一份，但是要记得改一下
修改Frontend：我就加了selectpage()，然后根据报错一点一点把这些都删了【$adminIds】
总结
前言
在fastadmin的使用过程中，我们发现后台部分的表格其实还是蛮实用的，有时候就想把它移植到前台（比如在”我的订单“模块中，就可以以订单列表的方式出现），并且做到功能不会缺失。
效果：
一、bootstrap-table是什么？
Bootstrap-table是一个基于 Bootstrap 前端框架的 JavaScript 插件，用于在网页上显示动态表格数据。它不仅支持表格数据的渲染和美观样式，还提供了强大的数据处理功能，如分页、排序、搜索、导出和列的自定义显示等。这个插件非常适合需要在网页中展示大量数据的应用场景，如管理后台、数据报表等。
二、在Fastadmin中的使用步骤
在fastadmin的后台中我们就能看到他的表格使用到的是bootstrap-table，我们只需要把后台的js啥的拿到前台使用即可。（挺好看的我觉得，主要是样式还有好几套可以替换，fast团队二开做到不错）
1.引入库（Js）
代码如下（示例）：我是拿user.js来改的，之前见过一个开发者直接生成把后台js拿到前台来用，一般我是不喜欢后台就归后台。
这是前台user.js（fastadmin自带的我没动）：
我自己创建的order.js：
能看错我就多加了一个table这个js，然后就是把frontend放到form后面，其他就是都一样就加了个table
define(['jquery', 'bootstrap', 'table', 'form', 'frontend', 'template'], function ($, undefined, Table, Form, Frontend, Template) {其他的就跟后台的js一样了表格初始化啊之类的随便后台生成的复制过来就行。我就放个完整简化版的给做参考：这里我就只需要做展示哦，就用了index，其他的增删改都删掉了没啥作用。
define(['jquery', 'bootstrap', 'table', 'form', 'frontend', 'template'], function ($, undefined, Table, Form, Frontend, Template) { var Controller = { //我的订单 index: function () { // 初始化表格参数配置 Table.api.init({ extend: { index_url: 'order/index' + location.search, table: 'order', } }); var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, pk: 'id', sortName: 'id', fixedColumns: true, fixedRightNumber: 1, showColumns: false, showToggle: false, showExport: false, commonSearch: false, columns: [ [ { field: 'order_sn', title: __('Order_sn'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content }, { field: 'price', title: __('Price'), operate: 'BETWEEN' }, ] ] }); // 为表格绑定事件 Table.api.bindevent(table); }, api: { bindevent: function () { Form.api.bindevent($("form[role=form]")); } } }; return Controller;});当然前端的页面也要加一下：
<div id="content-container" class="container"> <div class="row"> <div class="col-md-3"> {include file="common/sidenav" /} </div> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-body"> <h2 class="page-header">{:__('My Orders')}</h2> <div class="panel-body"> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade active in" id="one"> <div class="widget-body no-padding"> <div id="toolbar" class="toolbar"> <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a> </div> <table id="table" class="table table-striped table-bordered table-hover table-nowrap" data-operate-edit="order/edit" data-operate-del="order/del" width="100%"> </table> </div> </div> </div> </div> </div> </div> </div> </div></div>2.获取数据（后端）
控制器：要注意index方法，这其中有一些方法需要去后台复制粘贴出来之际改造
控制器代码，我们只需要用到index方法
需要引入的
namespace app\index\controller;use addons\wechat\model\WechatCaptcha;use app\common\controller\Frontend;use app\common\library\Ems;use app\common\library\Sms;use app\common\model\Attachment;use think\Config;use think\Cookie;use think\Hook;use think\Session;use think\Validate;/** * 我的订单 */class Order extends Frontend{ protected $layout = 'default'; protected $noNeedLogin = ['login', 'register', 'third']; protected $noNeedRight = ['*']; //快速搜索用名称 protected $searchFields = 'topics'; /** * 数据限制字段 */ protected $dataLimitField = 'user_id'; public function _initialize() { parent::_initialize(); $auth = $this->auth; if (!Config::get('fastadmin.usercenter')) { $this->error(__('User center already closed'), '/'); } $this->model = new \app\index\model\Order; $this->view->assign("paystatusList", $this->model->getPaystatusList()); $this->view->assign("statusList", $this->model->getStatusList()); //监听注册登录退出的事件 Hook::add('user_login_successed', function ($user) use ($auth) { $expire = input('post.keeplogin') ? 30 * 86400 : 0; Cookie::set('uid', $user->id, $expire); Cookie::set('token', $auth->getToken(), $expire); }); Hook::add('user_register_successed', function ($user) use ($auth) { Cookie::set('uid', $user->id); Cookie::set('token', $auth->getToken()); }); Hook::add('user_delete_successed', function ($user) use ($auth) { Cookie::delete('uid'); Cookie::delete('token'); }); Hook::add('user_logout_successed', function ($user) use ($auth) { Cookie::delete('uid'); Cookie::delete('token'); }); } /** * 查看 * * @return string|Json * @throws \think\Exception * @throws DbException */ public function index() { //设置过滤方法 $this->request->filter(['strip_tags', 'trim']); if (false === $this->request->isAjax()) { $this->view->assign('title', __('My Orders')); return $this->view->fetch(); } //如果发送的来源是 Selectpage，则转发到 Selectpage if ($this->request->request('keyField')) { return $this->selectpage(); } [$where, $sort, $order, $offset, $limit] = $this->buildparams(); $list = $this->model ->where($where) ->order($sort, $order) ->paginate($limit); $result = ['total' => $list->total(), 'rows' => $list->items()]; return json($result); } /** * 前台提交过来,需要排除的字段数据 */ protected $excludeFields = ""; /** * 是否开启Validate验证 */ protected $modelValidate = false; /** * 排除前台提交过来的字段 * @param $params * @return array */ protected function preExcludeFields($params) { if (is_array($this->excludeFields)) { foreach ($this->excludeFields as $field) { if (array_key_exists($field, $params)) { unset($params[$field]); } } } else if (array_key_exists($this->excludeFields, $params)) { unset($params[$this->excludeFields]); } return $params; } }模型：把生成的文件copy一份，但是要记得改一下
<?phpnamespace app\index\model;use think\Model;class Order extends Model{ // 表名 protected $name = 'order'; // 自动写入时间戳字段 protected $autoWriteTimestamp = 'integer'; // 定义时间戳字段名 protected $createTime = 'createtime'; protected $updateTime = false; protected $deleteTime = false; protected $searchFields = 'topics'; // 追加属性 protected $append = [ 'paystatus_text', 'status_text' ]; public function getPaystatusList() { return ['0' => __('Paystatus 0'), '1' => __('Paystatus 1'), '2' => __('Paystatus 2'), '3' => __('Paystatus 3')]; } public function getStatusList() { return ['0' => __('Status 0'), '1' => __('Status 1'), '2' => __('Status 2'), '3' => __('Status 3')]; } public function getPaystatusTextAttr($value, $data) { $value = $value ? $value : (isset($data['paystatus']) ? $data['paystatus'] : ''); $list = $this->getPaystatusList(); return isset($list[$value]) ? $list[$value] : ''; } public function getStatusTextAttr($value, $data) { $value = $value ? $value : (isset($data['status']) ? $data['status'] : ''); $list = $this->getStatusList(); return isset($list[$value]) ? $list[$value] : ''; }}做到这里我们可以尝试访问一下，但是其实还是不行的还会有一些报错。
这个时候我们就需要找到错误的，缺少了一些函数
修改Frontend：我就加了selectpage()，然后根据报错一点一点把这些都删了【$adminIds】
<?phpnamespace app\common\controller;use app\common\library\Auth;use think\Config;use think\Controller;use think\Hook;use think\Lang;use think\Loader;use think\Validate;/** * 前台控制器基类 */class Frontend extends Controller{ /** * 布局模板 * @var string */ protected $layout = ''; /** * 无需登录的方法,同时也就不需要鉴权了 * @var array */ protected $noNeedLogin = []; /** * 无需鉴权的方法,但需要登录 * @var array */ protected $noNeedRight = []; /** * 权限Auth * @var Auth */ protected $auth = null; public function _initialize() { //移除HTML标签 $this->request->filter('trim,strip_tags,htmlspecialchars'); $modulename = $this->request->module(); $controllername = Loader::parseName($this->request->controller()); $actionname = strtolower($this->request->action()); // 检测IP是否允许 check_ip_allowed(); // 如果有使用模板布局 if ($this->layout) { $this->view->engine->layout('layout/' . $this->layout); } $this->auth = Auth::instance(); // token $token = $this->request->server('HTTP_TOKEN', $this->request->request('token', \think\Cookie::get('token'))); $path = str_replace('.', '/', $controllername) . '/' . $actionname; // 设置当前请求的URI $this->auth->setRequestUri($path); // 检测是否需要验证登录 if (!$this->auth->match($this->noNeedLogin)) { //初始化 $this->auth->init($token); //检测是否登录 if (!$this->auth->isLogin()) { $this->error(__('Please login first'), 'index/user/login'); } // 判断是否需要验证权限 if (!$this->auth->match($this->noNeedRight)) { // 判断控制器和方法判断是否有对应权限 if (!$this->auth->check($path)) { $this->error(__('You have no permission')); } } } else { // 如果有传递token才验证是否登录状态 if ($token) { $this->auth->init($token); } } $this->view->assign('user', $this->auth->getUser()); // 语言检测 $lang = $this->request->langset(); $lang = preg_match("/^([a-zA-Z\-_]{2,10})\$/i", $lang) ? $lang : 'zh-cn'; $site = Config::get("site"); $upload = \app\common\model\Config::upload(); // 上传信息配置后 Hook::listen("upload_config_init", $upload); // 配置信息 $config = [ 'site' => array_intersect_key($site, array_flip(['name', 'cdnurl', 'version', 'timezone', 'languages'])), 'upload' => $upload, 'modulename' => $modulename, 'controllername' => $controllername, 'actionname' => $actionname, 'jsname' => 'frontend/' . str_replace('.', '/', $controllername), 'moduleurl' => rtrim(url("/{$modulename}", '', false), '/'), 'language' => $lang ]; $config = array_merge($config, Config::get("view_replace_str")); Config::set('upload', array_merge(Config::get('upload'), $upload)); // 配置信息后 Hook::listen("config_init", $config); // 加载当前控制器语言包 $this->loadlang($controllername); $this->assign('site', $site); $this->assign('config', $config); } /** * 加载语言文件 * @param string $name */ protected function loadlang($name) { $name = Loader::parseName($name); $name = preg_match("/^([a-zA-Z0-9_\.\/]+)\$/i", $name) ? $name : 'index'; $lang = $this->request->langset(); $lang = preg_match("/^([a-zA-Z\-_]{2,10})\$/i", $lang) ? $lang : 'zh-cn'; Lang::load(APP_PATH . $this->request->module() . '/lang/' . $lang . '/' . str_replace('.', '/', $name) . '.php'); } /** * 渲染配置信息 * @param mixed $name 键名或数组 * @param mixed $value 值 */ protected function assignconfig($name, $value = '') { $this->view->config = array_merge($this->view->config ? $this->view->config : [], is_array($name) ? $name : [$name => $value]); } /** * 刷新Token */ protected function token() { $token = $this->request->param('__token__'); //验证Token if (!Validate::make()->check(['__token__' => $token], ['__token__' => 'require|token'])) { $this->error(__('Token verification error'), '', ['__token__' => $this->request->token()]); } //刷新Token $this->request->token(); } /** * 快速搜索时执行查找的字段 */ protected $searchFields = 'id'; /** * 是否是关联查询 */ protected $relationSearch = false; /** * 是否开启数据限制 * 支持auth/personal * 表示按权限判断/仅限个人 * 默认为禁用,若启用请务必保证表中存在admin_id字段 */ protected $dataLimit = false; /** * Selectpage可显示的字段 */ protected $selectpageFields = '*'; /** * Selectpage的实现方法 * * 当前方法只是一个比较通用的搜索匹配,请按需重载此方法来编写自己的搜索逻辑,$where按自己的需求写即可 * 这里示例了所有的参数，所以比较复杂，实现上自己实现只需简单的几行即可 * */ protected function selectpage() { //设置过滤方法 $this->request->filter(['trim', 'strip_tags', 'htmlspecialchars']); //搜索关键词,客户端输入以空格分开,这里接收为数组 $word = (array)$this->request->request("q_word/a"); //当前页 $page = $this->request->request("pageNumber"); //分页大小 $pagesize = $this->request->request("pageSize"); //搜索条件 $andor = $this->request->request("andOr", "and", "strtoupper"); //排序方式 $orderby = (array)$this->request->request("orderBy/a"); //显示的字段 $field = $this->request->request("showField"); //主键 $primarykey = $this->request->request("keyField"); //主键值 $primaryvalue = $this->request->request("keyValue"); //搜索字段 $searchfield = (array)$this->request->request("searchField/a"); //自定义搜索条件 $custom = (array)$this->request->request("custom/a"); //是否返回树形结构 $istree = $this->request->request("isTree", 0); $ishtml = $this->request->request("isHtml", 0); if ($istree) { $word = []; $pagesize = 999999; } $order = []; foreach ($orderby as $k => $v) { $order[$v[0]] = $v[1]; } $field = $field ? $field : 'name'; //如果有primaryvalue,说明当前是初始化传值 if ($primaryvalue !== null) { $where = [$primarykey => ['in', $primaryvalue]]; $pagesize = 999999; } else { $where = function ($query) use ($word, $andor, $field, $searchfield, $custom) { $logic = $andor == 'AND' ? '&' : '|'; $searchfield = is_array($searchfield) ? implode($logic, $searchfield) : $searchfield; $searchfield = str_replace(',', $logic, $searchfield); $word = array_filter(array_unique($word)); if (count($word) == 1) { $query->where($searchfield, "like", "%" . reset($word) . "%"); } else { $query->where(function ($query) use ($word, $searchfield) { foreach ($word as $index => $item) { $query->whereOr(function ($query) use ($item, $searchfield) { $query->where($searchfield, "like", "%{$item}%"); }); } }); } if ($custom && is_array($custom)) { foreach ($custom as $k => $v) { if (is_array($v) && 2 == count($v)) { $query->where($k, trim($v[0]), $v[1]); } else { $query->where($k, '=', $v); } } } }; } // $adminIds = $this->getDataLimitAdminIds(); // if (is_array($adminIds)) { // $this->model->where($this->dataLimitField, 'in', $adminIds); // } $list = []; $total = $this->model->where($where)->count(); if ($total > 0) { // if (is_array($adminIds)) { // $this->model->where($this->dataLimitField, 'in', $adminIds); // } $fields = is_array($this->selectpageFields) ? $this->selectpageFields : ($this->selectpageFields && $this->selectpageFields != '*' ? explode(',', $this->selectpageFields) : []); //如果有primaryvalue,说明当前是初始化传值,按照选择顺序排序 if ($primaryvalue !== null && preg_match("/^[a-z0-9_\-]+$/i", $primarykey)) { $primaryvalue = array_unique(is_array($primaryvalue) ? $primaryvalue : explode(',', $primaryvalue)); //修复自定义data-primary-key为字符串内容时，给排序字段添加上引号 $primaryvalue = array_map(function ($value) { return '\'' . $value . '\''; }, $primaryvalue); $primaryvalue = implode(',', $primaryvalue); $this->model->orderRaw("FIELD(`{$primarykey}`, {$primaryvalue})"); } else { $this->model->order($order); } $datalist = $this->model->where($where) ->page($page, $pagesize) ->select(); foreach ($datalist as $index => $item) { unset($item['password'], $item['salt']); if ($this->selectpageFields == '*') { $result = [ $primarykey => $item[$primarykey] ?? '', $field => $item[$field] ?? '', ]; } else { $result = array_intersect_key(($item instanceof Model ? $item->toArray() : (array)$item), array_flip($fields)); } $result['pid'] = isset($item['pid']) ? $item['pid'] : (isset($item['parent_id']) ? $item['parent_id'] : 0); $list[] = $result; } if ($istree && !$primaryvalue) { $tree = Tree::instance(); $tree->init(collection($list)->toArray(), 'pid'); $list = $tree->getTreeList($tree->getTreeArray(0), $field); if (!$ishtml) { foreach ($list as &$item) { $item = str_replace(' ', ' ', $item); } unset($item); } } } //这里一定要返回有list这个字段,total是可选的,如果total<=list的数量,则会隐藏分页按钮 return json(['list' => $list, 'total' => $total]); } /** * 生成查询所需要的条件,排序方式 * @param mixed $searchfields 快速查询的字段 * @param boolean $relationSearch 是否关联查询 * @return array */ protected function buildparams($searchfields = null, $relationSearch = null) { $searchfields = is_null($searchfields) ? $this->searchFields : $searchfields; $relationSearch = is_null($relationSearch) ? $this->relationSearch : $relationSearch; $search = $this->request->get("search", ''); $filter = $this->request->get("filter", ''); $op = $this->request->get("op", '', 'trim'); $sort = $this->request->get("sort", !empty($this->model) && $this->model->getPk() ? $this->model->getPk() : 'id'); $order = $this->request->get("order", "DESC"); $offset = $this->request->get("offset/d", 0); $limit = $this->request->get("limit/d", 999999); //新增自动计算页码 $page = $limit ? intval($offset / $limit) + 1 : 1; if ($this->request->has("page")) { $page = $this->request->get("page/d", 1); } $this->request->get([config('paginate.var_page') => $page]); $filter = (array)json_decode($filter, true); $op = (array)json_decode($op, true); $filter = $filter ? $filter : []; $where = []; $alias = []; $bind = []; $name = ''; $aliasName = ''; if (!empty($this->model) && $relationSearch) { $name = $this->model->getTable(); $alias[$name] = Loader::parseName(basename(str_replace('\\', '/', get_class($this->model)))); $aliasName = $alias[$name] . '.'; } $sortArr = explode(',', $sort); foreach ($sortArr as $index => & $item) { $item = stripos($item, ".") === false ? $aliasName . trim($item) : $item; } unset($item); $sort = implode(',', $sortArr); if ($search) { $searcharr = is_array($searchfields) ? $searchfields : explode(',', $searchfields); foreach ($searcharr as $k => &$v) { $v = stripos($v, ".") === false ? $aliasName . $v : $v; } unset($v); $where[] = [implode("|", $searcharr), "LIKE", "%{$search}%"]; } $index = 0; foreach ($filter as $k => $v) { if (!preg_match('/^[a-zA-Z0-9_\-\.]+$/', $k)) { continue; } $sym = $op[$k] ?? '='; if (stripos($k, ".") === false) { $k = $aliasName . $k; } $v = !is_array($v) ? trim($v) : $v; $sym = strtoupper($op[$k] ?? $sym); //null和空字符串特殊处理 if (!is_array($v)) { if (in_array(strtoupper($v), ['NULL', 'NOT NULL'])) { $sym = strtoupper($v); } if (in_array($v, ['""', "''"])) { $v = ''; $sym = '='; } } switch ($sym) { case '=': case '<>': $where[] = [$k, $sym, (string)$v]; break; case 'LIKE': case 'NOT LIKE': case 'LIKE %...%': case 'NOT LIKE %...%': $where[] = [$k, trim(str_replace('%...%', '', $sym)), "%{$v}%"]; break; case '>': case '>=': case '<': case '<=': $where[] = [$k, $sym, intval($v)]; break; case 'FINDIN': case 'FINDINSET': case 'FIND_IN_SET': $v = is_array($v) ? $v : explode(',', str_replace(' ', ',', $v)); $findArr = array_values($v); foreach ($findArr as $idx => $item) { $bindName = "item_" . $index . "_" . $idx; $bind[$bindName] = $item; $where[] = "FIND_IN_SET(:{$bindName}, `" . str_replace('.', '`.`', $k) . "`)"; } break; case 'IN': case 'IN(...)': case 'NOT IN': case 'NOT IN(...)': $where[] = [$k, str_replace('(...)', '', $sym), is_array($v) ? $v : explode(',', $v)]; break; case 'BETWEEN': case 'NOT BETWEEN': $arr = array_slice(explode(',', $v), 0, 2); if (stripos($v, ',') === false || !array_filter($arr, function ($v) { return $v != '' && $v !== false && $v !== null; })) { continue 2; } //当出现一边为空时改变操作符 if ($arr[0] === '') { $sym = $sym == 'BETWEEN' ? '<=' : '>'; $arr = $arr[1]; } elseif ($arr[1] === '') { $sym = $sym == 'BETWEEN' ? '>=' : '<'; $arr = $arr[0]; } $where[] = [$k, $sym, $arr]; break; case 'RANGE': case 'NOT RANGE': $v = str_replace(' - ', ',', $v); $arr = array_slice(explode(',', $v), 0, 2); if (stripos($v, ',') === false || !array_filter($arr)) { continue 2; } //当出现一边为空时改变操作符 if ($arr[0] === '') { $sym = $sym == 'RANGE' ? '<=' : '>'; $arr = $arr[1]; } elseif ($arr[1] === '') { $sym = $sym == 'RANGE' ? '>=' : '<'; $arr = $arr[0]; } $tableArr = explode('.', $k); if (count($tableArr) > 1 && $tableArr[0] != $name && !in_array($tableArr[0], $alias) && !empty($this->model) && $this->relationSearch) { //修复关联模型下时间无法搜索的BUG $relation = Loader::parseName($tableArr[0], 1, false); $alias[$this->model->$relation()->getTable()] = $tableArr[0]; } $where[] = [$k, str_replace('RANGE', 'BETWEEN', $sym) . ' TIME', $arr]; break; case 'NULL': case 'IS NULL': case 'NOT NULL': case 'IS NOT NULL': $where[] = [$k, strtolower(str_replace('IS ', '', $sym))]; break; default: break; } $index++; } if (!empty($this->model)) { $this->model->alias($alias); } $model = $this->model; $where = function ($query) use ($where, $alias, $bind, &$model) { if (!empty($model)) { $model->alias($alias); $model->bind($bind); } foreach ($where as $k => $v) { if (is_array($v)) { call_user_func_array([$query, 'where'], $v); } else { $query->where($v); } } }; return [$where, $sort, $order, $offset, $limit, $page, $alias, $bind]; }}
至此我们就可以正常的在fastadmin前台使用bootstrap-table表格了。
总结
总结起来，fastadmin的后台使用了bootstrap-table展示表格，样式漂亮且提供了多套可替换的样式，fastadmin团队还进行了二次开发，使得整体使用体验更好。
这里是编程界的彭于晏，一个不务正业的程序员，广交天下朋友，有什么开发问题一起交流。