Extended FHC_TableWidget with column picker, header & footer

Added standard behaviour to FHC_TableWidget:
. Added column picker to new TableWidgetHeader div.
. Moved former footerElement (including Alle aus-/abwählen
buttons, CSV Downloads) from single specific files to new
TableWidgetFooter divs.
. Adapted other files to work with new FHC_TableWidget behaviour
This commit is contained in:
Cris
2020-01-28 12:26:08 +01:00
committed by hainberg
parent 7c2df5eefb
commit b270e65d2e
10 changed files with 417 additions and 269 deletions
@@ -326,10 +326,12 @@ $filterWidgetArray = array(
'Angenommen von'
),
'datasetRepOptions' => '{
height: 550,
layout: "fitColumns", // fit columns to width of table
responsiveLayout: "hide", // hide columns that dont fit on the table
movableColumns: true, // allows changing column
height: func_height(this),
layout: "fitColumns", // fit columns to width of table
persistentLayout:true, // enables persistence (default store in localStorage if available, else in cookie)
persistenceID: "acceptLehrauftrag", // TableWidget unique id to store persistence data seperately for multiple tables
autoResize: false, // prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
movableColumns: true, // allows changing column
placeholder: func_placeholder(),
headerFilterPlaceholder: " ",
index: "row_index", // assign specific column as unique id (important for row indexing)
@@ -339,7 +341,6 @@ $filterWidgetArray = array(
selectableCheck: function(row){
return func_selectableCheck(row);
},
footerElement: func_footerElement(),
rowUpdated:function(row){
func_rowUpdated(row);
},
@@ -357,40 +358,44 @@ $filterWidgetArray = array(
},
renderStarted:function(){
func_renderStarted(this);
}
},
tableWidgetFooter: {
selectButtons: true
}
}', // tabulator properties
'datasetRepFieldsDefs' => '{
row_index: {visible:false}, // necessary for row indexing
lehreinheit_id: {headerFilter:"input", bottomCalc:"count", bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();}, width: "7%"},
lehrveranstaltung_id: {headerFilter:"input", width: "5%"},
projektarbeit_id: {visible: false},
studiensemester_kurzbz: {visible: false},
studiengang_kz: {visible: false},
stg_typ_kurzbz: {headerFilter:"input", width: "5%"},
lehreinheit_id: {headerFilter:"input", bottomCalc:"count", bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();}},
lehrveranstaltung_id: {headerFilter:"input"},
projektarbeit_id: {visible: false, headerFilter:"input"},
studiensemester_kurzbz: {visible: false, headerFilter:"input"},
studiengang_kz: {visible: false, headerFilter:"input"},
stg_typ_kurzbz: {headerFilter:"input"},
semester: {headerFilter:"input"},
orgform_kurzbz: {headerFilter:"input"},
person_id: {visible: false},
typ: {headerFilter:"input", width: "7%"},
auftrag: {headerFilter:"input", width: "15%"},
lv_oe_kurzbz: {headerFilter:"input", width: "8%"},
gruppe: {headerFilter:"input", width: "5%"},
person_id: {visible: false, headerFilter:"input"},
typ: {headerFilter:"input"},
auftrag: {headerFilter:"input"},
lv_oe_kurzbz: {headerFilter:"input"},
gruppe: {headerFilter:"input"},
stunden: {align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1},
headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
bottomCalc:"sum", bottomCalcParams:{precision:1}, width: "5%"},
betrag: {align:"right", width: "6%", formatter: form_formatNulltoStringNumber,
bottomCalc:"sum", bottomCalcParams:{precision:1}
},
betrag: {align:"right", formatter: form_formatNulltoStringNumber,
headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"},
width: "8%"},
bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"}
},
vertrag_id: {visible: false},
vertrag_stunden: {visible: false},
vertrag_betrag: {visible: false},
mitarbeiter_uid: {visible: false},
bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip, width: "8%"},
erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip, width: "8%"},
akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip, width: "8%"},
bestellt_von: {visible: false},
erteilt_von: {visible: false},
akzeptiert_von: {visible: false}
mitarbeiter_uid: {visible: false, headerFilter:"input"},
bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip},
erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip},
akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip},
bestellt_von: {visible: false, headerFilter:"input"},
erteilt_von: {visible: false, headerFilter:"input"},
akzeptiert_von: {visible: false, headerFilter:"input"}
}', // col properties
);
@@ -337,14 +337,17 @@ $filterWidgetArray = array(
'Angenommen von'
),
'datasetRepOptions' => '{
height: 700,
layout: "fitColumns", // fit columns to width of table
responsiveLayout: "hide", // hide columns that dont fit on the table
movableColumns: true, // allows changing column
height: func_height(this),
layout: "fitColumns", // fit columns to width of table
layoutColumnsOnNewData: true, // ajust column widths to the data each time TableWidget is loaded
persistentLayout:true, // enables persistence (default store in localStorage if available, else in cookie)
persistenceID: "approveLehrauftrag", // TableWidget unique id to store persistence data seperately for multiple tables
autoResize: false, // prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
movableColumns: true, // allows changing column
placeholder: func_placeholder(),
headerFilterPlaceholder: " ",
groupBy:"lehrveranstaltung_id",
groupToggleElement:"header", //toggle group on click anywhere in the group header
groupToggleElement:"header", //toggle group on click anywhere in the group header
groupHeader: function(value, count, data, group){
return func_groupHeader(data);
},
@@ -357,7 +360,6 @@ $filterWidgetArray = array(
return func_selectableCheck(row);
},
initialFilter: func_initialFilter(),
footerElement: func_footerElement(),
rowUpdated:function(row){
func_rowUpdated(row);
},
@@ -373,44 +375,47 @@ $filterWidgetArray = array(
},
tableBuilt: function(){
func_tableBuilt(this);
}
},
tableWidgetFooter: {
selectButtons: true
}
}', // tabulator properties
'datasetRepFieldsDefs' => '{
// column status is built dynamically in funcTableBuilt(),
row_index: {visible:false}, // necessary for row indexing
personalnummer: {visible: false},
lehreinheit_id: {headerFilter:"input", bottomCalc:"count", width: "7%",
personalnummer: {visible: false, headerFilter:"input"},
lehreinheit_id: {headerFilter:"input", bottomCalc:"count",
bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();},},
lehrveranstaltung_id: {headerFilter:"input"},
lv_bezeichnung: {visible: false},
projektarbeit_id: {visible: false},
lv_bezeichnung: {visible: false, headerFilter:"input"},
projektarbeit_id: {visible: false, headerFilter:"input"},
studiensemester_kurzbz: {headerFilter:"input"},
studiengang_kz: {visible: false},
stg_typ_kurzbz: {headerFilter:"input", width: "5%"},
studiengang_kz: {visible: false, headerFilter:"input"},
stg_typ_kurzbz: {headerFilter:"input"},
semester: {headerFilter:"input"},
orgform_kurzbz: {headerFilter:"input"},
person_id: {visible: false},
person_id: {visible: false, headerFilter:"input"},
typ: {headerFilter:"input"},
auftrag: {headerFilter:"input", width:"20%"},
auftrag: {headerFilter:"input"},
lv_oe_kurzbz: {headerFilter:"input"},
gruppe: {headerFilter:"input"},
lektor: {headerFilter:"input", widthGrow: 3},
lektor: {headerFilter:"input"},
stunden: {align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1},
headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
bottomCalc:"sum", bottomCalcParams:{precision:1}},
betrag: {align:"right", width: "8%", formatter: form_formatNulltoStringNumber,
betrag: {align:"right", formatter: form_formatNulltoStringNumber,
headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"}},
vertrag_id: {visible: false},
vertrag_stunden: {visible: false},
vertrag_betrag: {visible: false},
mitarbeiter_uid: {visible: false},
bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip, width: "8%"},
erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip, width: "8%"},
akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip, width: "8%"},
bestellt_von: {visible: false},
erteilt_von: {visible: false},
akzeptiert_von: {visible: false},
mitarbeiter_uid: {visible: false, headerFilter:"input"},
bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip},
erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip},
akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip},
bestellt_von: {visible: false, headerFilter:"input"},
erteilt_von: {visible: false, headerFilter:"input"},
akzeptiert_von: {visible: false, headerFilter:"input"},
}', // col properties
);
@@ -64,8 +64,11 @@ $tableWidgetArray = array(
'Storniert am'
),
'datasetRepOptions' => '{
layout: "fitColumns", // fit columns to width of table
responsiveLayout: "hide", // hide columns that dont fit on the table
layout: "fitColumns", // fit columns to width of table
layoutColumnsOnNewData: true, // ajust column widths to the data each time TableWidget is loaded
persistentLayout: true, // enables persistence (default store in localStorage if available, else in cookie)
persistenceID: "cancelledLehrauftrag", // TableWidget unique id to store persistence data seperately for multiple tables
autoResize: false, // prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
movableColumns: true, // allows changing column
placeholder: func_placeholder(),
rowFormatter:function(row){
@@ -79,22 +82,24 @@ $tableWidgetArray = array(
},
tableBuilt: function(){
func_tableBuilt(this);
}
},
}', // tabulator properties
'datasetRepFieldsDefs' => '{
vertrag_id: {visible: false},
vertragsstunden_studiensemester_kurzbz: {visible: false},
vertragstyp_kurzbz: {widthGrow: 2},
bezeichnung: {widthGrow: 2},
vertragsstunden_studiensemester_kurzbz: {visible: false, widthShrink:1},
vertragstyp_kurzbz: {minWidth: 300},
bezeichnung: {minWidth: 400},
vertragsstunden: {
align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1},
bottomCalc:"sum", bottomCalcParams:{precision:1}
bottomCalc:"sum", bottomCalcParams:{precision:1},
minWidth: 300
},
betrag: {
align:"right", formatter: form_formatNulltoStringNumber,
bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"}
bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"},
minWidth: 200
},
storniert: {align:"center", mutator: mut_formatStringDate, tooltip: storniert_tooltip},
storniert: {align:"center", mutator: mut_formatStringDate, tooltip: storniert_tooltip, minWidth: 200},
storniert_von: {visible: false},
letzterStatus_vorStorniert: {visible: false}
}', // col properties
@@ -35,7 +35,7 @@ $this->load->view(
<!-- title & helper link -->
<div class="row">
<div class="col-lg-12 page-header">
<a class="pull-right" data-toggle="collapse" href="#collapseHelp" aria-expanded="false" aria-controls="collapseExample">
<a class="pull-right" data-toggle="collapse" href="#collapseHelp" aria-expanded="false" aria-controls="collapseHelp">
Hilfe zu dieser Seite
</a>
<h3>
@@ -205,12 +205,7 @@ $this->load->view(
</div>
<!-- tabulator data table -->
<div class="row">
<div class="col-lg-12">
<?php $this->load->view('lehre/lehrauftrag/orderLehrauftragData.php'); ?>
</div>
</div>
<br>
<?php $this->load->view('lehre/lehrauftrag/orderLehrauftragData.php'); ?>
<!-- filter buttons & bestell-button -->
<div class="row">
@@ -371,20 +371,22 @@ $filterWidgetArray = array(
'Angenommen von'
),
'datasetRepOptions' => '{
height: 700,
layout:"fitColumns", // fit columns to width of table
responsiveLayout:"hide", // hide columns that dont fit on the table
movableColumns: true, // allows changing column
placeholder: func_placeholder(),
headerFilterPlaceholder: " ",
groupBy:"lehrveranstaltung_id",
groupToggleElement:"header", //toggle group on click anywhere in the group header
groupHeader: function(value, count, data, group){
return func_groupHeader(data);
},
footerElement: func_footerElement(),
columnCalcs:"both", // show column calculations at top and bottom of table and in groups
index: "row_index", // assign specific column as unique id (important for row indexing)
height: func_height(this),
layout:"fitColumns", // fit columns to width of table
layoutColumnsOnNewData: true, // ajust column widths to the data each time TableWidget is loaded
persistentLayout:true, // enables persistence (default store in localStorage if available, else in cookie)
persistenceID: "orderLehrauftrag", // TableWidget unique id to store persistence data seperately for multiple tables
autoResize: false, // prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
movableColumns: true, // allows changing column order
placeholder: func_placeholder(), // shown on empty table (no data)
headerFilterPlaceholder: " ",
groupBy:"lehrveranstaltung_id",
groupToggleElement:"header", //toggle group on click anywhere in the group header
groupHeader: function(value, count, data, group){
return func_groupHeader(data);
},
columnCalcs:"both", // show column calculations at top and bottom of table and in groups
index: "row_index", // assign specific column as unique id (important for row indexing)
selectable: true, // allows row selection
selectableRangeMode: "click", // allows range selection using shift end click on end of range
selectablePersistence:false, // deselect previously selected rows when table is filtered, sorted or paginated
@@ -409,46 +411,50 @@ $filterWidgetArray = array(
dataLoaded: function(data){
func_dataLoaded(data, this);
},
tableWidgetFooter: {
selectButtons: true
}
}', // tabulator properties
'datasetRepFieldsDefs' => '{
// column status is built dynamically in funcTableBuilt()
row_index: {visible: false},
personalnummer: {visible: false},
lehreinheit_id: {headerFilter:"input", bottomCalc:"count", width: "7%",
personalnummer: {visible: false, headerFilter:"input"},
lehreinheit_id: {headerFilter:"input", bottomCalc:"count", minWidth: 115,
bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();}},
lehrveranstaltung_id: {headerFilter:"input"},
lv_bezeichnung: {visible: false},
projektarbeit_id: {visible: false},
lv_bezeichnung: {visible: false, headerFilter:"input"},
projektarbeit_id: {visible: false, headerFilter:"input"},
studiensemester_kurzbz: {headerFilter:"input"},
studiengang_kz: {visible: false},
stg_typ_kurzbz: {headerFilter:"input", width: "5%"},
studiengang_kz: {visible: false, headerFilter:"input"},
stg_typ_kurzbz: {headerFilter:"input", minWidth: 70},
semester: {headerFilter:"input"},
studienplan_bezeichnung: {headerFilter:"input", width: "7%"},
studienplan_bezeichnung: {headerFilter:"input"},
orgform_kurzbz: {headerFilter:"input"},
person_id: {visible: false},
typ: {headerFilter:"input"},
auftrag: {headerFilter:"input", width:"15%"},
lv_oe_kurzbz: {headerFilter:"input"},
gruppe: {headerFilter:"input"},
person_id: {visible: false, headerFilter:"input"},
typ: {headerFilter:"input", minWidth:100},
auftrag: {headerFilter:"input", minWidth:280},
lv_oe_kurzbz: {headerFilter:"input", minWidth:80},
gruppe: {headerFilter:"input", minWidth:120},
lektor: {headerFilter:"input", widthGrow: 3},
stunden: {align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1},
stunden: {align:"right", minWidth: 80, formatter: form_formatNulltoStringNumber, formatterParams:{precision:1},
headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
bottomCalc:"sum", bottomCalcParams:{precision:1}},
stundensatz: {visible: false},
betrag: {align:"right", width: "8%", formatter: form_formatNulltoStringNumber,
stundensatz: {visible: false, align:"right", minWidth: 100, formatter: form_formatNulltoStringNumber,
headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator},
betrag: {align:"right", minWidth: 120, formatter: form_formatNulltoStringNumber,
headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator,
bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money",
bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"}},
vertrag_id: {visible: false},
vertrag_id: {visible: false, headerFilter:"input"},
vertrag_stunden: {visible: false},
vertrag_betrag: {visible: false},
mitarbeiter_uid: {visible: false},
bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip, width: "8%"},
erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip, width: "8%"},
akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip, width: "8%"},
bestellt_von: {visible: false},
erteilt_von: {visible: false},
akzeptiert_von: {visible: false}
mitarbeiter_uid: {visible: false, headerFilter:"input"},
bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip, minWidth: 100},
erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip, minWidth: 100},
akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip, minWidth: 100},
bestellt_von: {visible: false, headerFilter:"input"},
erteilt_von: {visible: false, headerFilter:"input"},
akzeptiert_von: {visible: false, headerFilter:"input"}
}', // col properties
);
+8 -4
View File
@@ -1,17 +1,21 @@
<br>
<div class="row" id="divTableWidgetDataset" tableUniqueId="<?php echo $tableUniqueId; ?>">
<div class="col-lg-12">
<!-- Table widget header -->
<div id="tableWidgetHeader"></div>
<!-- Table info top -->
<div id="tableDatasetActionsTop"></div>
<!-- TableWidget table -->
<div>
<?php TableWidget::loadViewDataset(); ?>
</div>
<?php TableWidget::loadViewDataset(); ?>
<!-- Table info bottom -->
<div id="tableDatasetActionsBottom"></div>
<!-- Table widget footer -->
<div id="tableWidgetFooter"></div>
</div>
</div>