Wijmo UI for the Web
コードからのフィルタリング
Wijmo ユーザーガイド > ウィジェット > Grid > 概念 > フィルタリング > コードからのフィルタリング

Wijgridでは組み込みのフィルタリング機能が提供されていますが、ユーザー特定のイベント（カスタムボタンのクリックなど）でグリッドの列をフィルタすることも可能です。クイックスタートの例に基づき、wijgridのfilterValueおよびfilterOperatorオプションを使用することでカスタムフィルタを実現できます。以下の手順でカスタムボタンを作成して、クリックイベントでフィルタリングを実装しています。

ソース全体
コードのコピー 
<!DOCTYPE HTML>
<HTML>
<head>
<!-- #Region "references" --> 
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" />

<!--RequireJs-->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128",
        paths: {
            "jquery": "jquery-1.11.1.min",
            "jquery-ui": "jquery-ui-1.11.0.custom.min",
            "jquery.ui": "jquery-ui",
            "jquery.mousewheel": "jquery.mousewheel.min",
            "globalize": "globalize.min",
            "bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
            "knockout": "knockout-3.1.0" //Needed if you use Knockout.
        }
    });
</script>
<!-- #End Region -->
<!-- #Region "js" -->
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
             showFilter: true,
             data: [
                [0, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Nationality"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    });
    function clearFilter() {
        var cols = $("#wijgrid").wijgrid("option", "columns");
        cols[1].filterValue = null;
        cols[1].filterOperator = "noFilter";
        $("#wijgrid").wijgrid("option", "columns", cols);
    }

    function canada() {
        var cols = $("#wijgrid").wijgrid("option", "columns");
        cols[1].filterValue = "Canada";
        cols[1].filterOperator = "Equals";
        $("#wijgrid").wijgrid("option", "columns", cols);
    }

    function us() {
        var cols = $("#wijgrid").wijgrid("option", "columns");
        cols[1].filterValue = "United States";
        cols[1].filterOperator = "Equals";
        $("#wijgrid").wijgrid("option", "columns", cols);
    }

</script>
<!-- #End Region -->
  </head>
<body>
<!-- #Region "markup" -->
<div>Filter
     <button title="clearFilter" onclick="clearFilter()" >Clear</button> 
     <button title="canada" onclick="canada()" >Canada</button> 
     <button title="us" onclick="us()" >United States</button> 
</div>
<table id="wijgrid">
</table>
<!-- #End Region -->
</body>
</HTML>

詳細手順

  1. HTML ファイルの <body> セクションに以下のHTMLを追加することで、グリッドを初期化し、追加するカスタムボタンを定義します。
    HTML
    コードのコピー 
    <div>Filter
     <button title="clearFilter" onclick="clearFilter()" >Clear</button> 
     <button title="canada" onclick="canada()" >Canada</button> 
     <button title="us" onclick="us()" >United States</button> 
</div>
<table id="wijgrid">
</table>

  2. <head> タグ内の参照の下にカスタムボタンの操作を実装するスクリプトを追加します。この例では、wijgridのfilterValueおよびfilterOperatorオプションを使用してカスタムボタンでグリッドの「Nationality」列をフィルタしています。
    スクリプト
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
             showFilter: true,
             data: [
                [0, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Nationality"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    });
    function clearFilter() {
        var cols = $("#wijgrid").wijgrid("option", "columns");
        cols[1].filterValue = null;
        cols[1].filterOperator = "noFilter";
        $("#wijgrid").wijgrid("option", "columns", cols);
    }

    function canada() {
        var cols = $("#wijgrid").wijgrid("option", "columns");
        cols[1].filterValue = "Canada";
        cols[1].filterOperator = "Equals";
        $("#wijgrid").wijgrid("option", "columns", cols);
    }

    function us() {
        var cols = $("#wijgrid").wijgrid("option", "columns");
        cols[1].filterValue = "United States";
        cols[1].filterOperator = "Equals";
        $("#wijgrid").wijgrid("option", "columns", cols);
    }

</script>

  3. HTML ファイルを保存し、ブラウザで開きます。

関連トピック

フィルタリング

参照

wijfilter メソッド
filterOperator フィールド
filterValue フィールド
wijgrid メソッド
columns フィールド
data フィールド
showFilter フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.