bootstrap-table + 事件 + 动态生成模态框

做web应用的时候常常会使用到表格展示数据，还需要对表格中的数据做一些操作，这次工作中正好碰到，也就做了一个整理，方便以后开发直接使用。

前端的表格组件有很多，常说的有jqGrid，datagrid，本文使用的是bootstrap-table，因为考虑到内部使用的后台管理应用使用bootstrap开发前端即可，就想着bootstrap有没有相关的表格组件，就找到了这么个东西。

对表格中的数据进行操作，通常需要一些提示语，这边选择了bootstrap的模态框，代码都是官网的例子，非常简单。

整体效果如下所示：

使用bootstrap-table的时候遇到了一些问题，主要是服务器返回的数据必须有’total’、’data’字段，如何增加查询参数，如何在行按钮中绑定事件，序号如何生成。解决代码如下：

$(function(){
    //使用组件生成表格
    $('#dataxJobInfoTable').bootstrapTable({
        //换行变色
        striped: true,
        //查询数据的接口地址
        url:serverUrl,
        method:'get',
        //查询参数，可以用于增加表格的筛选条件，在下文的function queryParams()中实现
        queryParams:queryParams,
        //设置接口返回值中用于填充表格数据的字段
        dataField:"data",
        contentType:"application/json",
        pageNumber:1,
        sidePagination:'server',
        //接口返回数据的处理方法，使用该方法可以控制生成该组件所需的total和data字段
        responseHandler:responseHandler,
        pagination:true,
        pageSize:5,
        pageList:[10,30,100],
        //列，此处举例：序号生成方法+列按钮如何添加事件，并非上图对应的列信息
        columns: [{
            field: 'number',
            title: '序号',
            formatter:function(value,row,index){
                var pageSize=$('#dataxJobInfoTable').bootstrapTable('getOptions').pageSize;
                var pageNumber=$('#dataxJobInfoTable').bootstrapTable('getOptions').pageNumber;
                return pageSize * (pageNumber - 1) + index + 1;
            }
        },{
            field: '',
            title: '',
            visible:false
        }, {
            field: 'operate',
            title: '操作',
            formatter:function(value,row,index){
                return '<a  id="runDataxJob" class="btn btn-xs btn-warning"><i class="fa fa-edit"></i> 执行</a>'
                +'<a id="resumeJob" class="btn btn-warning btn-xs" style="margin-left:10px"><i class="fa fa-eye"></i>恢复</a>'
                +'<a id="viewDataxJobLog" class="btn btn-success btn-xs" style="margin-left:10px"><i class="fa fa-eye"></i> 日志</a>'
                +'<a id="deleteDataxJobRow" class="btn btn-danger btn-xs" style="margin-left:10px"><i class="fa fa-close"></i> 删除</a>';
            },
            //可以为该列绑定事件，如下所示，每个按钮绑定了事件
            events: {
                 'click #deleteDataxJobRow': function (e, value, row, index) {
                     //动态控制模态框的显示内容，为模态框的按钮动态的绑定事件，包括删除事件和执行事件，
                     //这样模态框就可以复用
                     $("#warningText").text("是否删除任务： " +row.dataxJobName + " ?");
                     $("#confirmBtn").text("删除");
                     $("#confirmBtn").on("click",function(){
                         deleteRowById(row.id)
                     });
                     $("#opDataxJobRowModal").modal();
                 },
                 'click #runDataxJob': function (e, value, row, index) {
                     $("#warningText").text("确认执行任务： " +row.dataxJobName + " ?");
                     $("#confirmBtn").text("执行");
                     $("#confirmBtn").on("click",function(){
                         runDataxJob(row);
                     });
                     $("#opDataxJobRowModal").modal();

                 },
                 'click #pauseJob': function (e, value, row, index) {
                     $("#warningText").text("是否暂停任务： " +row.dataxJobName + " ?");
                     $("#confirmBtn").text("暂停");
                     $("#confirmBtn").on("click",function(){
                         pauseJob(row.xxlJobId)
                     });
                     $("#opDataxJobRowModal").modal();
                 },
                 'click #resumeJob': function (e, value, row, index) {
                     $("#warningText").text("是否恢复任务： " +row.dataxJobName + " ?");
                     $("#confirmBtn").text("恢复");
                     $("#confirmBtn").on("click",function(){
                         resumeJob(row.xxlJobId)
                     });
                     $("#opDataxJobRowModal").modal();
                 },
                 'click #viewDataxJobLog': function (e, value, row, index) {
                     toLogListPage(row);
                 }
            }
        }]
    });
    //当模态框隐去的时候取消绑定的事件，下一次再动态绑定
    $('#opDataxJobRowModal').on('hidden.bs.modal', function (event) {
        $("#confirmBtn").unbind();
    })
});

//生成查询参数
function queryParams(params){
   return{
       pageSize: params.limit,
       pageNum:params.offset/params.limit+1,
       //这里就俩条件：任务名称和任务描述
       dataxJobName:$("#dataxJobName").val(),
       jobDesc:$("#jobDesc").val()
   }
}

//请求成功将后端返回的数据进行处理以满足bootstrap-table
function responseHandler(result){
    var errcode = result.status;
    if(errcode == "9999"){
        return {
            total : 0, //总页数,前面的key必须为"total"
            data : null //行数据，前面的key要与之前设置的dataField的值一致.
        }
    }
    //如果没有错误则返回数据，渲染表格
    return {
        total : result.data.total, //总页数,前面的key必须为"total"
        data : result.data.list //行数据，前面的key要与之前设置的dataField的值一致.
    };
};

这样，表格就生成了，模态框也是动态生成的，每次点击按钮不一样，生成的模态框也不一样，模态框的按钮绑定的事件也不一样。

当点击删除，需要调删除接口删除数据，并隐藏当前模态框显示一个新的操作成功的模态框并刷新表格。代码和效果如下所示：

//删除
function deleteRowById(id){
    $.ajax({
        url:serverUrl,
        type:"delete",
        contentType: "application/json;charset=utf-8", 
        success:function(data){
            if(data.status=="0000"){
                $("#opDataxJobRowModal").modal('toggle');
                $("#opSuccessModal").modal();
                $('#dataxJobInfoTable').bootstrapTable('refresh', {url: serverUrl+""});
            }else{
                $("#opDataxJobRowModal").modal('toggle');
                $("#opFailedModal").modal();
            }
        }
    });
}

附上前端代码：

<!-- 操作模态框 -->
<div class="modal fade" id="opDataxJobRowModal" tabindex="-1" role="dialog" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">警告</h4>
      </div>
      <div class="modal-body">
                <strong id="warningText"></strong>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger" id="confirmBtn"></button>
      </div>
    </div>
  </div>
</div>
<!-- 操作成功提示模态框 -->
<div id="opSuccessModal" class="modal fade " tabindex="-1" role="dialog" >
  <div class="modal-dialog modal-sm" role="document">

    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">提示</h4>
        </div>
        <div class="modal-body">
            <p style="color:green">操作成功</p>
        </div>
    </div>
  </div>
</div>
<!-- 操作失败提示模态框 -->
<div id="opFailedModal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">

    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">提示</h4>
        </div>
        <div class="modal-body">
            <p style="color:red" id="opFaildeMessage">操作失败</p>
        </div>
    </div>
  </div>
</div>