fastadmin后台表格使用技巧
自定义按钮打开页面的大小
extend: 'data-area=["500px","270px"]'
修改系统编辑打开的页面大小,在表格绑定事件前
table.on('post-body.bs.table',function(){
$(".btn-editone").data("area",["500px","350px"]);
});
隐藏表格的默认搜索框
search: false,
字段不需要出现在搜索条件中
operate: false
想自定义根据参数控制 编辑/添加 按钮的显示
formatter: function(value, row, index){
var that = $.extend({}, this);
var table = $(that.table).clone(true);
if (row.status != 1) {
$(table).data("operate-edit", null);
}
that.table = table;
return Table.api.formatter.operate.call(that, value, row, index);
}
自定义根据参数控制自定义按钮的显示
//显示
visible: function(row) {
if(row.is_check == 0 && row.status == 1){
return true;
}
}
//隐藏
hidden: function(row) {
if(row.is_check == 0 && row.status == 1){
return true;
}
}
自定义按钮想弹出提示
//加上属性
confirm: '确认首款正确吗?',
//另外按钮必须加上类
btn-ajax
自定义按钮打开页面可操作请求,并关闭页面
//按钮加上类
btn-dialog
//控制打开页面大小
extend: 'data-area=["500px","270px"]'
//好需要绑定时间,不然窗口不会关闭 refuse 为按钮的名称
refuse: function () {
Controller.api.bindevent();
},
默认打开表格的搜索,表格绑定事件之前
$('.commonsearch-table').attr('class','commonsearch-table');
表格的其他参数控制
commonSearch: false,
visible: false,
showToggle: false,
showColumns: false,
search: false,
showExport: false,
表格渲染的同时,渲染其他的数据,或者操作dom
table.on('load-success.bs.table', function (e, data) {
$("#income_total_price").text(data.income_total_price);
...
});
联动下拉框 selectpage
$("#c-contract_cate_id").data("params", function(){
return {custom: {type: $("#c-type").val()}};
})
//示例
add: function () {
$("#c-contract_cate_id").data("params", function(){
return {custom: {type: $("#c-type").val()}};
})
Controller.api.bindevent();
},
权限控制按钮的显示隐藏
edit 和 del 是按钮的名称,前提是对应的操作权限已经加到了系统权限表中
data-operate-edit="{:$auth->check('mobile_limit/edit')}"
data-operate-del="{:$auth->check('mobile_limit/del')}"
标题的hover提示
data-toggle="tooltip" data-original-title="类型为收入,已付款金额相加"
//示例
<span data-toggle="tooltip" data-original-title="类型为收入,已付款金额相加">实收金额(元)</span>
自定义导出
//index.html
<a class="btn btn-info btn-myexcel-export" title="导出" href="javascript:;"><i class="fa fa-download"></i> 导出</a>
//js文件
// 自定义导出按钮
$(document).on("click", ".btn-myexcel-export", function () {
var page = table.bootstrapTable('getData'); // 获取页面数据
let ids = [];
let id_data = '';
let select_ids = [];
let select_id_data = [];
// 取出当前页面的id
$.each(page,function(i,v){
ids.push(v.id)
if(i == 0){
id_data = v.id;
}else{
id_data += ','+v.id;
}
})
//选中数据
var select = table.bootstrapTable('getSelections');
$.each(select,function(i,v){
select_ids.push(v.id)
if(i == 0){
select_id_data = v.id;
}else{
select_id_data += ','+v.id;
}
})
layer.confirm("请选择导出的选项", {
title: '导出数据',
btn: ['全部','当前页(' + ids.length + '条)','当前选中 ('+select_ids.length+')'],
yes: function (index, layero) {
// 全部数据
Layer.close(index);
top.location.href="export?id_data="
},
btn2: function (index, layero) {
// 当前页面数据
if (id_data.length <= 0) {
return layer.msg('当前页没有数据');
}
Layer.close(index);
top.location.href="export?id_data="+id_data
},
btn3: function (index, layero) {
// 选中数据
if (select_id_data.length <= 0) {
return layer.msg('没有选中数据');
}
Layer.close(index);
top.location.href="export?id_data="+select_id_data
}
})
});