赞
踩
2020年搭建:
1、简单搭建模块,不推荐用官方的一键搭建新模块,看不懂还容易出错
圈圈是重点,搭建新模块五点缺一不可,少了就得打屁屁了。
2、简单教程
(1)关于页面有上角生成的导出,切换,列.搜索.
如果不需要的话可以在对应的js文件中添加如下代码.即可屏蔽
- //切换卡片视图和表格视图两种模式
- showToggle:false,
- //显示隐藏列可以快速切换字段列的显示和隐藏
- showColumns:false,
- //导出整个表的所有行导出整个表的所有行
- showExport:false,
- //搜索
- search: false,
- //搜索功能,
- commonSearch: false,
- //表格上方的搜索搜索指表格上方的搜索
- searchFormVisible: false,
(2).对于令人窒息的缓存问题.
很多时候发现更改页面之后没有效果.刷新,清理缓存也无效.让人又爱又恨.
在Confiig.php中将app_debug打开即可
- // 应用调试模式
- 'app_debug' => Env::get('app.debug', true),
(3).搜索框默认ID搜索.如果需要搜其他字段,在相应控制器添加以下即可 后面为你需要搜索的字段
protected $searchFields = 'id,name,age';
(4).如果需要对搜索框默认内容进行修改 在对应的js里面初始化表格参数配置之前添加
$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "试试搜索吧";};
(5).点击搜素不想要那个字段的话可以在对应的js中columns中 添加operate:false
即可不展示该字段的搜索
{field: 'name', title: __('Name'),operate:false},
(6).复选框的隐藏
直接注释掉就好了
(7).关闭多条件搜索
operate: false
(8).去掉时间区间的记忆
- table.on('post-body.bs.table',function (e,settings,json,xhr) {
- $('.datetimerange').each(function () {
- $(this).attr('autocomplete','off');
- })
- });
3、这是多表格的js、HTML代码,跟官方默认的一个页面多个表格不同,这里是页面有表创,弹窗也有表格
- define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
-
- var Controller = {
- index: function () {
- // 初始化表格参数配置
- Table.api.init();
- Controller.table['first'].call(this);
- $(".btn-add").data("area",["60%","82%"]);
- var table1;
- var table2;
- },
- table: {
- first: function () {
- // 表格1
- table1 = $("#table1");
- table1.bootstrapTable({
- url: 'user/validlog/index',
- extend: {
- index_url: 'user/validlog/index',
- add_url: 'user/validlog/add',
- del_url: 'user/validlog/del',
- },
- columns: [
- [
- {field: 'state', checkbox: true, },
- {field: 'id', title: 'ID', operate: false},
- {field: 'log_id', title: __('Log_id'), operate: false},
- {field: 'username', title: __('Username'), formatter: Table.api.formatter.search},
- {field: 'title', title: __('Title'), operate: 'LIKE %...%', placeholder: '模糊搜索'},
- {field: 'url', title: __('Url'), formatter: Table.api.formatter.url},
- {field: 'ip', title: __('IP'), events: Table.api.events.ip, formatter: Table.api.formatter.search},
- {field: 'browser', title: __('Useragent'), operate: false, formatter: Controller.api.formatter.browser},
- {field: 'createtime', title: __('Create time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
- {field: 'operate', title: __('Operate'), table: table1,
- events: Table.api.events.operate,
- buttons: [{
- name: 'detail',
- text: __('Detail'),
- icon: 'fa fa-list',
- classname: 'btn btn-info btn-xs btn-detail btn-dialog',
- url: 'user/validlog/detail'
- }],
- formatter: Table.api.formatter.operate
- }
- ]
- ]
- });
-
- // 为表格1绑定事件
- Table.api.bindevent(table1);
- },
- second: function () {
- // 表格1
- table2 = $("#table2");
- table2.bootstrapTable({
- url: 'auth/adminlog/index',
- extend: {
- index_url: 'auth/adminlog/index',
- add_url: 'auth/adminlog/index',
- },
- columns: [
- [
- {field: 'state', checkbox: true, },
- {field: 'id', title: 'ID', operate: false},
- {field: 'username', title: __('Username'), formatter: Table.api.formatter.search},
- {field: 'title', title: __('Title'), operate: 'LIKE %...%', placeholder: '模糊搜索'},
- {field: 'url', title: __('Url'), formatter: Table.api.formatter.url}
- ]
- ]
- });
-
- // 为表格2绑定事件
- Table.api.bindevent(table2);//标记为全部通过
- $(document).on('click','.btn-all-pass',function () {
- var ids = Table.api.selectedids(table2);
- Layer.open({
- title: __('Warning'),
- content:__('Content'),
- btn: [__('OK'),__('Cancel')],
- yes: function (index,layero) {
- Fast.api.ajax({
- url: "user/validlog/add",
- type: "post",
- data: {ids: ids},
- }, function (data) {
- //刷新父级表格
- parent.$("a.btn-refresh").trigger("click");
- Layer.close(index);
- parent.Toastr.success(data);
- Fast.api.close();//关闭弹窗
- });
- },success: function (layero, index) {
- }
- });
- });
- }
- },
- add: function () {
- Controller.api.bindevent();
- // 开启新页面表格需要重新初始化
- Table.api.init();
- Controller.table['second'].call(this);
- },
- edit: function () {
- Controller.api.bindevent();
- },
- api: {
- bindevent: function () {
- Form.api.bindevent($("form[role=form]"));
- },
- formatter: {
- browser: function (value, row, index) {
- return '<a class="btn btn-xs btn-browser">' + row.useragent.split(" ")[0] + '</a>';
- },
- },
- }
- };
- return Controller;
- });
- //index.html
- <div class="panel panel-default panel-intro">
- {:build_heading()}
- <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">
- {:build_toolbar('refresh,del,add')}
- </div>
- <table id="table1" class="table table-striped table-bordered table-hover"
- data-operate-detail="{:$auth->check('user/validlog/index')}"
- data-operate-detail="{:$auth->check('user/validlog/add')}"
- data-operate-del="{:$auth->check('user/validlog/del')}"
- width="100%">
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- //弹窗页面
- <div class="panel panel-default panel-intro">
- {:build_heading()}
- <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">
- {:build_toolbar('refresh')} <a href="javascript:;" class="btn btn-all-pass btn-success btn-disabled disabled " title="{:__('Addvalid')}" >{:__('Addvalid')}</a>
- </div>
- <table id="table2" class="table table-striped table-bordered table-hover"
- data-operate-detail="{:$auth->check('auth/adminlog/index')}"
- width="100%">
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
怎么?看不懂啊?看不懂滑到底部来问我呗?但是,能用官方文档和例子解决的就算了哈,我也不会
回答,完美!
4、接下来是API接口开发
两张图片实现API的开发,不过会有个问题,访问该咋访问,这样?
用XXX.php访问的是后台,咱们现在访问的是接口,所以得用index.php,也就是
官方的一键搭建新模块已炉火纯青,不过新手还是考虑先按上边走一遍
另外, fastadmin多表关联时容易导致表id冲突,以前是需要使用$sort=['表名.id'],现在也不需要了,只需要将控制器里的 $this->relationSearch = false中的false改为true即可
在此附上一键搭建新模块方法:
选择和填上四个箭头所指向的地方,记得表结构加上注释,这样表头的中文名字就是你字段的注释名称,然后点击生成命令,点击立即执行即可,好了,更新结束,更多复杂的请自己看文档。
好了,今天的分享就到这里,有问题的留个言,别忘了一键三连,下次我们还会再见!
我是黄啊码,码字的码,退。。。退。。。退。。。朝!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。