按钮点击事件发送请求改变状态

最新推荐文章于 2023-09-28 11:46:44 发布

lxtalent

最新推荐文章于 2023-09-28 11:46:44 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： ajax jquery

本文链接：https://blog.youkuaiyun.com/lxtalent/article/details/107079943

本文详细介绍了如何通过监听按钮点击事件，利用Ajax技术向服务器发送请求，进而实现页面状态的实时更新。结合jQuery库，使得代码更简洁，交互更流畅。

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

 $('#table').bootstrapTable({
                ajax: ajaxRequest1,
                showLoading: true,
                striped: true,
                pageNumber: 1,
                sortable: true,
                locale: 'zh-CN',
                showExport: true,
                buttonsAlign: "left", //按钮位置
                exportTypes: ['excel'], //导出文件类型
                Icons: 'glyphicon-export',
                pagination: true,
                sidePagination: 'server', //s
                pageSize: 10,
                pageList: [5, 10, 20, 30, 50],
                online: 'center',
                columns: [{
                    checkbox: true,
                    formatter: stateFormatter
                }, {
                    title: '序号',
                    formatter: function (value, row, index) {
                        var pageSize = $('#table').bootstrapTable('getOptions')
                            .pageSize;
                        var pageNumber = $('#table').bootstrapTable('getOptions')
                            .pageNumber;
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                }, {
                    title: '报警类别',
                    field: 'alarmMsg',
                }, {
                    title: '经度',
                    field: 'lng',
                }, {
                    title: '纬度',
                    field: 'lat',
                }, {
                    title: '姓名',
                    field: 'holderName',
                }, {
                    title: '设备序列号',
                    field: 'deviceSerialNum',
                }, {
                    title: '报警时间',
                    field: 'alarmTime',
                }, {
                    field: 'oprate',
                    title: '操作',
                    formatter: function (value, row, index) {
                     if(row.handle==false){//根据接口里面的数据判断
                        return [
                    `<button type="button" id="wo_data" class="btn btn-sm btn-warning"><span class="" aria-hidden="true">未处理</span></button>`
                    ]
                    }else{
                        return[
                        `<button type="button" id="wo_data1" class="btn btn-sm btn-primary" disabled="disabled"><span class="" aria-hidden="true">已处理</span></button>`
                        ]
                    }
                    },
                    events: operateEvents
                }]

            })
//调用接口
 window.operateEvents = {
            'click #wo_data': function (e, value, row, index) {
              $.ajax({
                  url:`/map/alarm/updateHolderById/` +row.id,//将id返回给后台
                  type:'put',
                  success:function(res){
                      $('#table').bootstrapTable('refresh')
                  }
              })
            }
        }

效果图
在这里插入图片描述