对应的视频地址:
https://www.ixigua.com/7029550092092703262
https://www.ixigua.com/7029551561626157605
相关链接
- 一张图解析FastAdmin中的表格列表的功能(第15条) https://ask.fastadmin.net/article/323.html
- 一张图解析FastAdmin中的弹出窗口的功能 https://ask.fastadmin.net/article/2527.html
classname来控制按钮执行方式
弹出窗口 btn-dialog
,ajax请求 btn-ajax
,新选项卡btn-addtabs
,自定义点击事件 btn-click
按钮组 样例
{
field: 'buttons',
width: "120px",
title: '按钮组',
table: table,
events: Table.api.events.operate,
buttons: [
],
formatter: Table.api.formatter.buttons
}
弹出窗口 btn-dialog
修改弹出窗大小
extend: ' data-area = \'["800px","600px"]\' ',
{
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;
}
}
ajax请求 btn-ajax
完成后刷新表格
注意这里是或者的关系,不能同时用
refresh: true,
//或者
success: function (data, ret) {
table.bootstrapTable('refresh');
},
{
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;
}
}
新选项卡 btn-addtabs
{
name: 'addtabs',
text: __('新选项卡中打开'),
title: __('新选项卡中打开'),
classname: 'btn btn-xs btn-warning btn-addtabs',
icon: 'fa fa-folder-o',
url: 'example/bootstraptable/detail'
}
自定义点击按钮事件 btn-click
此处例子为点击弹出窗口,输入文字,执行ajax请求
{
name: 'shield',
text: '完成',
icon: 'fa fa-check-circle fa-fw',
classname: 'btn btn-xs btn-success btn-click',
click:function(e,s) {
layer.prompt({title:"填写奖金数值"},function(val, index){
if(!val || val ==0 ){
layer.msg("请先填写正确的奖金数值!");
return;
}
if (isNaN(val)) {
layer.msg("请输入数字!");
return;
}
$.ajax({
type: "post",
url: "survey/over",
data: {
ids:s.id,
bonus:val
},
dataType: "json",
success: function (response) {
if(response.code == 2){
layer.msg(response.msg)
}
else{
layer.close(index);
table.bootstrapTable('refresh');
}
}
});
});
return false
},
refresh: true,
visible: function (row) {
//返回true时按钮显示,返回false隐藏
// console.log(row)
return !row.status;
}
},
普通列(非操作列)里怎么加按钮
利用formatter
来处理再输出
{field: 'ceshis', title: __('Ceshis'),formatter:function(a,b,c) {
console.log('a,b,c: ', a,b,c);
return a+'--'+'<button class="btn btn-xs btn-info" οnclick="console.log('+c+');return false;">点击</button>'
}},
怎么去掉edit del dragsort 这样的按钮
修改 operate
其他参数
dropdown
: ‘更多’,//如果包含dropdown,将会以下拉列表的形式展示
{
name: 'addtabs',
text: __('新选项卡中打开'),
title: __('新选项卡中打开'),
dropdown: '更多',//如果包含dropdown,将会以下拉列表的形式展示
classname: 'btn btn-xs btn-warning btn-addtabs',
icon: 'fa fa-folder-o',
url: './ceshi1/demo1'
}
扩展知识:
点击就自动选中了checkbox,双击就弹出编辑,怎么关闭?
方法1:改html:
table 加上属性即可 :
关闭点击选中: data-click-to-select="false"
关闭双击编辑:data-dbl-click-to-edit="false"
方法2:改js
clickToSelect: false, //是否启用点击选中
dblClickToEdit: false, //是否启用双击编辑
方法3:改js
可控制某一列禁用点击选中
table.on('post-body.bs.table', function (e, settings, json, xhr) {
$('tr td:eq(2)',this).off('click')
});
可定义自己的双击事件
table.on('dbl-click-row.bs.table', function (e, row, element, field) {
console.log('双击一行');
return false
// $(Table.config.editonebtn, element).trigger("click");
});