upgrading tableWidget to tabulator 5 with custom jquery_wrapper

This commit is contained in:
SimonGschnell
2024-03-12 12:28:59 +01:00
parent 691bbaaf82
commit 1dc4f5b56a
4 changed files with 54 additions and 46 deletions
@@ -224,9 +224,7 @@ $filterWidgetArray = array(
rowFormatter:function(row){
func_rowFormatter(row,this);
},
columnDefaults:{
tooltip:true
},
//! not working
columnDefaults:{
tooltip:function(e, cell, onRendered){
+41 -22
View File
@@ -263,15 +263,19 @@ var FHC_TableWidget = {
})
// Click-Event to toggle column-picker columns
tableWidgetDiv.find('.btn-select-col').on('click', function()
//! was changed to be added when the table was built first
tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","tableBuilt",()=>{
tableWidgetDiv.find('.btn-select-col').on('click', function()
{
var selected = this.value;
tableWidgetDiv.find("#tableWidgetTabulator").tabulator('toggleColumn', selected);
// toggle class to color button as selected / deselected
$(this).toggleClass('btn-select-col-selected').blur(); // blur removes automatic focus
})
});
}
},
@@ -550,19 +554,27 @@ var FHC_TableWidget = {
options.tooltipsHeader = (typeof options.tooltipsHeader == 'undefined') ? true : options.tooltipsHeader; // set header tooltip with column title
options.placeholder = _func_placeholder(); // display text when table is empty
if (typeof options.rowSelectionChanged == 'undefined')
{
options.rowSelectionChanged = function(data, rows){
_func_rowSelectionChanged(data, rows);
};
}
options.columnVisibilityChanged = function(column, visible) {
_func_columnVisibilityChanged(column, visible);
};
// OLD tabulator v4
// if (typeof options.rowSelectionChanged == 'undefined')
// {
// options.rowSelectionChanged = function(data, rows){
// _func_rowSelectionChanged(data, rows);
// };
// }
// OLD tabulator v4
// options.columnVisibilityChanged = function(column, visible) {
// _func_columnVisibilityChanged(column, visible);
// };
// Renders the tabulator
tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options);
//tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","tableBuilt",()=>{console.log("table build")});
tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","rowSelectionChanged",_func_rowSelectionChanged);
tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","columnVisibilityChanged",_func_columnVisibilityChanged);
// notify other js files that work on the tabulator instance that the tabulator is initialized by triggering the event tableInit
}
@@ -573,16 +585,23 @@ var FHC_TableWidget = {
// -------------------------------------------------------------------------------------------------------------
// Render tableWidgetHeader
if (typeof options.tableWidgetHeader == 'undefined' ||
if (typeof options.tableWidgetHeader == 'undefined' ||
(typeof options.tableWidgetHeader != 'undefined' && options.tableWidgetHeader != false))
{
var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv);
tableWidgetDiv.find('#tableWidgetHeader').append(tabulatorHeaderHTML);
{
var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv);
tableWidgetDiv.find('#tableWidgetHeader').append(tabulatorHeaderHTML);
// Render the collapsable div triggered by button in tableWidgetHeader
var tabulatorHeaderCollapseHTML = _renderTabulatorHeaderCollapseHTML(tableWidgetDiv);
tableWidgetDiv.find('#tableWidgetHeader').after(tabulatorHeaderCollapseHTML);
}
tableWidgetDiv.find("#tableWidgetTabulator").tabulator("on","tableBuilt",()=>{
// Render the collapsable div triggered by button in tableWidgetHeader
var tabulatorHeaderCollapseHTML = _renderTabulatorHeaderCollapseHTML(tableWidgetDiv);
tableWidgetDiv.find('#tableWidgetHeader').after(tabulatorHeaderCollapseHTML);
});
}
/**
* tableWidgetFooter is NOT rendered by default.
@@ -795,7 +814,7 @@ function _renderTabulatorHeaderHTML(tableWidgetDiv){
}
// Returns collapsable HTML element for TableWidget header buttons
function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){
function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv,arrayTabulatorColumns){
var tableUniqueId = tableWidgetDiv.attr('tableUniqueId');
@@ -810,7 +829,7 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){
tabulatorHeaderCollapseHTML += '<div class="panel-heading" role="tab" id="headingOne">';
tabulatorHeaderCollapseHTML += '<h5 class="panel-title">';
tabulatorHeaderCollapseHTML += '' +
'<a role="button" data-toggle="collapse" data-parent="#accordion" ' +
'<a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" ' +
'href="#selectColumns-' + tableUniqueId + '" ' +
'aria-expanded="false" aria-controls="selectColumns">' +
FHC_PhrasesLib.t("ui", "spaltenEinstellen") +
@@ -69,15 +69,12 @@ function hf_schreibberechtigt(headerValue, rowValue){
// Adds column details
// Sets focus on filterbutton, if table starts with stored filter.
function func_tableBuilt(table) {
// Store table in global var
tabulator = table;
table.find("#tableWidgetTabulator").tabulator("addColumn",{
table.tabulator("addColumn",{
title: "Details",
field: 'details',
align: "center",
hozAlign: "center",
width: 100,
formatter: "link",
formatterParams:{
@@ -252,28 +249,21 @@ function tableWidgetHook_selectAllButton(tableWidgetDiv){
$(function(){
const genehmigung_panel = $('#approveAnrechnungUebersicht-genehmigung-panel');
const begruendung_panel = $('#approveAnrechnungUebersicht-begruendung-panel');
const hasReadOnlyAccess = $('#formApproveAnrechnungUebersicht').data('readonly');
const hasCreateAnrechnungAccess = $('#formApproveAnrechnungUebersicht').data('createaccess');
$(document).on("tableInit", function(event, table) {
$(document).on("tableInit", function(event) {
func_tableBuilt($("#tableWidgetTabulator"))
table.find("#tableWidgetTabulator").tabulator("on","tableBuilt",()=>{
func_tableBuilt(table)
var el =$('#download-csv');
$('#download-csv').click( function()
{
console.log("here")
// BOM for correct UTF-8 char output
table.find("#tableWidgetTabulator").tabulator("download", "csv", "data.csv", { bom:true });
})
console.log(el);
});
table.find("#tableWidgetTabulator").tabulator("on","rowSelectionChanged",func_rowSelectionChanged);
//table.tabulator("on","rowSelectionChanged",func_rowSelectionChanged);
/* table.tabulator("on","dataLoaded", function() {
// do something
+1
View File
@@ -57,6 +57,7 @@
}
console.log(props);
console.log('bhbuilt end');
$(document).trigger("tableInit");
});
//retrieve properties on prototype