Search code examples
javascriptjquerybootstrap-table

Populate BootstrapTable x-editable select box based on another column


I have a BootstrapTable select box. I know you can use a function to populate the values in the select box. I'd like that function to change which array it provides based on the value of a second column (called Text_example).

So in my example, if Text_example for that row is 1, the select box should have the following data: [{1:1}]. if Text_example for that row is 2, the select box should have the following data: [{2:2}]

I think my problem is that I don't know how to pass just the row's data to the function get_values as my method seems not to be working.

Full Fiddle: http://jsfiddle.net/goxe6ehg/

var data = [{"Text_example": 1},{"Text_example": 2}];

function get_values(data) {
    if (data['Text_Example'] === 1) {
    return [{1:1}];
  }
  else {
    return [{2: 2}]
  }

}

$('#table').bootstrapTable({
  columns: [
   {
      field: 'Select_example',
      title: 'Select_example',
      editable: {
        type: 'select',
        source:  get_values($('#table').bootstrapTable('getData'))
      }
    },
    {
      field: 'Text_example',
      title: 'Text_example'
    }
  ],
  data: data
});

EDIT: I over-simplified my example. Rather than having a static field for text_example I need it to be a select box, where the value for select_example changes based on what the user has selected in text_example.

Updated JSFiddle: http://jsfiddle.net/4wwv18Lq/4/


Solution

  • You can use the oninit handler on the bootstraptable library.And add the editables by iterating through the data object.

    var data = [{"Text_example": 1},{"Text_example": 2}];
    
    $('#table').on('editable-init.bs.table', function(e){
        var $els =  $('#table').find('.editable');
         $els.each(function(index,value){
                $(this).editable('option', 'source', data[index])
         });
    
    });
    $('#table').bootstrapTable({
      columns: [
       {
          field: 'Select_example',
          title: 'Select_example',
          editable: {
            type: 'select'
          }
        },
        {
          field: 'Text_example',
          title: 'Text_example'
        }
      ],
      data: data
    });
    

    JSfiddle link http://jsfiddle.net/km10z2xe/