Wijmo グリッドを使用して動的列を生成する方法を誰かが教えてくれますか? 動的な列を生成する必要があります。そのうちのいくつかは編集可能で、テキストボックス、チェックボックス、またはドロップダウンが含まれている可能性があります。私はAngularを使用しています。
Angular の $http 呼び出しを使用して Web API から受信したデータに基づいてこれらの列を動的に生成する方法については、誰でもポインタを持っています。
$scope にデータソース配列を作成する必要があります。次に、http 呼び出しからその配列を設定します。最後に、ビューで wijgrid のデータ オプションをそのスコープ プロパティに設定する必要があります。グリッドは、(オブジェクトの) 配列のデータ構造に一致する列を自動的に生成します。
例:
$scope.myData = [];
$scope.loadData = function () {
//call angular $http
$scope.myData = result;
}
//on init load Data
loadData();
マークアップ
<wij-grid data="myData"></wij-grid>
より優れたエディターが必要な場合は、特定のデータ型にしたい各列の dataType を割り当てる必要があります。これは、グリッドが列を自動生成している場合には実行されません。データ型を把握するには、結果の最初のレコードをループする必要があります。結果が常に同じである場合 (そうではないように思えます)、マークアップで列を定義できます。
<wij-grid data="myData">
<columns>
<column data-key="ID" data-type="number"></column>
<column data-key="StartDate" data-type="datetime"></column>
<column data-key="Active" data-type="boolean"></column>
</columns>
</wij-grid>
データと列に必要な形式で、Web API コードで JSON を作成し、以下のように割り当てました。メタデータには、列メタ データ オブジェクトの配列が含まれます。
grid = $("#wijgrid").wijgrid({
editingMode: "row",
allowColMoving: true,
allowColSizing: true,
selectionMode: "none",
showFilter: true,
allowSorting: true,
allowPaging: true,
allowEditing: true,
beforeCellEdit: onBeforeCellEdit,
afterCellEdit: onAfterCellEdit,
pageSize: 10,
data: $scope.DataRows,
columns: $scope.MetaData
});