angularjs - 带角度的 Wijmo 网格动态列

Question

有人可以指导我如何使用 Wijmo 网格生成动态列。我需要生成动态列，其中一些可能是可编辑的，并且可能包含文本框、复选框或下拉列表。我正在使用角。

任何人都知道如何根据使用 Angular $http 调用从 web api 接收到的数据动态生成这些列。

Answer 1

您应该在 $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>

Answer 2

我在 web api 代码上形成了 JSON ..in 数据和列所需的格式并分配如下。元数据将包含列元数据对象的数组。

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
                 });