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(); });
<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>