Во 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, время: 10:32. |