bootstrap table edit 在 require 开发模式下没效果问题

require模块化开发形式下， 引入bootstrapTable edit插件，实现在行内修改

涉及到修改模式为 从后台获取联系人列表进行修改

首先，先来看require 引入bootstrap edit插件

• main.js

require.config({
    baseUrl: '/static/js',  //  基本路径
    paths: {  // 每个路径地址
        'jquery': 'lib/jquery-3.1.0.min',
        'bootstrap': 'lib/bootstrap.min',
        'bootstrapTable': 'plugins/bootstrap-table.min',
        'bootstrapTableZn': 'plugins/bootstrap-table-zh-CN.min',
        'bootstrapValidate': 'plugins/bootstrapValidator.min',
        'bootstrapSelect': 'plugins/bootstrap-select',
        'bootstrapEdit': 'plugins/bootstrap-editable.min',
        'bootstrapTableEdit': 'plugins/bootstrap-table-editable',
        'myTable': 'src/common/dataTable',
        'myPublic': 'src/common/public',
        'toast': 'plugins/jquery.toast',
        'showDialog': 'plugins/showDialog'
    },
    shim: {    // 第三方库
        bootstrap: {
            deps: ['jquery'],  // 依赖
            exports: 'bootstrap'  // 输出的变量
        },
        bootstrapTable: {
            deps: ['jquery'],
            exports: 'bootstrapTable'
        },
        bootstrapTableZn: {
            deps: ['jquery','bootstrapTable'],
            exports: 'bootstrapTableZn'
        },
        bootstrapValidate: {
            deps: ['jquery'],
            exports: 'bootstrapValidate'
        },
        bootstrapSelect: {
            deps: ['jquery'],
            exports: 'bootstrapSelect'
        },
        bootstrapEdit: {
            deps: ['jquery'],
            exports: 'bootstrapEdit'
        },
        bootstrapTableEdit: {
            deps: ['jquery','bootstrapTable'],
            exports: 'bootstrapTableEdit'
        },
        toast: {
            deps: ['jquery'],
            exports: 'toast'
        },
        showDialog:{
             deps: ['jquery'],
            exports: 'showDialog'
        }
    }
});

这里注意，bootstrapTableEdit 插件的依赖（deps）必须要填写上bootstrapTable，否则就会没效果

• a.js (例子)

require(['jquery','bootstrap', 'bootstrapTable','bootstrapTableZn','bootstrapEdit','bootstrapTableEdit','bootstrapValidate','bootstrapSelect','myPublic','myTable'],function ($,bs,bsT,bsTZn,bsE,bsTE,bsV,bsS,myPublic,myTable) {
    //这里写回调函数。
});

在需要引入表格和表格行内修改的插件的js中这样子引入插件、设置参数以及写回调函数

• 回调函数中，加载表格数据时列参数(修改参数editable)

{
                            field: 'service_name',
                            title: '服务名称',
                            align: 'center',
                            valign: 'middle',
                            editable: {
                                type: 'text',
                                title: '服务名称',
                                validate: function (v) {
                                    if (!v) return '服务名称不能为空';

                                }
                            }
                        },

• 修改的数据是下拉框

  {
                          field: 'command_name',
                          title: 'command',
                          align: 'center',
                          valign: 'middle',
                          editable: {
                              type: 'select',
                              title: 'command',
                              source: nagios.service.commandNameList
  
                          }
                      },

  这里source是select数据，一般项目中select数据都是后台数据，因为此页面中很多处用到多次这个列表，所以在页面加载时从后台获取到值，存入对象中。这里还有个点，就是bootstrap-select数据从后台渲染。代码如下：

getSelectListData: function (url, container) {
                    var valueArr = [];
                    $.ajax({
                        type: 'get',
                        url: url,
                        dataType: 'json',
                        data: {},
                        async: false,
                        success: function (res) {
                            if (res.status == 'ok') {
                                var data = res.data;
                                var str = '';

                                for (var i = 0; i < res.data.length; i++) {
                                    valueArr.push({value: data[i], text: data[i]});
                                    str += '<option value="' + data[i] + '">' + data[i] + '</option>'
                                }
                                container.html(str);
                                container.selectpicker('refresh');
                            } else {
                                myPublic.notice('提示', 'warning', res.describe);
                            }
                        },
                        error: function () {
                            myPublic.notice('提示', 'error', '请求超时，请稍后重试')
                        }，
                    });
                    return valueArr;
                },

ajax获取到，渲染到dom中后，要刷新select，也就是container.selectpicker('refresh'); （refresh方法更新UI以匹配新状态。对于删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。），否则dom中没有数据。

• 接下来触发 保存修改后的数据 事件，这里封装函数

  function editSave(row) {
                      delete row.id;
                      $.ajax({
                          type: "post",
                          url: url,
                          data: row,
                          dataType: 'JSON',
                          success: function (res) {
  
                          },
                          error: function () {
  
                          }
                      })
                  }

• bootstrap-table 配置onEditableSave

$(tableId).bootstrapTable({

            method: 'get',
            url: url,
            undefinedText: '-', // 当数据为 undefined 时显示的字符
            cache: false,

            pagination: true,  //设置为 true 会在表格底部显示分页条
            pageList: [10, 15, 20, 25], // 设置页面可以显示的数据条数
            pageSize: 10, // 页面数据条数
            pageNumber: 1, // 首页页码

            //搜索
            search: search,
            searchAlign: searchAlign || 'left',

            // 列
            columns: columns,
            onEditableSave: function (field, row, oldValue, $el) {
                editFn(row);
            },
            striped: true,

        });

因为我这里bootstrap table 渲染数据方法是复用的，看着可能不太清晰，调用上面的editSave() 方法，传入row 参数，如果后台不需要某个字段，delete 掉就可以了。

如果有哪些地方大神们觉得需要修改，请评论留言哦～