ComponentOne Studio MVC5 Classic ヘルプ
カスタムデータパーサー
MVC Classic ウィジェット > Wijgrid > カスタムデータパーサー

データを解析するために wijgrid ウィジェットにカスタムデータパーサーを簡単に追加できます。例については、Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/grid/CustomDataParsers）にアクセスし、MVC コントロールエクスプローラの grid > CustomDataParsers サンプルのライブデモをご覧ください。

以下の手順を実行します。

  1. ASP.NET MVC 5 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. 依存関係をチェックして、プロジェクトが Wijmo の最新バージョンを参照していることを確認します。これらはページの <head> タグ内に配置されている必要があります。Wijmo の最新バージョンの依存関係は http://wijmo.c1.grapecity.com/download/#wijmo-cdn で確認できます。
  4. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
    ソースビュー
    コードのコピー 
    <div class="main demo">
    <table id="demo">
        <thead>
            <tr>
                <th>Boolean</th><th>Boolean Parsed</th><th>Number</th><th>Number Parsed</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>off</td><td>off</td><td>1</td><td>1</td>
            </tr>
            <tr>
<td>on</td><td>on</td><td>2</td><td>2</td>
            </tr>
            <tr>
                
<td>off</td><td>off</td><td>1993</td><td>1993</td>
            </tr>
            <tr>
                <td>off</td><td>off</td><td>2015</td><td>2015</td>
            </tr>
            <tr>
                <td>on</td><td>on</td><td>100</td><td>100</td>
            </tr>
        </tbody>
</table>
</div>

    このマークアップは１つのテーブル用のコンテンツを追加します。

  5. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijgrid ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
      <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var customBoolParser = {
            // DOM→ブール
                parseDOM:function (value, culture, format, nullString) {
                return this.parse(value, culture, format, nullString);
            },
            // 文字列/ブール→ブール
                parse:function (value, culture, format, nullString) {
                if (typeof (value) === "boolean") {
                    return value;
                }
                if (typeof (value) === "string") {
                    value = $.trim(value);
                }
                if (!value || value === " " || value === nullString) {
                    return null;
                }
                switch ($.trim(value.toLowerCase())) {
                    case "off":return false;
                    case "on":return true;
                }
                return NaN;
            },
            // ブール→文字列
                toStr:function (value, culture, format, nullString) {
                return value ?"on" :"off";
            }
            };            
            $("#demo").wijgrid({
                allowSorting:true,
                columns: [
                    {},
                    { dataType: "boolean", dataParser: customBoolParser },
                    { dataType: "number", dataFormatString: "n0" },
                    { dataType: "number", dataParser: customRomanParser }
                ]
            });
        });
        function customRomanParser() {
            // DOM→数値
            this.parseDOM = function (value, culture, format, nullString) {
                return this.parse(value.innerHTML);
            },
            // 文字列/数値→数値
            this.parse = function (value, culture, format, nullString) {
                if (typeof (value) === "number" && (value === 0 || isNaN(value))) {
                    return NaN;
                }
                if (!value || (value === " ") || (value === nullString)) {
                    return null;
                }
                if (!isNaN(value)) {
                    return parseInt(value);
                }
                value = roman(value);
                return !value ?NaN :value;
            },
            // 数値→文字列
            this.toStr = function (value, culture, format, nullString) {
                if (value === null) {
                    return nullString;
                }
                return roman(value);
            };
            var arab_nums = [1, 4, 5, 9, 10, 40, 50, 90, 100, 400, 500, 900, 1000];
            var roman_nums = ['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'XC', 'C', 'CD', 'D', 'CM', 'M'];
            function roman(value) {
                if (typeof (value) === "number") {
                    return (function (arab) {
                        var roman = "";
                        for (var i = 12; arab > 0; ) {
                            if (arab >= arab_nums[i]) {
                                roman += roman_nums[i];
                                arab -= arab_nums[i];
                            } else {
                                i--;
                            }
                        }
                        return roman;
                    })(value);
                }
                else {
                    return (function (roman) {
                        roman = roman.toUpperCase();
                        var arab = 0;
                        for (var i = 12, pos = 0, len = roman.length; i >= 0 && pos < len; ) {
                            if (roman.substr(pos, roman_nums[i].length) === roman_nums[i]) {
                                arab += arab_nums[i];
                                pos += roman_nums[i].length;
                            }
                            else {
                                i--;
                            }
                        }
                        return arab;
                    })(value);
                }
            }
        }
    </script>

    これにより、グリッドにデータパーサーが設定されます。

このトピックの作業結果

[F5］を押してアプリケーションを実行し、グリッドの２列目と４列目にデータパーサーが適用されていることを確認します。

 

 

Copyright © GrapeCity inc. All rights reserved.