Bootstrap Table

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<table id="table"></table>

JavaScript

// Boostrap table with local mod of bootstrap-table-editable.js, looking to reaplly formatter options (style and contents) after editable.save. 
// see https://github.com/wenzhixin/bootstrap-table/issues/1824 and NOTES in editable.save below for more info


function cellFormatter(value, row, index) {
var bgColor = "transparent";

  if (value.toLowerCase().indexOf('red') > -1) {
		bgColor = "red";
  }
  
  console.log("cellFormatter running",bgColor);
  
  return {
    css: {
      'background-color': bgColor
    }
  }
}

$(function() {
  $('#table').bootstrapTable({
    idField: 'name',
    url: '/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/',
    columns: [{
      field: 'name',
      title: 'Name'
    }, {
      field: 'stargazers_count',
      title: 'Stars',
      editable: {
        type: 'text'
      }
    }, {
      field: 'forks_count',
      title: 'Forks',
      editable: {
        type: 'text'
      }
    }, {
      field: 'description',
      title: 'Description',
      cellStyle: cellFormatter,
      role: 'fasdf',
      editable: {
        type: 'textarea'
      }
    }]
  });
});









/**

// NOTE - mod of https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/editable/bootstrap-table-editable.js

 * @author zhixin wen <[email protected]>
 * extensions: https://github.com/vitalets/x-editable
 */

!function ($) {

    'use strict';

    $.extend($.fn.bootstrapTable.defaults, {
        editable: true,
        onEditableInit: function () {
            return false;
        },
        onEditableSave: function (field, row, oldValue, $el) {
            return false;
        },
        onEditableShown: function (field, row, $el, editable) {
            return false;
        },
        onEditableHidden: function (field, row, $el, reason) {
            return false;
        }
    });

    $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
        'editable-init.bs.table': 'onEditableInit',
       ...