BSCST ui datatable component
dataTableProvider.setDefaults({/..../}) viz src/frontend/angular_modules/UI/src/index.js. Při získání servicy dataTable se optiony spojí pomocí "deep merge"
colVis: pro nastavení extenze ColVis (nastavení zobrazení a skrývání sloupců), aby se dala jednodušejc aktivovat a nastavit, lze použít všechny optiony viz http://datatables.net/extensions/colvis/options
enabled, která je defaultně true (tj. extenze se aktivuje)
restoreOnTop, defaultně true, kvůli tomu, že v tom menu, kde se zobrazování a skrývání zaklikává, je tlačítko pro obnovení defaultně dole, tahle optiona ho přesune nahoru
oColReorder: pro nastavení extenze ColReorder (pro přesouvání pořadí sloupců v tabulce), lze použít všechny optiony viz http://datatables.net/extensions/colreorder/options
enabled pro zapnutí extenze (defaultně true)
fixedColumns: pro nastavení extenze FixedColumns (když je tabulka moc široká a objeví se scrollbar, tahle extenze zařídí, že některé sloupce zůstávají při skrollování na svém místě - použito hlavně pro checkboxy a akce) viz http://datatables.net/docs/FixedColumns/3.0.0/FixedColumns.defaults.html
enabled pro zapnutí extenze (defaultně true)
pageLength: integer nebo funkce vracející integer, nastavení délky pro stránkování
url: url, která se má získat pro fetchování dat ze serveru. Defaultně se v dataTables fetchování dat ze serveru nastavuje přes optionu ajax, která, pokud je nastavená jako objekt, předává tento objekt funkci jquery.ajax, nicméně pokud je ajax funkce, zavolá se místo toho tato funkce, čehož se využívá a ta je teď defaultně nastavená tak, že používá právě optionu url a angulaří $http servicu
request: tuhle optionu jsem přidal kvůli jednodušší možnosti ovlivnění fetchování dat, když jsem optionu ajax zabral. Jde o funkci, která dostane jako první parametr data a jako druhý parametr všechny options. Defaultně jde o funkci volající $http.post(options.url)
actionsTitle: nadpis akcí - defaultně "Actions", tohle se se přenastavuje pomocí provideru globálně pro celou aplikaci
hideEmptyActionsColumn: skrytí prázdného sloupce s akcemi - pokud akce obsahují jedinou rowAction, sloupec s akcemi se vždy zobrazí - skrytí prázdného sloupce je možné pomocí tohoto přepínače
actions: definice akcí - pole objektů, pokud jsou akce uvedené, automaticky se přidají do seznamu sloupců a nastaví se jako fixedColumn doprava, každý objekt v poli má nepovinné vlastnosti:
visible: boolean nebo funkce vracející boolean, ovlivňuje, zda se akce zobrazí v seznamu nebo ne
enabled: boolean nebo funkce vracející boolean, ovlivňuje, zda se akci přidá css třída disabled a to, zda se vyvolá callback ve vlastnosti onClick
tooltip: string nebo funkce vracející string pro přidánbí tooltipu na akci
href: href akce, defaultně "#"
iconClass: třída ikony
onClick: callback zavolaný při kliknutí, jako argumenty callback dostane data řádku, index řádku a dataTable API
render: možnost ovlivnit vyrenderování akce vlastní funkcí, nicméně se tím přepíše defaultní render, ve kterém je obsažena logika starající se o výše uvedené chování akcí (visible, enabled, tooltip a href), vrací string s domem nebo může jquery objekt
selection: bool nebo pole, pokud je ovedeno, jako první fixed sloupec se přidají checkboxy, pokud jde o pole, při každé změně zaškrtnutí se změna projeví i do předaného pole, aby na něm šlo např. watchovat nebo předat do šablony
filter: objekt pro filtrování, musí implementovat metodu $apply(requestData, filterFields) a $loadFromState(stateFilter), všechny vlastnosti nezačínající dolarem se pro jednodušší implementaci dostanou jako druhý argument do metody $apply, ty je poté možno jednoduše přimergovat do dat requestu nebo s nimi manipulovat, jako this je nastaven předaný objekt filter
stateStorage: objekt starající se o ukládání a nahrávání stavu, pokud je uveden, přepisuje optiony stateSave na true, stateLoadCallback a stateSaveCallback, musí implementovat metody load() a save(state), je připravená třída DataTableStorage viz src/frontend/angular_modules/UI/src/services/DataTableStorage.js
stateId: string identifikátor stavu, pokud není uveden, je vygenerován tak, jak to dělají dataTables, nicméně jsme s tím měli problém, že pokud se aplikovala dataTable znovu na stejný element (což se někde dělo, nejspíš při řřekliknutí tabu a zpět), tak se vygeneroval nový idefntifikátor, tudíž je lepší ho uvádět
onInstantiated: callback, který se zavolá po inicializaci dataTable a jako argument je mu předána instance dataTable API viz http://datatables.net/reference/api/
dataTableFactory.legacyTableFixes, ktera prevede nektere atributy z pole columns na nastaveni kompatibilni s novou dataTable (minWidth, maxWidth, required, renderTemplate, render=string, render=object, order
render: obdoba draw, nicméně draw se volá dvakrát, pokud je zapnutý FixedColumns, tahle eventa se vyvolá jen jednou
selectionChanged: vyvolá se v okamžiku změny zaškrtnutí checkboxů, do argumentů se dostane pole objektů (zaškrtlých řádků)
requestData: pokud není přepsaná optiona ajax, vyvolá se před odesláním requestu na server, aby bylo možno upravit odeslaná data, která se předávají jako argument
responseData: vyvolá se po úspěšné odpovědi od serveru, předávají se responseData, status, headers
error: vyvolá se pokud server neodpoví "kladně", předávají se responseData, status, headers
dataTable.fixedColumns.fnRedrawLayout().
var renderDate = _.bind($filter('date'), null, _, 'dd. MM. yyyy');
function renderStatus(data, type, row, meta) {
var text = $filter('ibcatalog')(data, 'CLIENTTRANSACTIONSTATUSTYPES');
if (!row.errorText) return '' + text + '';
return '' + text + '';
}
function translate(title) {
return $translate.instant('views.payments.transaction-history.' + title + '-label');
}
$scope.selection = [];
$scope.filter = {
firstFilterField: 'first',
secondFilterField: 'second',
$fieldNotPresentInFilterFields: new Date(),
$apply: function(requestData, filterFields) {
angular.extend(requestData, filterFields);
requestData.date = this.$fieldNotPresentInFilterFields.getTime()
},
$loadFromState: function(filterState) {
angular.extend(this, filterState);
}
};
$scope.dataTableOptions = {
url: urls.search,
selection: $scope.selection,
columns: [
{data: 'valueDate', title: translate('value-date'), render: renderDate},
{data: 'bornDate', title: translate('born-date'), visible: false, render: renderDate},
{data: 'lastSignatureDate', title: translate('last-signature-date'), visible: false, orderable: false, render: renderDate},
{data: 'sumAmount', title: translate('amount')},
{data: 'currencyId', title: translate('currency')},
{data: 'statusId', title: translate('transaction-status'), render: renderStatus},
{data: 'debitAccountIBAN', title: translate('payer-account'), render: $filter('ibanHtml')},
{data: 'debitAccountName', title: translate('payer-account-name'), visible: false},
{data: 'creditAccountNumber', title: translate('payee-account'), render: $filter('ibanHtml')},
{data: 'creditAccountName', title: translate('payee-account-name'), orderable: false},
{data: 'clientReference', title: translate('client-reference'), orderable: false},
{data: 'creditBICCode', title: translate('payee-bank'), visible: false, orderable: false},
{data: 'variableSymbol', title: translate('variable-symbol'), visible: false, orderable: false},
{data: 'constantSymbol', title: translate('constant-symbol'), visible: false, orderable: false},
{data: 'specificSymbol', title: translate('specific-symbol'), visible: false, orderable: false},
{data: 'messageForPayer', title: translate('message-for-payer'), visible: false, orderable: false}
],
actions: [
{
icon: 'fa fa-check fa-lg',
tooltip: function(data) {
return 'operId: ' + data.operId';
},
onClick: function(data, index, dataTable) {
console.log('clicked on the first action');
}
},
{
icon: 'fa fa-list-alt fa-lg',
tooltip: 'another tooltip',
onClick: function(data, index, dataTable) {
console.log('clicked on the second action');
}
}
],
onInstantiated: function(dataTable) {
dataTable.on('selectionChanged', function(event, selection) {
console.log(selection);
});
}uz to ta
};
`
v HTML:
$3
#### Install dependency ####
`
npm install
`
#### Build dist ####
`
npm run build
``