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>
怎麼？看不懂啊？看不懂來問我唄？QQ抖在這裏977798066，需要就問我，能用官方文檔和例子解決的就算了哈，我也不會
回答，完美！
4、接下來是API接口開發
兩張圖片實現API的開發，不過會有個問題，訪問該咋訪問，這樣？
用XXX.php訪問的是後臺，咱們現在訪問的是接口，所以得用index.php，也就是
