wijgrid ウィジェットは、ユーザーによるデータの選択、編集、ソート、スクロール、フィルタリング、およびグループ化のインタラクティブ操作が可能な表形式のデータグリッドです。高度にカスタマイズ可能なグリッドを使用すると、データをより理解しやすくし、より効果的に視覚化できます。

wijgrid は、テーブル DOM 要素を使用します。wijgrid ウィジェットの作成に使用されるマークアップは次のようになります。

<table></table> 

wijgrid がテーブル自身をデータソースとして使用する場合、テーブルにデータ行と、オプションで列ヘッダーを格納する <thead> セクションが含まれている必要があります。たとえば、次のようになります。

<table class = "table1">
    <thead>
        <tr>
            <th>列0</th>
            <th>列1</th>
            <th>列N</th>
        </tr>
    </thead>
    <tbody>
        <tr>
  <td>セル00</td>
  <td>セル01</td>
  <td>セル0N</td>
        </tr>
<tr>
  <td>セル10</td>
  <td>セルN0</td>
  <td>セルNN</td>
        </tr>
    </tbody>
</table>

セルは colspan および／または rowspan 属性を含むことができないため、セルと行の属性とスタイルは無視されます。

上でテーブルを追加し、次のコードで、グリッドを表示する ビューの .cshtml ファイル内で wijgrid を初期化できます。

$("#table-element").wijgrid({     
data： [[0, "a"], [1, "b"], [2, "c"]] 
});

ここで、wijgrid の allowPaging と allowSorting オプションを使用し、ページングと列ソートを許可します。

<script type="text/javascript">
    $(document).ready(function () {
        $(".table1").wijgrid({
            allowPaging: true,
            allowSorting: true
          }); 
    });
</script>

MVC アプリケーションを実行すると、wijgrid はこのような表示になります。

関連項目：

wijgrid の詳細については、Wijmo 製品マニュアルをご覧ください。

• Wijgrid

Copyright © GrapeCity inc. All rights reserved.