Во framawork 'LUMX' возникла проблема с компонетном "data-table"
Пытаюсь запустить демо-пример с офф. сайта, но получается с большим трудом.
Удалось запустить отображение данных в "data-table", но не работает сортировка по полям, а также не появляются дополнительные кнопки после открыживания записей (для редактирования и удаления). Это то как у меня работает: http://codepen.io/okuznetsov/pen/EZBGGZ А это в примере на офф. сайте: http://ui.lumapps.com/components/data-table Весь день тыкаюсь, но особо не продвинулся. Демо лежит здесь - https://github.com/lumapps/lumX/ Мой index.html <div ng-app="notes"> <div ng-controller="MainController"> <div class="toolbar has-divider has-divider--dark"> <div class="toolbar__label pl"> <span>{{ selectedRows.length || 0 }} selected item(s) </span> </div> <div class="toolbar__right"> <lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="selectedRows.length === 1"> <i class="mdi mdi-pencil"></i> </lx-button> <lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="selectedRows.length >= 1"> <i class="mdi mdi-delete"></i> </lx-button> </div> </div> <lx-data-table id="lolo" lx-selectable="true" lx-thead="dataTableThead" lx-tbody="dataTableTbody"></lx-data-table> </div> </div> Мой app.js (function(){ var app = angular .module('notes', ['lumx', 'lumx.data-table', 'ngSanitize']); app.controller('MainController', ['$scope', '$http', '$log', function($scope, $http, $log) { $scope.notesContent = ''; $scope.dataTableThead = [ { name: 'dessert', label: 'Dessert', sortable: true }, { name: 'calories', label: 'Calories', sortable: true }, { name: 'fat', label: 'Fat (g)', sortable: true, sort: 'asc' }, { name: 'comments', label: 'Comments', icon: 'comment-text', sortable: false }]; $scope.advancedDataTableThead = angular.copy($scope.dataTableThead); $scope.advancedDataTableThead.unshift( { name: 'image', format: function(row) { return '<img src="' + row.image + '" width="40" height="40" class="img-round">'; } }); $scope.dataTableTbody = [ { id: 1, image: '/images/placeholder/1-square.jpg', dessert: 'Frozen yogurt', calories: 159, fat: 6.0, comments: 'Lorem ipsum' }, { id: 2, image: '/images/placeholder/2-square.jpg', dessert: 'Ice cream sandwich', calories: 237, fat: 9.0, comments: 'Lorem ipsum', lxDataTableDisabled: true }, { id: 3, image: '/images/placeholder/3-square.jpg', dessert: 'Eclair', calories: 262, fat: 16.0, comments: 'Lorem ipsum' }]; $scope.$on('lx-data-table__selected', updateActions); $scope.$on('lx-data-table__unselected', updateActions); $scope.$on('lx-data-table__sorted', updateSort); //////////// function updateActions(_event, _dataTableId, _selectedRows) { if (_dataTableId === 'lolo') { $scope.selectedRows = _selectedRows; } } function updateSort(_event, _dataTableId, _column) { $scope.dataTableTbody = $filter('orderBy')($scope.dataTableTbody, _column.name, _column.sort === 'desc' ? true : false); } }]); })(); |
okuznetsov1,
Где инжект фильтра $filter? |
Честно говоря мало что понял по поводу этого фильтра из офф источника.
у себя в коде сделал так (но не на что не повлияло): app.controller('MainController', ['$filter', '$scope', 'LxDataTableService', '$http', '$log', function($filter, $scope, LxDataTableService, $http, $log) { ................ } Вообще вот его инжект из демо с офф. сайта: (function() { 'use strict'; angular .module('Controllers') .controller('DemoDataTableController', DemoDataTableController); DemoDataTableController.$inject = ['$filter', '$scope']; function DemoDataTableController($filter, $scope) { var vm = this; vm.dataTableThead = [ { name: 'dessert', label: 'Dessert', sortable: true }, { name: 'calories', label: 'Calories', sortable: true }, { name: 'fat', label: 'Fat (g)', sortable: true, sort: 'asc' }, { name: 'comments', label: 'Comments', icon: 'comment-text', sortable: false }]; vm.advancedDataTableThead = angular.copy(vm.dataTableThead); vm.advancedDataTableThead.unshift( { name: 'image', format: function(row) { return '<img src="' + row.image + '" width="40" height="40" class="img-round">'; } }); vm.dataTableTbody = [ { id: 1, image: '/images/placeholder/1-square.jpg', dessert: 'Frozen yogurt', calories: 159, fat: 6.0, comments: 'Lorem ipsum' }, { id: 2, image: '/images/placeholder/2-square.jpg', dessert: 'Ice cream sandwich', calories: 237, fat: 9.0, comments: 'Lorem ipsum', lxDataTableDisabled: true }, { id: 3, image: '/images/placeholder/3-square.jpg', dessert: 'Eclair', calories: 262, fat: 16.0, comments: 'Lorem ipsum' }]; $scope.$on('lx-data-table__selected', updateActions); $scope.$on('lx-data-table__unselected', updateActions); $scope.$on('lx-data-table__sorted', updateSort); //////////// function updateActions(_event, _dataTableId, _selectedRows) { if (_dataTableId === 'lolo') { vm.selectedRows = _selectedRows; } } function updateSort(_event, _dataTableId, _column) { vm.dataTableTbody = $filter('orderBy')(vm.dataTableTbody, _column.name, _column.sort === 'desc' ? true : false); } } })(); |
okuznetsov1,
Сортировка заработала http://codepen.io/anon/pen/NdQMaL. По кнопочкам редактирования, картинкам и т.д. нужно scss/css библиотеки подключать: Material Design, Bourbon... |
> по сортировке:
спасибо > по поводу кнопочек редактирования и удаления изначально планировал как-то так реализовывать (т.е. по клику вызывать функцию и дальше уже обрабатывать) <lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="selectedRows.length === 1" ng-click="editCell()"> <i class="mdi mdi-pencil"></i> </lx-button> Но вы сказали, что можно с помощью scss/css библиотек: Material Design, Bourbon. Вы можете дать ссылку на документацию по этому поводу или показать на примере (хотя бы схематично) как реализовывается, например, редактирование в одной из ячеек таблицы? |
Цитата:
Цитата:
function updateActions(_event, _dataTableId, _selectedRows) { } в _selectedRows получишь массив выбранного. А так как это массив обычных JS объектов, можешь мутировать их состояние прямо в контроллере с выводом всяких формочек, модальных окон и т.д. |
Это понятно, с этим я разобрался перед тем как писал вам предыдущее сообщение, но мне кажется должно быть решение проще.
Может быть можно включить редактируемые поля в таблице? (на пример как в материал дизайне - http://iamisti.github.io/mdDataTable/ (см. пример "Editable fields - small dialog ") Что-то такого плана как параметр "edittable": $scope.dataTableThead = [ { name: 'dessert', label: 'Dessert', sortable: true edittable: true }, ............................... { name: 'comments', label: 'Comments', icon: 'comment-text', sortable: false }]; |
okuznetsov1,
Обычно о таких вещах пишут в документации к компоненту большими буквами, но здесь об этом ни слова. Поэтому врятли. |
Цитата:
|
Сейчас заметил, что сортировка в столбцах datatable работает как то не совсем правильно, сортирует как строку - даже несмотря на то, что в столбце числа (например ID)
Как можно подкорректировать filter? |
Часовой пояс GMT +3, время: 23:15. |