Editable data display formatter for Bootstrap Table

Since we can't use bootstrap table's formatter and x-editable at the same time we have to use x-editables display function.

by Florian Sauter

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="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="https://rawgit.com/fsauter/bootstrap-table/develop/src/extensions/editable/bootstrap-table-editable.js"></script>
<table data-toggle="table" data-editable-emptytext="This field is empty" data-id-field="id" data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data2/">
  <thead>
    <tr>
      <th data-field="id">Name</th>
      <th data-field="name" data-editable="true" data-editable-display-formatter="nameFormatter">Name</th>
      <th data-field="price" data-editable="true" data-editable-emptytext="For free." data-editable-display-formatter="priceFormatter">Price</th>
    </tr>
  </thead>
</table>

JavaScript

var scope = this;

scope.nameFormatter = function(value) {
  var icon = $(this).data('pk') % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty';
  var markup = '<i class="glyphicon ' + icon + '"></i> ' + value;
  $(this).html(markup);
};

scope.priceFormatter = function(value) {
  var color = '#' + Math.floor(Math.random() * 6777215).toString(16);
  var markup = '<div  style="color: ' + color + '">' +
    '<i class="glyphicon glyphicon-usd"></i>' +
    value.substring(1) +
    '</div>';
  $(this).html(markup);
};

$.fn.editable.defaults.mode = 'inline';
$.fn.editable.defaults.display = function(value, sourceData) {
  var displayFormatterFunction = $(this).data('display-formatter');
  if (displayFormatterFunction) {
    scope[displayFormatterFunction].call(this, value, sourceData);
  } else {
    $(this).html(value);
  }
};