fastadmin后台自定义按钮和弹窗

本文详细介绍了如何在前端使用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 (
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值