Динамические столбцы сетки Wijmo с угловыми

Может ли кто-нибудь рассказать мне, как я могу создавать динамические столбцы с помощью сетки Wijmo. Мне нужно создать динамические столбцы, некоторые из которых могут быть редактируемыми и могут содержать текстовое поле, флажок или раскрывающийся список. Я использую Ангуляр.

У кого-нибудь есть какие-либо указания о том, как динамически генерировать эти столбцы на основе данных, полученных из веб-API, с помощью вызова Angular $http.


angularjs wijmo
person user2817774    schedule 16.10.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны создать массив источников данных в $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>

Если вам нужны лучшие редакторы, вам нужно назначить тип данных каждого столбца, для которого вы хотите иметь определенный тип данных. Это не делается, когда сетка автоматически создает столбцы. Вам придется перебрать первую запись в результатах, чтобы определить тип данных. Если результаты всегда одинаковы (а похоже, что это не так), вы можете определить столбец в разметке.

<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>
person Banzor    schedule 17.10.2013

arrow_upward
0
arrow_downward

Я сформировал JSON в коде веб-API... в требуемом формате для данных и столбцов и назначил его, как показано ниже. Метаданные будут содержать массив объектов метаданных столбца.

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
                 });
person user2817774    schedule 04.06.2014