fastadmin后台自定义按钮和弹窗

原创

已于 2024-01-31 14:44:59 修改 · 8.4k 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#fastadmin #自定义按钮 #弹窗

于 2024-01-31 11:40:46 首次发布

本文详细介绍了如何在前端使用BootstrapTable组件实现工具栏自定义按钮，通过AJAX向后端发送请求，并结合后端PHP代码处理数据，包括弹窗功能的实现和表单提交处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工具栏自定义按钮-ajax请求

前端代码

1.在对应模块的模板文件index.html添加自定义按钮，注意按钮要添加id以绑定点击事件

<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,add,edit,del')}
                        <div class="dropdown btn-group {:$auth->check('user/group/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>

                        <!--  添加自定义按钮  -->
                        <a class="btn btn-primary dropdown-toggle" href="javascript:;" data-toggle="dropdown" id="testButton"><i class="fa fa-send"></i> {:__('自定义')}</a>
                    
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('user/group/edit')}"
                           data-operate-del="{:$auth->check('user/group/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

2.对应js文件中添加绑定事件，注意要写在为表格绑定事件前面

		//.......(表格字段)			


			// 自定义功能
            $('#testButton').on('click', function (){
   
                layer.confirm(`确定调用自定义功能吗？`, {
   
                        btn: ['确定', '取消'] //按钮
                    }, function (index) {
   
                        $.ajax({
   
                            url: "user/user/test", //请求接口
                            type: "post",
                            dataType: "json",
                            data: {
   "ids": 1}, //请求参数
                            success: function (data) {
   
                                layer.confirm(data.msg, {
   
                                    btn: ['确定'] //按钮
                                }, function (