bootstrap table 根据id唯一标识查询表格并修改更新查询到的行

首先介绍如何根据唯一标识查询对应的行数据:

//配置table
$("#table-list-webhoo").bootstrapTable({
    ..............//省略一部分配置参数
    uniqueId : 'goodsId',  //这个参数必须得配置,设置唯一标识的对应字段,对应下面columns配置的字段名称
    columns : [{
        title : 'Id',
        field : 'goodsId',
        visible:false,//隐藏此列,这里隐藏了id这个字段
    },{
        title : '序号',
        field : 'xh',
        formatter: function (value, row, index) {
            return index+1;
        }
    },{
        title : '商品名称',
        field : 'goods_name',
    }, {
        title : '编码',
        field : 'code',
    }, {
        title : '规格',
        field : 'goods_spec',
    },{
        title : '单位',
        field : 'unit',
    },{
        title : '单价',
        field : 'sale_price',
    },{
        title : '售价',
        field : 'sale_money',
    },{
        title : '数量',
        field : 'goods_count',
    },{
        title : '小计',
        field : 'goods_money',
        sortable : true
    },{
        title : '操作',
        field : 'opt',
        formatter: function () {
            return '\
                <div class="btn-group btn-group-sm">\
                  <button type="button" class="btn btn-danger">删除</button>\
                </div>';
        }
    }]
  });

使用getRowByUniqueId 获取对应行数据:

var checkData=$("#table-list-webhoo").bootstrapTable('getRowByUniqueId',goodsId);
//goodsId就是您上面设置的唯一标识字段值

修改查询到的行某些字段值:

//修改当前行数据,goodsId就是您上面设置的唯一标识字段值
$("#table-list-webhoo").bootstrapTable('updateByUniqueId',{
   id:goodsId,
   row: {
     goods_count: odCount+1,  //这些字段值请根据您自己的需求去修改
     goods_money:toMoney(Number(checkData.sale_money)*(odCount+1)),
   }
 });
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Table 是一个基于Bootstrap框架的可扩展的表格插件,它可以用于展示数据、排序、过滤等。如果你想在Bootstrap Table中进查询,可以使用它提供的搜索功能。 要在Bootstrap Table中实现搜索功能,需要在HTML代码中添加一个搜索框,并使用Bootstrap Table提供的方法来实现搜索。具体步骤如下: 1. 在HTML中添加搜索框 ``` <div class="input-group"> <input type="text" class="form-control" id="searchInput" placeholder="Search..."> <span class="input-group-btn"> <button class="btn btn-default" type="button" id="searchButton"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> ``` 这段代码中,我们使用了Bootstrap的input-group和glyphicon来创建一个搜索框。搜索框的id为searchInput,搜索按钮的id为searchButton。 2. 在JavaScript中实现搜索功能 ``` $(function() { // 初始化表格 $('#table').bootstrapTable({ // 表格配置 }); // 绑定搜索按钮的点击事件 $('#searchButton').click(function() { // 获取搜索框的内容 var searchText = $('#searchInput').val(); // 使用Bootstrap Table的搜索方法 $('#table').bootstrapTable('search', searchText); }); }); ``` 这段代码中,我们首先初始化了表格,然后在点击搜索按钮时,获取搜索框的内容并使用Bootstrap Table的search方法来搜索匹配的数据。注意,这里的tableBootstrap Table表格id。 以上就是在Bootstrap Table中实现查询的方法。你可以根据自己的需求进定制和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值