Question

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

根据使用Angular $ http调用从web api收到的数据，任何人都有关于如何动态生成这些列的任何指示。

Answer 1

您应该在$ scope中创建一个数据源数组。然后从http调用填充该数组。最后，在您的视图中，您应该将wijgrid中的data选项设置为该scope属性。网格将自动生成与数组（对象）的数据结构匹配的列。

示例：

$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 ..数据和列的必需格式，并按如下方式分配。元数据将包含列元数据对象的数组。

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

具有角度的Wijmo网格动态列

2 个答案: