Enhanced tabulator selection/filtering functionality

. Added buttons "select all" and "deselect all"
. Now filtering will deselect previously selected rows (before: if user
selected rows and filtered after, the previously selected rows were kept
causing misleading Lehrauftrag orderings)
. Added bottom calculations
This commit is contained in:
Cris
2019-09-03 10:26:24 +02:00
committed by hainberg
parent 6dcf97c848
commit 6c2cc7412d
2 changed files with 56 additions and 27 deletions
@@ -27,7 +27,7 @@ $this->load->view(
<body>
<div id="page-wrapper">
<div class="container-fluid">
<form id="formLehrauftrag" class="form-inline" action="" method="get">
<!-- <form id="formLehrauftrag" class="form-inline" action="" method="get">-->
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">
@@ -35,7 +35,7 @@ $this->load->view(
</h3>
</div>
<div class="col-lg-12">
<!-- <form id="formLehrauftrag" class="form-inline" action="" method="get">-->
<form id="formLehrauftrag" class="form-inline" action="" method="get">
<div class="form-group">
<?php
echo $this->widgetlib->widget(
@@ -66,22 +66,31 @@ $this->load->view(
?>
</div>
<button type="submit" name="submit" value="anzeigen" class="btn btn-default form-group">Anzeigen</button>
<!--</form>-->
</form>
</div>
</div>
<div class="row">
<?php $this->load->view('lehre/lehrauftrag/lehrauftragData.php'); ?>
</div>
<div class="row">
<div class="col-lg-12">
<!-- <form id="formLehrauftragBestellen" class="form-inline" action="" method="get">-->
<button type="submit" name="submit" value="bestellen" class="btn btn-default form-group pull-right">Lehrauftrag bestellen</button>
<!-- </form>-->
<?php $this->load->view('lehre/lehrauftrag/lehrauftragData.php'); ?>
</div>
</div>
</form>
<!-- <div class="row">-->
<!-- <div class="col-lg-12">-->
<!-- <!-- <form id="formLehrauftragBestellen" class="form-inline" action="" method="get">-->
<!-- <button type="submit" id="submitBestellen" name="submit" value="bestellen" class="btn btn-primary form-group pull-right">Lehrauftrag bestellen</button>-->
<!-- <!-- </form>-->
<!-- </div>-->
<!-- </div>-->
<!-- </form>-->
<div class="row">
<div class="col-lg-12">
<button id="order-lehrauftraege" type="submit" id="submitBestellen" name="submit" value="bestellen" class="btn btn-primary form-group pull-right">Lehrauftrag bestellen</button>
<button id="select-all" class="btn btn-default">Alle auswählen</button>
<button id="deselect-all" class="btn btn-default">Alle abwählen</button>
</div>
</div>
</div>
</div>
</body>
@@ -151,28 +151,48 @@ $filterWidgetArray = array(
return $datasetRaw;
},
'datasetRepOptions' => '{
height: 700,
height: 700,
layout:"fitColumns", // fit columns to width of table
responsiveLayout:"hide", // hide columns that dont fit on the table
selectable: true, // allows row selection
selectableRangeMode: "click", // allows range selection using shift end click on end of range
movableColumns: true, // allows changing column
pagination: "local", // paginates the data
paginationSize: 15 // rows allowed per page
selectablePersistence:false, // deselect previously selected rows when table is filtered, sorted or paginated
movableColumns: true, // allows changing column
headerFilterPlaceholder: " "
}', // tabulator properties
'datasetRepFieldsDefs' => '{
LE_ID: {headerFilter:"input", headerFilterPlaceholder:" "},
Typ: {headerFilter:"input", headerFilterPlaceholder:" "},
Auftrag: {headerFilter:"input", headerFilterPlaceholder:" "},
Organisationseinheit: {headerFilter:"input", headerFilterPlaceholder:" "},
Gruppe: {headerFilter:"input", headerFilterPlaceholder:" "},
Lektor: {headerFilter:"input", headerFilterPlaceholder:" "},
Stunden: {align:"right", headerFilter:"input", headerFilterPlaceholder:" "},
Betrag: {align:"right", headerFilter:"input", headerFilterPlaceholder:">=", headerFilterFunc:">="},
Bestellt: {align:"center", headerFilter:"input", headerFilterPlaceholder:" "},
Erteilt: {align:"center", headerFilter:"input", headerFilterPlaceholder:" "},
Akzeptiert: {align:"center", headerFilter:"input", headerFilterPlaceholder:" "}
LE_ID: {headerFilter:"input", bottomCalc:"count"},
Typ: {headerFilter:"input"},
Auftrag: {headerFilter:"input"},
Organisationseinheit: {headerFilter:"input"},
Gruppe: {headerFilter:"input"},
Lektor: {headerFilter:"input"},
Stunden: {align:"right", headerFilter:"input", bottomCalc:"sum", bottomCalcParams:{precision:1}},
Betrag: {align:"right", headerFilter:"input", headerFilterPlaceholder:">=", headerFilterFunc:">=", bottomCalc:"sum", bottomCalcParams:{precision:2}},
Bestellt: {align:"center", headerFilter:"input"},
Erteilt: {align:"center", headerFilter:"input"},
Akzeptiert: {align:"center", headerFilter:"input"}
}', // col properties
);
echo $this->widgetlib->widget('FilterWidget', $filterWidgetArray);
?>
?>
<script type="text/javascript">
$(function() {
// NOTE: $("#filterTabulator").tabulator gives access to Tabulator object
var selector = $("#filterTabulator");
// Select all (filtered) rows
$("#select-all").click(function(){
selector.tabulator("selectRow", true); // true selects all filtered rows
});
// Deselect all (filtered) rows
$("#deselect-all").click(function(){
selector.tabulator("deselectRow");
});
});
</script>