首页 > 关于bootstrap table插件的id排序问题

关于bootstrap table插件的id排序问题

在用bootstrap table插件时遇到一个问题,配置如下:

  $('#editTable').bootstrapTable({
        editable:true,
        clickToSelect: true,
        columns: [
                {field:"id",edit:false,title:"序号",align:"center"},
                {field:"choose",checkbox:true,align:"center"},
                {field:"num",title:"数量",align:"center"},
                {field:"price",title:"单价",align:"center"},
                {field:"sum",title:"金额",align:"center"}
                ]
                });
                

我想在删行后,table每行的序号按照“1,2,3...”这样不间断升序排列。

  $('#delBtn').click(function () {                       /*  删行按钮***/
     
  var ids = $.map($('#editTable').bootstrapTable('getSelections'), function (row) {
       return row.id;
    });

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

问题1:如果只对序号td里的textContent进行修改,而不对这个tr对象的id(应该不是id属性,是不是这个插件独有的?)修改,删除的时候就会出现问题,因为删除时需要获取对象id。因此,有没有具体的方法在删除行后,对现有行的序号,重新编排按照“1,2,3...”这样不间断升序排列(例如有序号为1,2,3,4,5的5行,删了第3行后,序号变成1,2,3,4)?

问题2:这个插件有没有具体的方法直接获取tr对象的id( field: 'id'的id ,我也不知道怎么表达,反正不是普通的id属性)之类的参数,例如我想改某行的单价,应该是什么思路?

本人前端初初初初初学者,官方文档貌似不是太懂,希望各位大神解答下,谢谢!


  $('#tradeList').bootstrapTable({
    url: '#',     //请求后台的URL(*)
    method: 'post',           //请求方式(*)
    toolbar: '#toolbar',        //工具按钮用哪个容器
    striped: true,           //是否显示行间隔色
    cache: false,            //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
    pagination: true,          //是否显示分页(*)
    sortable: false,           //是否启用排序
    sortOrder: "asc",          //排序方式
    queryParams: oTableInit.queryParams,//传递参数(*)
    sidePagination: "server",      //分页方式:client客户端分页,server服务端分页(*)
    pageNumber:1,            //初始化加载第一页,默认第一页
    pageSize: 50,            //每页的记录行数(*)
    pageList: [10, 25, 50, 100],    //可供选择的每页的行数(*)
    strictSearch: true,
    clickToSelect: true,        //是否启用点击选中行
    height: 460,            //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
    uniqueId: "id",           //每一行的唯一标识,一般为主键列
    cardView: false,          //是否显示详细视图
    detailView: false,          //是否显示父子表
    columns: [{
      field: 'id',
      title: '序号'
    } ]
  });
【热门文章】
【热门文章】