有人可以指导我如何使用 Wijmo 网格生成动态列。我需要生成动态列,其中一些可能是可编辑的,并且可能包含文本框、复选框或下拉列表。我正在使用角。
任何人都知道如何根据使用 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 ..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
});