BootStrapEditTable编辑列,获取行的所有值

2025-11-07 01:51:09

1、引入bootstarp edittable 的 js,css 文件:

<link href="${basePath}/STATIC/plugins/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">

<script src="${basePath}/STATIC/plugins/bootstrap3-editable/js/bootstrap-table-editable.js"></script>

<script src="${basePath}/STATIC/plugins/bootstrap3-editable/js/bootstrap-editable.js"></script>

注意:bootstrap-table-editable.js  不属于 bootstrap3-editable 里面,是第三方或个人扩展的,可以从网上下载。

2、特定的列进行行内编辑:

    field: 'autualFinanceAmount',

            title: '实际融资金额(万元)',

            width: 160,

            align: 'center',

            formatter:function(value,row,index){

            if(value == null || value == ''){

            return "-";

            }

            return value;

            },

        editable: {

                type: 'text',

                title: '实际融资金额',

                validate: function (v) {

                    if (!v) return '实际融资金额不能为空';

                    //正则校验输入格式:最多两位小数。

                    var patrn=/^([1-9]\d*\.\d{1,2}|0\.\d[1-9]|[1-9]\d*)$/;

                if(!patrn.test(v)){

                return '输入格式:最多两位小数';

                }

               

                }

            }

3、当某列编辑完成后,需要对当前列所在的行进行修改操作:

 $("#grid").bootstrapTable({

     url:'',

     ……

     …… //其他属性

    columns:[{

        field:'rowId',

        title:'序号',

        width:30,

        align: 'center',

        formatter:function(value,row,index){

            row.rowId = index;

            return index+1;

        }

       …… //其他列

     }],

   onEditableSave: function (field, row, oldValue, $el) {

  $table = $('#grid').bootstrapTable({});

  $table.bootstrapTable('updateRow', {index: row.rowId, row: row});

    }

注意:黑色粗体字就是新增的代码,表示在列编辑完成后,对当前列所在的行进行修改。

index 表示该行所在的索引。由于onEditableSave函数的参数中没有index,只能自己特殊处理了。看到在columns属性中,有一个field:'rowId’就是自己处理的,rowId赋给row。

4、如果你的列中有

formatter:function(value,row,index){} 函数,

在onEditableSave 方法执行完成后,该函数会重新执行,这样就会把修改后的列的值重新拿到进行处理。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢