在fastadmin,有时候我们需要在列表中增加更多的自定义的按钮,这里记录下,各种按钮的处理情况

1、在记录中增加各种按钮

//操作栏,默认有编辑、删除或排序按钮,可自定义配置buttons来扩展按钮
 {
	field: 'operate',
	width: "150px",
	title: __('Operate'),
	table: table,
	events: Table.api.events.operate,
	buttons: [
		{
			name: 'click',
			title: __('点击执行事件'),
			classname: 'btn btn-xs btn-info btn-click',
			icon: 'fa fa-leaf',
			 refresh:true
			// dropdown: '更多',//如果包含dropdown,将会以下拉列表的形式展示
			click: function (data) {
				Layer.alert("点击按钮执行的事件");
			}
		},
	{
			name: 'check',
			text: __('通过'),
			title: __('点击执行事件,增加确认弹窗'),
			visible: function (row) {
				return row.status == 0;
			},
			classname: 'btn btn-xs btn-success btn-ajax',
			icon: 'fa fa-location-arrow',
			url: 'user/check',
			confirm: '确认要通过该记录吗',
			refresh: true
		},
	{
			name: 'click',
			text: __('驳回'),
			title: __('点击执行事件,增加简单的弹窗输入提交'),
			visible: function (row) {
				return row.status == 0;
			},
			classname: 'btn btn-xs btn-danger btn-click',
			icon: 'fa fa-suitcase',
			click: function(e, row) {
				Layer.prompt({
					title: "驳回原因",
					success: function(layero) {
						$("input", layero).prop("placeholder", "填写驳回原因");
					}
				}, function(value) {
					Fast.api.ajax({
						url: "user/refuse?ids=" + row.id,
						data: {
							cause: value
						},
					}, function(data, ret) {
						Layer.closeAll();
						$(".btn-refresh").trigger("click");
						//return false;
					});
				});
				return false;
			}
		}
		{
			name: 'detail',
			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: "回传数据"});
			}
		},
		{
			name: 'ajax',
			title: __('发送Ajax'),
			classname: 'btn btn-xs btn-success btn-magic btn-ajax',
			icon: 'fa fa-magic',
			confirm: '确认发送Ajax请求?',
			url: 'example/bootstraptable/detail',
			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',
			title: __('新选项卡中打开'),
			classname: 'btn btn-xs btn-warning btn-addtabs',
			icon: 'fa fa-folder-o',
			url: 'example/bootstraptable/detail'
		}
	],
	formatter: Table.api.formatter.operate
},                       

2、在列表顶部增加按钮

先编辑index.html

<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-warning btn-loglist {:$auth->check('import/userres/index')?'':'hide'}" title="上传表格" ><i class="fa fa-plus"></i> 上传表格</a>
     <a href="javascript:;" class="btn btn-success btn-check btn-disabled disabled"
                           title="{:__('批量通过')}" ><i class="fa fa-location-arrow"></i> {:__('批量通过')</a>
     <a href="javascript:;" class="btn btn-danger btn-refuse btn-disabled disabled"
                           title="{:__('批量驳回')}" ><i class="fa fa-suitcase"></i> {:__('批量驳回')}</a>
	<a href="javascript:;" class="btn btn-warning btn-createvideocourse {:$auth->check('general/attachment/createvideo')?'':'hide'}" title="自动创建视频课程" ><i class="fa fa-plus"></i> 自动创建视频课程</a>
                        
</div>

再处理js文件

//找到这一行
// 为表格绑定事件
Table.api.bindevent(table);
//下面新增代码
function getIdSelections() {
	return $.map($("#table").bootstrapTable('getSelections'), function(row) {
		return row.id
	});
}

$(".btn-check").on('click',function(){
	var checkids = [];
	checkids = getIdSelections();
	console.log(checkids);
	Fast.api.ajax({
		type: 'POST',
		url:'user_order/batchcheck?ids='+checkids
	}, function (data, ret) {
		console.log(data);
		location.reload();
	}, function (data, ret) {
		console.log(data);
		location.reload();
	});
});

$(".btn-refuse").on('click',function(){
	var checkids = [];
	checkids = getIdSelections();
	console.log(checkids);
	Layer.prompt({
		title: "驳回原因",
		success: function(layero) {
			$("input", layero).prop("placeholder", "填写驳回原因");
		}
	}, function(value) {
		Fast.api.ajax({
			url: "userorder/batchrefuse?ids="+checkids,
			data: {
				cause: value
			},
		}, function(data, ret) {
			Layer.closeAll();
			$(".btn-refresh").trigger("click");
			//return false;
		});
	});
	return false;
});

$(".btn-loglist").on('click',function(){
	Fast.config.openArea = ['80%','80%'];
	Fast.api.open('import/userres/index', '导入结果');
});
//也可以这样
$(document).on("click",".btn-createvideo",function() {
	var ids = Table.api.selectedids(table);
	Fast.api.ajax({
		url: "general/attachment/createvideo",
		type: "post",
		data: {ids: ids.join(',')},
	}, function (data, ret) {
		table.bootstrapTable('refresh',{silent: true });
	}, function (err) {
		console.log(err)
	});
});

文章作者: Wind
本文链接:
版权声明: 本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 雕刻时光
fastadmin PHP
喜欢就支持一下吧