bootstrap-table 行内编辑相关问题

今天就bootstrap-table行添加、修改、删除及取值作出一点小分析和自己的实际运用经验：

效果：

html：

    

<div class="eui-sqd-title" style="margin-top:20px;">
   <b>携带介质</b>
   <div class="rfloat" id="medium_toolbar">
      <a class="eui-btn-s icon-add" id="addMyMediums" href="javascript:void(0)">新增</a> <a
         class="eui-btn-s icon-del-gray" id="delMyMediums" href="javascript:void(0)">删除</a>
   </div>
</div>

<div>
   <table class="table-responsive" id="create_myApply_mediumTable">
   </table>
</div>

JS：

$.fn.editable.defaults.mode = 'inline';//编辑方式为内联方式

$('#mediumTable').bootstrapTable({

    method:'POST',
    dataType:'json',
    editable:true,//开启编辑模式
    contentType: "application/x-www-form-urlencoded",
    cache: false,
    striped: true,                              //是否显示行间隔色
    sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
    showColumns:false,
    pagination:false,
    minimumCountColumns:2,
    pageNumber:1,                       //初始化加载第一页，默认第一页
    pageSize: 10,                       //每页的记录行数（*）
    pageList: [10, 15, 20, 25],        //可供选择的每页的行数（*）
    uniqueId: "id",                     //每一行的唯一标识，一般为主键列
    // showExport: true,
    // exportDataType: 'all',
    // exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件类型
    onEditableSave: function (field, row, oldValue, $el) {
        $.ajax({
            success: function (data, status) {
                if (status == "success") {
                     alert("编辑成功");
                }
            },
            error: function () {
                alert("Error");
            },
            complete: function () {

            }
        });
    },
    onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发 

        var name = row.name;//取得名称单元格的值
        if(reason === 'save') {
            var $td = $el.closest('tr').children();
            var dataIndex = $($td[0]).find("input").attr("data-index");
            //根据名称从数据库中查询已有的介质信息,自动填充到此行后面的单元格中（特殊需求功能，可以不要，但是方便）

            name && queryFunction(name, dataIndex);

            // $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动
        } else if(reason === 'nochange') {
            $el.closest('tr').next().find('.editable').editable('show');
        }

},

data: [],

columns: [

        { field:"checked", checkbox : true },

        {

    field: 'name',
    title: '名称',
    editable: {
        type: 'text',
        onblur:"submit",
        showbuttons:false,
        // display: function(value) {
        //     $(this).text(value + '$');
        // },
        validate: function (value) {
            if ($.trim(value) == '') {
                return '名称不能为空!';
            }
        }
    }
},{field: 'direct', title: '带入/带出', editable: { 

      onblur:"submit", //表示鼠标离开输入框即进行提交保存操作
      showbuttons:false, //不显示每个单元格后面的操作按钮

      type: 'select',pk: 1,source: [{value: 1, text: '带入'},{value: 2, text: '带出'}],
      noeditFormatter: function (value,row,index) {
                 var result={filed:"direct",value:'带入',class:"badge",
                    style:"background:#333;padding:5px 10px;"};
                return result;
            }
        }
    },{
        field: 'count',
        title: '数量',
        editable: {
            type: 'text',
            onblur:"submit",
            showbuttons:false,
            noeditFormatter: function (value,row,index) {
                var result={filed:"count",value:1};
                return result;
            },
            validate: function (value) {
                if ($.trim(value) == '') {
                    return '数量不能为空!';
                }
                if (!checkNumber(value)) {
                    return '请输入正整数!';
                }
            }
        }
    }]
});

//根据名称从数据库中查询已有的介质信息
function queryFunction(name, $index){
    var params ={
        name : name
    }
    $.ajax({
        url : url,
        type : "POST",
        data : JSON.stringify(params),
        dataType : "json",
        contentType : "application/json; charset=UTF-8",
        async : true,
        success: function (result) {
            if(result && result.length > 0) {
                var item = result[0];
                var data = {checked:'',name: name ? name : '',direct: item.direct ,count: item.count,id:item.id};
                $('#mediumTable').bootstrapTable('updateRow',{
                    index: $index,
                    row: data
                });
            }
        },
        error: function (XMLHttpRequest, errorInfo, exception) {
            alert("获取介质失败！");
        }
    })
}

//添加行按钮操作
$('#addMyMediums').click(function(){
    $('#mediumTable').bootstrapTable('selectPage', 1); //跳至第一行
    var data = {checked:'', name: '',direct: 1,count: 1}; //按顺序定义新的一行，值为空或者赋默认值
    $('#mediumTable').bootstrapTable('prepend', data); //此方法必须定义所有字段。

});

//删除行按钮操作

$('#delMyMediums').click(function(){

        var ids = $.map($('#mediumTable').bootstrapTable('getSelections'),function(row){

             return row.checked; //选择以复选框为标识，进行删除

        });

        if(ids.length == 0){

             alert("请选择要删除的行");

         }

        $('#mediumTable').bootstrapTable('remove',{ field : 'checked', values : ids });});

var mediumsData = $('#mediumTable').bootstrapTable('getData');//获取介质表格的所有内容

var trLength = $('#mediumTable').bootstrapTable('getOptions').data.length; //获取介质表格的总行数