bootstrap-table数据导入及设置功能按钮

最新推荐文章于 2023-08-24 14:38:41 发布

bangfox0730

最新推荐文章于 2023-08-24 14:38:41 发布

阅读量524

点赞数

文章标签：后端

原文链接：http://www.cnblogs.com/QicongLiang/p/11274910.html

版权

本文介绍了一种使用JavaScript和jQuery实现的服务器状态切换方法。通过定义按钮事件和AJAX请求，可以更新服务器的状态并重新加载页面以显示新的状态。代码中包含了初始化表格、按钮事件绑定及状态更改的完整流程。

摘要由CSDN通过智能技术生成

<script>
$(document).ready(function(){
        
        var sid = 0;

　　　　//定义函数，返回标签，与下面table初始化关联，这里返回的是一个按钮
        function AddFunctionAlty(value,row,index){
                var btn = '<button class="btn btn-primary btn-lg TableEditor" data-toggle="modal" data-target="#myModal">切换状态</button>';
                return[btn]     
        }

　　　　//定义按钮功能事件，与下面table初始化关联，为初始化的按钮绑定一个事件
        window.operateEvents = {
                "click .TableEditor":function(e,value,row,index){
                        sid = row['sid'];
                },
        }

　　　　//确认按钮的事件
        $('#commit-btn').on('click',function(){
                var server_status = $('#status_selector').val();
                $.ajax({
                        url: "change_status",
                        type: "post",
                        data: {
                                'status' : server_status,       
                                'sid' : sid,
                        },
                        success: function(respondata){
                                location.reload();
                        }
                });
        });

　　　　//去后端获取数据，及传进table里面
　　　　$.ajax({
                url: "get_data",
                type: "get",
　　　　　　　　　 success: function(respondata){
                        respondata = JSON.parse(respondata);
                        $('#tbl').bootstrapTable({
                                data : respondata,
                                columns : [
                                        {
                                                field : 'sid',
                                                title : 'sid',
                                        },
                                        {
                                                field : 'name',
                                                title : '服务器名称'
                                        },
                                        {
                                                field : 'maintain',
                                                title : '状态',
                                        },
                                        {
                                                field : 'button',
                                                title : '操作',
                                                events : operateEvents,
                                                formatter : AddFunctionAlty
                                        },
                                ]
                        });
                }
        });     
});

</script>