Skip to main content

Bootstrap Table 实现根据主表被选中的记录,动态更



效果:

在主表选择获取取消选择任何记录,从表都会根据当前选择的记录实时更新结果。

同时不受全选,翻页,切换页面记录数的影响。

 

实现:

HTML:

主表:

     Table标签需要设置如下属性:

data-unique-id="serial_number" -- 设置当前表的唯一键字字段 (只能设置一个字段,不支持多个字段为唯一键字

data-click-to-select="true"   -- 设置可以通过点击整行来触发选择。

data-maintain-selected="true" -- 设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项   

    

      th 标签,需要设置每一列的字段名,同时还需要设置一个checkbox列。

    

 <</span>th data-field="selected" data-checkbox="true"></</span>th>

从表:

     必须设置的属性是这个表的唯一键字字段

data-unique-id="sku"

 

JavaScript:

为Table 的check相关的4个事件设置事件侦听。


事件说明

 

       $('#select_warranty_bidding_list').bootstrapTable()

          .on('check.bs.table'function(erow) {

            calculateProduct();

          })

          .on('uncheck.bs.table'function(erow) {

            calculateProduct();

          })

          .on('check-all.bs.table'function(erows) {

            calculateProduct();

          })

          .on('uncheck-all.bs.table'function(erows) {

            calculateProduct();

          })

 

事件处理方法:

获取主表的所有已选择记录,按照一定的规则,append或者update到从表。操作之前先remove 从表所有记录。

      function calculateProduct() {

        var table_select $('#select_warranty_bidding_list');

        var to_prd_tb $('#product_into');

        //移除所有的记录

        to_prd_tb.bootstrapTable('removeAll');

        //获取被选择的所有行记录

        var selectedList table_select.bootstrapTable('getAllSelections');

        for(var row 0; row selectedList.length; row++) {

          var prd_info eval_r(selectedList[row].product_info);

          for(var 0; i prd_info.length; i++) {

            //判断SKU是否已存在

            var to_prd_row to_prd_tb.bootstrapTable('getRowByUniqueId', prd_info[i].sku);

            if(null == to_prd_row) { // 存在则更新,否则追加

              to_prd_tb.bootstrapTable('append', {

                skuprd_info[i].sku,

                sku_nameprd_info[i].sku_name,

                quantityprd_info[i].quantity,

                periodprd_info[i].period

              });

            } else {

              to_prd_tb.bootstrapTable('updateByUniqueId', {

                idprd_info[i].sku,

                row{

                  skuto_prd_row.sku,

                  sku_nameto_prd_row.sku_name,

                  quantityto_prd_row.quantity prd_info[i].quantity,

                  periodto_prd_row.period

                }

              });

            }

          }

        }

      }

 

遇到的坑:

1) Table的事件的写法,只支持JQuery的写法,不支持事件=functions的写法。

    

// 下面的写法不支持

$('#warranty_bidding_list').bootstrapTable().onCheck=functions(row){};

$('#warranty_bidding_list').bootstrapTable({onCheck:function(row){});

2) 一开始想通过check和uncheck事件来增加或更新删除从表记录,但发现默认Table在翻页或者切换分页条数的时候,会取消所有行的已选择状态。这样会导致check之后,没有办法再uncheck。

        该问题通过找到了Table的data-maintain-selected   属性解决。

3) checkAll和unCheckAll事件触发的时候会把已check或者已uncheck的行也算到当前影响的行,因此会导致行的统计重复。

        通过重新设计算法,不再根据当前事件影响行来更新从表数据。而是在每次check或uncheck事件触发的时候,根据主表的已选择记录,每次重新计算所有的数据并更新到从表。