🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>[info]## 完整代码 **PHP代码** ~~~ <?php namespace app\admin\controller; use app\common\controller\Backend; /** * 测试管理 * * @icon fa fa-circle-o * @remark 此列表是通过php think crud -t test一键生成的针对数据表的查看、添加、编辑、删除、批量修改等功能,只需在设计表时符合FastAdmin相关字段名称、备注要求,即可生成相关的表单组件 */ class Test extends Backend { protected $model = null; protected $relationSearch = true; public function _initialize() { parent::_initialize(); $this->model = model('Test'); } /** * 查看 */ public function index() { if ($this->request->isAjax()) { list($where, $sort, $order, $offset, $limit) = $this->buildparams(); $total = $this->model ->with("category") ->where($where) ->order($sort, $order) ->count(); $list = $this->model ->with("category") ->where($where) ->order($sort, $order) ->limit($offset, $limit) ->select(); $result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]); return json($result); } return $this->view->fetch(); } } ~~~ **JS代码:** ~~~ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) { var Controller = { index: function () { // 初始化表格参数配置 Table.api.init({ extend: { index_url: 'test/index', add_url: 'test/add', edit_url: 'test/edit', del_url: 'test/del', multi_url: 'test/multi', table: 'test', } }); var table = $("#table"); //当表格数据加载完成时 table.on('load-success.bs.table', function (e, data) { //这里可以获取从服务端获取的JSON数据 console.log(data); //这里我们手动设置底部的值 $("#money").text(data.extend.money); $("#price").text(data.extend.price); }); // 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, pk: 'id', sortName: 'weigh', columns: [ [ {checkbox: true}, {field: 'id', title: __('Id')}, {field: 'admin_id', title: __('Admin_id')}, {field: 'category.name', title: __('分类名称'), formatter:Table.api.formatter.search}, {field: 'category_id', title: __('Category_id'), visible: false}, {field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label}, {field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal}, {field: 'title', title: __('Title')}, {field: 'image', title: __('Image'), formatter: Table.api.formatter.image}, {field: 'images', title: __('Images'), formatter: Table.api.formatter.images}, {field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime}, {field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false}, {field: 'weigh', title: __('Weigh'), operate: false, visible: false}, {field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle}, {field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status}, { field: 'buttons', width: "120px", title: __('按钮组'), table: table, events: Table.api.events.operate, buttons: [ { name: 'detail', text: __('弹出窗口打开'), title: __('弹出窗口打开'), classname: 'btn btn-xs btn-primary btn-dialog', icon: 'fa fa-list', url: 'example/bootstraptable/detail', callback: function (data) { Layer.alert("接收到回传数据:" + JSON.stringify(data), {title: "回传数据"}); }, visible: function (row) { //返回true时按钮显示,返回false隐藏 return true; } }, { name: 'ajax', text: __('发送Ajax'), title: __('发送Ajax'), classname: 'btn btn-xs btn-success btn-magic btn-ajax', icon: 'fa fa-magic', url: 'example/bootstraptable/detail', confirm: '确认发送', success: function (data, ret) { Layer.alert(ret.msg + ",返回数据:" + JSON.stringify(data)); //如果需要阻止成功提示,则必须使用return false; //return false; }, error: function (data, ret) { console.log(data, ret); Layer.alert(ret.msg); return false; } }, { name: 'addtabs', text: __('新选项卡中打开'), title: __('新选项卡中打开'), classname: 'btn btn-xs btn-warning btn-addtabs', icon: 'fa fa-folder-o', url: 'example/bootstraptable/detail' } ], formatter: Table.api.formatter.buttons }, { field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, buttons: [ { name: 'detail', title: __('详情'), classname: 'btn btn-xs btn-primary btn-dialog', icon: 'fa fa-list', url: 'test/detail', callback: function (data) { Layer.alert("接收到回传数据:" + JSON.stringify(data), {title: "回传数据"}); } }], formatter: Table.api.formatter.operate } ] ] }); // 绑定TAB事件 $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var field = $(this).closest("ul").data("field"); var value = $(this).data("value"); var options = table.bootstrapTable('getOptions'); options.pageNumber = 1; options.queryParams = function (params) { var filter = {}; if (value !== '') { filter[field] = value; } params.filter = JSON.stringify(filter); return params; }; table.bootstrapTable('refresh', {}); return false; }); // 为表格绑定事件 Table.api.bindevent(table); }, add: function () { Controller.api.bindevent(); }, edit: function () { Controller.api.bindevent(); }, api: { bindevent: function () { Form.api.bindevent($("form[role=form]")); } } }; return Controller; }); ~~~ HTML代码: ~~~ <div class="panel panel-default panel-intro"> <div class="panel-heading"> {:build_heading(null,FALSE)} <ul class="nav nav-tabs" data-field="status"> <li class="active"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li> {foreach name="statusList" item="vo"} <li><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li> {/foreach} </ul> </div> <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> <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('test/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a> <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('test/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a> <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('test/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a> <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('test/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="fa fa-upload"></i> {:__('Import')}</a> <div class="dropdown btn-group {:$auth->check('test/multi')?'':'hide'}"> <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a> <ul class="dropdown-menu text-left" role="menu"> <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li> <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li> </ul> </div> <a class="btn btn-info btn-disabled disabled btn-selected" href="javascript:;"><i class="fa fa-leaf"></i> 获取选中项</a> <a class="btn btn-success btn-singlesearch" href="javascript:;"><i class="fa fa-user"></i> 自定义搜索</a> <a class="btn btn-success btn-change btn-start" data-params="action=start" data-url="example/bootstraptable/start" href="javascript:;"><i class="fa fa-play"></i> 启动</a> <a class="btn btn-danger btn-change btn-pause" data-params="action=pause" data-url="example/bootstraptable/pause" href="javascript:;"><i class="fa fa-pause"></i> 暂停</a> <a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;"> <i class="fa fa-dollar"></i> <span class="extend"> 金额:<span id="money">0</span> 单价:<span id="price">0</span> </span> </a> </div> <table id="table" class="table table-striped table-bordered table-hover table-nowrap" data-operate-edit="{:$auth->check('test/edit')}" data-operate-del="{:$auth->check('test/del')}" width="100%"> </table> </div> </div> </div> </div> </div> ~~~