Search code examples
javascripttwitter-bootstrapbackbone.jsbootstrap-table

how to use bootstrap mergeCells dynamically in backbone.js


I have a function which creates a bootstrap table and i have to merge only specific columns in that table dynamically.

 this.$('#Table1').bootstrapTable({
        striped: false,
        minimumCountColumns: 2,
        smartDisplay:true,
        clickToSelect: false,
        columns:[
             {
                field:'Key2',
                title: $.t('report:'+code+'.Col2'),
                align: 'left',
                valign: 'middle', 
                sortable: true,
                events : this.linkEvents
                formatter :this.linkFormatter
             }
        ]
     });

linkEvent function:

linkEvents: {
        'onPostBody #Table1': function(e,value,row,index) {
        console.log("Inside post-body event");
        $('#Table1').bootstrapTable('mergeCells',{
        index:6,
        colspan:2
        });
        }
        }

even the above code doesnt working it is not coming inside the mergeCells method. Please help me on this..


Solution

  • Finally found the answer with the help of @Frogmouth(really great support).. change the code as following :

    var keys=[];
    this.$('#Table1').bootstrapTable({
            striped: false,
            minimumCountColumns: 2,
            smartDisplay:true,
            clickToSelect: false,
            columns:[
                 {
                    field:'Key2',
                    title: $.t('report:'+code+'.Col2'),
                    align: 'left',
                    valign: 'middle', 
                    sortable: true,
                    formatter :function(value, row, index){
                               var rowValue = row.Data.Key2;
                               if(rowValue.trim()==''){ // if column value is empty those columns have to be merged
                                keys.push(index);
                               }                        
                               return row.Data.detailIndKey2;
                               }
                 }
            ]
         });
    

    //no need of linkEvents function. Instead use jquery

    $(function () { 
    $('#Table1').on('post-body.bs.table', function (e, data) {
    for(var i=0;i<keys.length;i++){
    $('#Table1').bootstrapTable('mergeCells',{
    index:keys[i], //for dynamic keys
    field:'Key1',
    colspan:4 // how many columns have to be merged.
    });
    }
    }); 
    });
    

    thanks