[OLAP] カスタムソート

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.olap.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://demo.grapecity.com/wijmo/sample/styles/sample.css">
<div class="container">

  <h3>カスタムソート</h3>
  <p>2つの項目の大小を比較する関数を定義して、ソート方法を変更します。数値を含む文字列をソートすると、既定では1、10、11、・・・、2、20、21、・・・という順番でソートされますが、このサンプルでは、1、2、・・・、10、11、・・・という数値順でソートします。</p>
  <div id="pivotGrid"></div>
  <div id="pivotPanel"></div>
  <form name="form" class="property-panel">
    <label>カスタムソート<input name="sortComparer" type="checkbox" checked></label>
  </form>

</div>

CSS

#pivotPanel {
  width: 300px;
}
#pivotGrid {
  width: 400px;
  height: 400px;
}

JavaScript

var orders = sample.ordersRaw(10000);
for (var i = 0; i < orders.length; i++) {
  orders[i].商品コード = 'P' + orders[i].商品コード;
}

var pivotPanel = new wijmo.olap.PivotPanel('#pivotPanel', {
  itemsSource: orders
});
pivotPanel.rowFields.push('商品コード');
pivotPanel.rowFields[0].sortComparer = naturalCompare;
pivotPanel.columnFields.push('受注日');
pivotPanel.columnFields[0].format = 'EEEE年度';
pivotPanel.valueFields.push('数量');
var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
  itemsSource: pivotPanel
});

// https://stackoverflow.com/questions/15478954/sort-array-elements-string-with-numbers-natural-sort
function naturalCompare(a, b) {
  var ax = [], bx = [];

  a.replace(/(\d+)|(\D+)/g, function(_, $1, $2) { ax.push([$1 || Infinity, $2 || ""]) });
  b.replace(/(\d+)|(\D+)/g, function(_, $1, $2) { bx.push([$1 || Infinity, $2 || ""]) });

  while(ax.length && bx.length) {
    var an = ax.shift();
    var bn = bx.shift();
    var nn = (an[0] - bn[0]) || an[1].localeCompare(bn[1]);
    if(nn) return nn;
  }

  return ax.length - bx.length;
}

document.form.sortComparer.addEventListener('click', function (e) {
  pivotPanel.rowFields[0].sortComparer = e.target.checked ? naturalCompare : null;
  pivotPanel.collectionView.refresh();
});