Пытаюсь запустить демо-пример с офф. сайта, но получается с большим трудом. Несколько дней тыкаюсь, но особо не продвинулся.
Удалось запустить отображение данных в "data-table", но не работает сортировка по полям, а также не появляются дополнительные кнопки после открыживания записей (для редактирования и удаления).
Это то как у меня работает:codepen.io/okuznetsov/pen/EZBGGZА это в примере на офф. сайте: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>
<b>app.js</b>
<code lang="javascript">
(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);
}
}]);
})();
</code>