bootstrap-table加载数据序号自增实现

最新推荐文章于 2024-06-18 16:10:07 发布

原创最新推荐文章于 2024-06-18 16:10:07 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

web前端问题分享专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在初始化和动态加载数据时，如何在Bootstrap表格中实现序号自增的方法，包括使用append追加数据和load加载数据两种情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化表格时，序号自增实现方法：

$("#table-list-webhoo").bootstrapTable({
    .........   //省略了相应的参数配置
    columns : [ {  //序号自增实现方法
        title : '序号',
        field : 'xh',
        formatter: function (value, row, index) {
            return index+1;
        }
    },{
        title : '商品名称',
        field : 'goods_name',
    }, {
        title : '编码',
        field : 'code',
    }, 
    ..........
    ,{
        title : '操作',
        field : 'opt',
        formatter: function () {
            return '\
                <div class="btn-group btn-group-sm">\
                  <button type="button" class="btn btn-danger">删除</button>\
                </div>';
        }
    }]
  });

表格数据动态加载和追加的序号自增实现方法（append是追加数据，load是加载数据）:

$("#table-list-webhoo").bootstrapTable('append', [{
       xh:function (value, row, index) {
           return index+1;
       },
       goods_name:dataGoods.goodsName,
       code:dataGoods.goodsCode,
       goods_spec:dataGoods.goodsSpec,
       unit:"件",
       sale_price:dataGoods.salePrice,
       sale_money:dataGoods.salePrice,
       goods_count:1,
       goods_money:dataGoods.salePrice,
       opt:function () {
           return '\
               <div class="btn-group btn-group-sm">\
                 <button type="button" class="btn btn-danger">删除</button>\
               </div>';
       }
     }]);