wijgrid ウィジェットは複数の選択モードをサポートしています。実行時に、ユーザーは１つまたは複数のセル、列、行、または範囲を選択できます。例については、Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/grid/Selection）にアクセスし、MVC コントロールエクスプローラの grid > Selection サンプルのライブデモをご覧ください。
以下の手順を実行します。
- ASP.NET MVC 4 Wijmo アプリケーション を作成します。
- ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
- 依存関係をチェックして、プロジェクトが Wijmo の最新バージョンを参照していることを確認します。これらはページの <head> タグ内に配置されている必要があります。Wijmo の最新バージョンの依存関係は http://wijmo.c1.grapecity.com/download/#wijmo-cdn で確認できます。
-
以下のマークアップを、
@RenderBody()のすぐ後のページの <body> タグ内に追加します。ソースビュー コードのコピー<div class="main demo"> <table class="demoTable"> <tr> <td> <table id="demo"> <thead> <tr> <th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th> </tr> </thead> <tbody> <tr> <td>11</td><td>14</td><td>12</td><td>0</td> </tr> <tr> <td>42</td><td>9,8</td><td>10</td><td>0</td> </tr> <tr> <td>72</td><td>34,8</td><td>5</td><td>0</td> </tr> <tr> <td>14</td><td>18.6</td><td>9</td><td>0</td> </tr> <tr> <td>51</td><td>42.4</td><td>40</td><td>0</td> </tr> <tr> <td>41</td><td>7.7</td><td>10</td><td>0</td> </tr> <tr> <td>51</td><td>42.4</td><td>35</td><td>0.15</td> </tr> <tr> <td>65</td><td>16.8</td><td>15</td><td>0.15</td> </tr> <tr> <td>22</td><td>16.8</td><td>6</td><td>0.05</td> </tr> <tr> <td>57</td><td>15.6</td><td>15</td><td>0.05</td> </tr> <tr> <td>65</td><td>16.8</td><td>20</td><td>0</td> </tr> <tr> <td>20</td><td>64.8</td><td>40</td><td>0.05</td> </tr> <tr> <td>33</td><td>2</td><td>25</td><td>0.05</td> </tr> </tbody> </table> </td> <td> <table class="ui-widget ui-widget-content" rules="all" id="demoLogTable"> <caption class="ui-widget-header">selection log</caption> <tbody> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td></tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> </tbody> </table> </td> </tr> </table> <div class="demo-options"> <div class="option-row"> <label for="selectionMode">Selection mode</label> <select id="selectionMode"> <option>singleCell</option> <option>singleRow</option> <option>singleColumn</option> <option>singleRange</option> <option>multiColumn</option> <option>multiRow</option> <option>multiRange</option> </select> </div> </div> </div> <style type="text/css"> .demoTable > tbody > tr > td { vertical-align:top; width:400px; } #demoLogTable { table-layout:fixed; margin-left:20px; width: 100%; } </style>このマークアップは、２つのテーブル用のコンテンツと選択ドロップダウンボックスを追加します。１つのテーブルはデータが表示されるグリッドに使用し、もう一つのテーブルはグリッドで選択が行われた項目を表示します。
- 前の手順で追加した
</div>終了タグの後に、以下の jQuery スクリプトを入力して wijgrid ウィジェットを初期化します。ソースビュー コードのコピー<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#demo").wijgrid({ selectionMode:"singleCell", columns: [ { dataType:"number", sortDirection: "ascending", dataFormatString:"n0" }, { dataType:"currency" }, { dataType: "number", dataFormatString: "n0" }, { dataType: "number", dataFormatString: "p0" } ], selectionChanged:onSelectionChanged }); function onSelectionChanged() { var sc = $("#demo").wijgrid("selection").selectedCells(); var log = $("#demoLogTable"); log.find("td").removeClass("ui-state-highlight").html("<span> </span>"); for (var i = 0, len = sc.length(); i < len; i++) { var cellInfo = sc.item(i); var logCell = $(log[0].tBodies[0].rows[cellInfo.rowIndex()].cells[cellInfo.cellIndex()]); logCell.addClass("ui-state-highlight").text(cellInfo.value().toString()); } } $("#selectionMode").change(function (e) { $("#demo").wijgrid("option", "selectionMode", $(e.target).val()); }); }); </script>これは、グリッドとドロップダウンボックスを初期化します。
このトピックの作業結果
［F5］を押してアプリケーションを実行し、ドロップダウンボックスから選択メソッドを選択して、グリッドでセルを選択します。選択がテーブルに反映されていることを確認します。
関連トピック