リストコントロールで任意のフィルタ処理を実行する方法について紹介します。
フィルタ条件
リストコントロールのfilterメソットでは、フィルタ条件（フィルタリングする列、フィルタする値の比較方法、フィルタで使用する値、フィルタのパラメータ設定）を指定して、フィルタを実行することができます。
また、operatorTypeプロパティを使用することで、フィルター操作時にパラメーターの型を自動的に指定された型に変換することができます。設定可能な値（FilterOperatorType列挙体）は、Boolean／Number／String／Dateです。
設定例は以下の通りです。
フィルタ関数
filterメソットの引数にはフィルタ関数を指定することで、任意のフィルタ処理を実行することができます。
以下のサンプルは任意の入力要素に入力された値より大きい値のみを表示するサンプルです。
import '@mescius/inputman/CSS/gc.inputman-js.css';
import { InputMan } from '@mescius/inputman';
import orders from './data';
import './styles.css';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const columns = [
{ name: 'id', label: '商品コード', width: 80 },
{ name: 'product', label: '商品名', width: 200 },
{ name: 'date', label: '受注日', width: 120 },
{ name: 'price', label: '単価', width: 80 },
{ name: 'amount', label: '数量', width: 80 },
];
const gcListBox = new InputMan.GcListBox(document.getElementById('gcListBox'), {
items: orders,
columns: columns,
});
const gcListBox2 = new InputMan.GcListBox(document.getElementById('gcListBox2'), {
items: orders,
columns: columns,
});
const gcNumber = new InputMan.GcNumber(document.getElementById('filterValue'), {
minValue: 0,
});
//フィルタ条件によるフィルタ
function getFilterInfo() {
const filterInfo = [];
if (document.getElementById('filterinfo1').checked) {
filterInfo.push({
name: 'product',
comparator: InputMan.FilterComparator.Contains,
filterString: 'なま'
});
}
if (document.getElementById('filterinfo2').checked) {
filterInfo.push({
name: 'price',
comparator: InputMan.FilterComparator.Between,
params: [100, 200]
});
}
if (document.getElementById('filterinfo3').checked) {
filterInfo.push({
name: "date",
comparator: InputMan.FilterComparator.GreaterThan,
operatorType: InputMan.FilterOperatorType.Date,
params: "2020/1/13"
});
}
return filterInfo.length > 0 ? filterInfo : null;
}
document.getElementById('filterinfo1').addEventListener('change', (e) => {
gcListBox.filter(getFilterInfo());
});
document.getElementById('filterinfo2').addEventListener('change', (e) => {
gcListBox.filter(getFilterInfo());
});
document.getElementById('filterinfo3').addEventListener('change', (e) => {
gcListBox.filter(getFilterInfo());
});
//フィルタ関数によるフィルタ
document.getElementById('fliterBtn').addEventListener('click', () => {
gcListBox2.filter((v) => {
//売上がフィルタ値より大きければ表示する
return v.price * v.amount > gcNumber.value;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>リストコントロール - フィルタ</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function () {
System.import('./src/app');
}
</script>
</head>
<body>
<h3>フィルタ条件を利用したサンプル</h3>
<select id="gcListBox"></select>
<table class="sample">
<tr>
<th rowspan="3">フィルタ条件によるフィルタ</th>
<td>
<label><input type="checkbox" id="filterinfo1">「なま」を含む商品名でフィルタする</label>
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" id="filterinfo2">単価に100～200(境界値を含む)でフィルタを適用</label>
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" id="filterinfo3">受注日に2020/01/13以降(境界値を含まない)でフィルタを適用</label>
</td>
</tr>
</table>
<br>
<h3>フィルタ関数を利用したサンプル</h3>
<select id="gcListBox2"></select>
<table class="sample">
<tr>
<th>フィルタ関数によるフィルタ<br>※入力した売上以上の項目を表示する</th>
<td>
<input id="filterValue"><button id="fliterBtn">実行</button>
</td>
</tr>
</table>
</body>
</html>
.gcim_watermark_null {
color: lightgray
}
.gcim_focused.gcim_watermark_null {
color: lightgray
}
module.exports = [
{ id: 18, product: 'ピリカラタバスコ', date: '2020/01/07', price: 200, amount: 20 },
{ id: 17, product: 'だしこんぶ', date: '2020/01/08', price: 80, amount: 50 },
{ id: 15, product: 'ピュアデミグラスソース', date: '2020/01/10', price: 300, amount: 30 },
{ id: 17, product: 'だしこんぶ', date: '2020/01/10', price: 100, amount: 100 },
{ id: 17, product: 'だしこんぶ', date: '2020/01/12', price: 70, amount: 100 },
{ id: 15, product: 'ピュアデミグラスソース', date: '2020/01/12', price: 450, amount: 30 },
{ id: 18, product: 'ピリカラタバスコ', date: '2020/01/12', price: 180, amount: 20 },
{ id: 85, product: 'なまからし', date: '2020/01/13', price: 150, amount: 40 },
{ id: 84, product: 'なまわさび', date: '2020/01/21', price: 150, amount: 40 },
{ id: 86, product: 'なましょうが', date: '2020/01/20', price: 150, amount: 40 },
];
[gcim-control-appearance="modern"] .gcim_watermark_null {
color: lightgray;
}
[gcim-control-appearance="modern"] .gcim_focused.gcim_watermark_null {
color: lightgray;
}
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
"@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
'@mescius/inputman.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/searchreplace': 'npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/table': 'npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/template': 'npm:@mescius/inputman.richtexteditor/JS/plugins/template/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/wordcount': 'npm:@mescius/inputman.richtexteditor/JS/plugins/wordcount/plugin.js',
'@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
'@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets/styles': 'npm:@mescius/spread-sheets/styles',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
