[FlexGrid] プログラムからフィルターを適用する方法

by sarunokoshikake

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/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/cultures/wijmo.culture.ja.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.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
■条件フィルタによるフィルタリング<br />
<div id="FlexGrid1"></div><br />
<br />
■値フィルタによるフィルタリング<br />
<div id="FlexGrid2"></div><br />

JavaScript

// ■条件フィルタによるフィルタリング
var grid1 = new wijmo.grid.FlexGrid('#FlexGrid1');
// データの設定
grid1.itemsSource = createData(30);

// フィルタの取得
var filter1 = new wijmo.grid.filter.FlexGridFilter(grid1);
// カラムフィルタの取得（4列目のフィルタ）
var columnFilter1 = filter1.getColumnFilter(grid1.columns[3]);
// 抽出条件の指定
// 1000以上
columnFilter1.conditionFilter.condition1.value = 1000;
columnFilter1.conditionFilter.condition1.operator = wijmo.grid.filter.Operator.GE;
// かつ
columnFilter1.and = true;
// 20000以下
columnFilter1.conditionFilter.condition2.value = 20000;
columnFilter1.conditionFilter.condition2.operator = wijmo.grid.filter.Operator.LE;
// フィルタの適用
filter1.apply();


// ■値フィルタによるフィルタリング
var grid2 = new wijmo.grid.FlexGrid('#FlexGrid2');
// データの設定
grid2.itemsSource = createData(30);

// フィルタの取得
var filter2 = new wijmo.grid.filter.FlexGridFilter(grid2);
// カラムフィルタの取得（2列目のフィルタ）
//var columnFilter2 = filter2.getColumnFilter(grid2.columns[1]);
// 抽出条件の指定
// 小料理なんごく と 割烹ふじい を選択
columnFilter2.valueFilter.showValues = new Object({小料理なんごく:true, 割烹ふじい:true});
// フィルタの適用
//filter2.apply();


function createData(count) {
    var data = [];
    var customers = '小料理なんごく,割烹ふじい,海鮮料理くじら,居酒屋ななべえ,酒蔵でん,寿ストアー,温泉レストラン,大和マーケット,東海道スーパー,小町ストアー'.split(',');
    for (var i = 0; i < count; i++) {
        data.push({
            受注コード: i,
            会社名: customers[random(customers.length)],
            受注日: new Date(Date.now() - random(1000000000)),
            金額: random(1000) * 100,
            出荷済: random(2) === 0
        });
    }
    return data;
}

function random(max) {
    return Math.floor(Math.random() * max);
}