Easy Grid Formatter

by zwif_

HTML

<table id="dg" class="easyui-datagrid" title="Format DataGrid Columns" style="width:700px;height:250px" data-options="rownumbers:true,singleSelect:true,iconCls:'icon-ok',data:griddata,method:'get', onLoadSuccess:prepareData">
  <thead>
    <tr>
      <th data-options="field:'itemid',width:80">Item ID</th>
      <th data-options="field:'productid',width:100">Product</th>
      <th data-options="field:'listprice',width:80,align:'right',formatter:formatPrice">List Price</th>

      <th data-options="field:'listprice2',width:80,align:'right',formatter:formatPriceToWords">List Price</th>
      <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
      <th data-options="field:'attr1',width:240">Attribute</th>
      <th data-options="field:'status',width:60,align:'center'">Status</th>
    </tr>
  </thead>
</table>


<table id="mytable">
  
</table>

CSS

</style> 
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  
  
    
<style>

JavaScript

function prepareData(data) {

  data.rows = data.rows.map(function(row){
  	row['listprice2'] = row.listprice;
    return row;
  })

  $('#dg').datagrid('load',data);
}

function formatPrice(val, row) {
  if (val < 30) {
    return '<span style="color:red;">(' + val + ')</span>';
  } else {
    return val;
  }
}

function formatPriceToWords(val, row) {

  console.log(toWords(val))
  return toWords(val)
}

var th = ['', 'thousand', 'million', 'billion', 'trillion'];
var dg = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var tn = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
var tw = ['twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];

function toWords(s) {
  s = s.toString();
  s = s.replace(/[\, ]/g, '');
  if (s != parseFloat(s)) return 'not a number';
  var x = s.indexOf('.');
  if (x == -1) x = s.length;
  if (x > 15) return 'too big';
  var n = s.split('');
  var str = '';
  var sk = 0;
  for (var i = 0; i < x; i++) {
    if ((x - i) % 3 == 2) {
      if (n[i] == '1') {
        str += tn[Number(n[i + 1])] + ' ';
        i++;
        sk = 1;
      } else if (n[i] != 0) {
        str += tw[n[i] - 2] + ' ';
        sk = 1;
      }
    } else if (n[i] != 0) {
      str += dg[n[i]] + ' ';
      if ((x - i) % 3 == 0) str += 'hundred ';
      sk = 1;
    }
    if ((x - i) % 3 == 1) {
      if (sk) str += th[(x - i - 1) / 3] + ' ';
      sk = 0;
    }
  }
  if (x != s.length) {
    var y = s.length;
    str += 'point ';
    for (var i = x + 1; i < y; i++) str += dg[n[i]] + ' ';
  }
  return str.replace(/\s+/g, ' ');
}


var griddata = {
  total: 28,
  rows: [{
      productid: "FI-SW-01",
      productname: "Koi",
      unitcost: "10.00",
      status: "P",
      listprice: "36.50",
      attr1: "Large",
      itemid: "EST-1"
    },
    {
      productid: "K9-DL-01",
      productname: "Dalmation",
      unitcost: "12.00",
      status:...