Add class on <tr> by using <th>'s attr. Example : date picker...

[robiinho]

Hello,

i'm not comfortable by committing at the moment. In case some one need the same purpose. For a project i needed to add classes on editable , to have a date picker. Then launch the script. So i had a function when edition is started.

1/ Add class in attr <th bstable-class="date"> 2/ callbackOnEdit

var defaults = {
      editableColumns: null,          // Index to editable columns. If null all td will be editable. Ex.: "1,2,3,4,5"
      $addButton: null,               // Jquery object of "Add" button
      callbackOnEdit: function() {},          // Called after editing (accept button clicked)
      onEdit: function() {},          // Called after editing (accept button clicked)
      onBeforeDelete: function() {},  // Called before deletion

3/ _rowEdit : get th data class called bstable-class

_rowEdit(button) {                  
  // Indicate user is editing the row
    let $currentRow = $(button).parents('tr');       // access the row
    console.log($currentRow);
    let $cols = $currentRow.find('td');              // read rows
    console.log($cols);
    if (this.currentlyEditingRow($currentRow)) return;    // not currently editing, return
    //Pone en modo de edición
    this._modifyEachColumn(this.options.editableColumns, $cols, function($td) {  // modify each column
      let th = $td.closest('table').find('th').eq($td.index());
      let th_class = th.attr("bstable-class");
      let content = $td.html();             // read content
//      console.log(content);
      let div = '<div style="display: none;">' + content + '</div>';  // hide content (save for later use)
      let input = '<input class="form-control input-sm '+th_class+'" data-original-value="' + content + '" value="' + content + '">';
      $td.html(div + input);                // set content
    });
    this._actionsModeEdit(button);
  }

4/ Then i needed to reload onEdit

  _addOnClickEventsToActions() {
    let _this = this;
    // Add onclick events to each action button
    this.table.find('tbody tr #bEdit').each(function() {let button = this; button.onclick = function() {_this._rowEdit(button); _this.options.callbackOnEdit();} });

[CraftingGamerTom]

Hey @robiinho , Thanks or your contribution to the project. I'd like to better understand the feature that you'd like added. I find it easiest to understand when the feature you'd like is described in an abstract way then dive further into a specific example.

Also if you implemented the feature (which it seems you have) its okay to create pull request - in fact it is encouraged, this way developers can easily view your changes and try out the new feature locally.

From what I can tell you'd like a column in each row to have a class applied to it dynamically? Is that all, or are there more requirements?

[robiinho]

Hi @CraftingGamerTom , succeded to find the way to edit using gui and create a pull request. hope the explainations will be better there.

To sum up, i add class on input form to validate value or as in my example use a date picker instead typing.