bootstrap table 常用方法

获取所有表格数据

var rows=$('#table').bootstrapTable('getData')

获取选中的数据

var selected = $("#table").bootstrapTable('getSelections');

清空表格所有数据

$("#table").bootstrapTable('removeAll')

刷新表格数据

$('#table').bootstrapTable("refresh");

使用合计功能

$('#table').bootstrapTable({
    uniqueId: "id", // 唯一标识id
    showFooter: true,//合计
    columns: [
        {
            field: 'id',
            title: '序号',
            visible: false, //默认隐藏
        }, {
            field: 'money',
            title: '金额',
            formatter: function (value, row, index) {
                return '<input type="number" name="money" value="' + (function () {
                    return !row.money ? '' : row.money
                })() + '"  class="form-control" placeholder="请填写金额" onblur="changeData(' + index + ', this);" />';
            },
            footerFormatter: function (value) {
                var sum = 0;
                $.each(value, function (i, val) {
                    sum += val.money;
                });
                return sum;
            }
        }, {
            title: '操作',
            formatter: function (value, row) {
                var actions = [];
                actions.push('<a class="btn btn-success btn-xs" href="#" onclick="add()"><i class="fa fa-edit"></i>增加</a> ');
                actions.push('<a class="btn btn-success btn-xs" href="#" onclick="remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                return actions.join('');
            },
            footerFormatter: function (value) {
                return '合计';
            }
        }
    ]
});

// 修改数据
function changeData(index, obj) {
    var value = $(obj).val();
    var name = $(obj).attr('name');
    //通过 index 获取指定的行
    var row = $("#table").bootstrapTable('getOptions').data[index];
    //将 input 的值存进 row 中
    row[name] = value;
    //更新指定的行,调用 'updateRow' 则会将 row 数据更新到 data 中,然后再重新加载
    $("#table").bootstrapTable('updateRow', {index: index, row: row});
}

增加行

function add() {
  $('#table').bootstrapTable('selectPage', 1);
  var data = {
    id: 10,
    receipt_number: '100',
    remark: '<input type="text" id="remark'" name="remark'" class="form-control" placeholder="请填写备注" onclick="点击事件()" />'
  };
  //$('#table').bootstrapTable('prepend', data);  // 始终追加到表头
  $('#table').bootstrapTable('append', data);  //  始终追加行后面
}

删除行

// 删除id为1和2的数据
$("#table").bootstrapTable('remove',{
  field:"id", // 每一行的唯一识别
  values:[1,2] // 删除条件数组
});

更新行数据

$('#table').bootstrapTable('updateRow', {
  index: 0, // index从0开始
  row: {
    name: 'XXX',
    age: '20',
  }
});
posted @ 2020-07-24 14:15  卡农的忧伤ろ◆  阅读(1843)  评论(0)    收藏  举报