Nested Tables: Bottom & Bottom-Fixed

position('bottom')

Rendert die Nested Table als vollbreiten Abschnitt direkt unterhalb der eigenen Felder des übergeordneten Formulars (bzw. unterhalb der Tab-Leiste, falls dasselbe Formular noch weitere nested_table()-Kinder mit der Standardposition tab hat - jede Platzierung koexistiert problemlos auf einem Formular). Es ist kein Tab-Klick nötig, um sie zu sehen:

$xcrud = Xcrud::get_instance();
$xcrud->table('orders');
$xcrud->route('orders');
$xcrud->columns('orderNumber,orderDate,status,customerNumber');

$orderdetails = $xcrud->nested_table('Order details', 'orderNumber', 'orderdetails', 'orderNumber');
$orderdetails->columns('productCode,quantityOrdered,priceEach');
$orderdetails->fields('productCode,quantityOrdered,priceEach');
$orderdetails->order_by('productCode', 'asc');
$orderdetails->position('bottom');

echo $xcrud->render();

Das Öffnen des Bearbeitungsformulars einer Bestellung zeigt jetzt "Order details" als Überschrift mit eigenem Grid direkt unterhalb der eigenen Felder der Bestellung - das Scrollen durch das Formular scrollt den Nested-Abschnitt zusammen mit allem darüber weg.

position('bottom-fixed')

Das klebende Geschwister von bottom: derselbe Abschnitt, aber fixiert (CSS position: sticky) am unteren Rand des eigenen scrollenden Panels des Formulars, während der Besucher durch die Felder darüber scrollt - so bleibt er erreichbar, ohne ganz nach unten scrollen zu müssen. Standardmäßig nimmt er 35 % der Viewport-Höhe ein (min-height: 90px, max-height: 70vh), mit einem ziehbaren Griffbalken am eigenen oberen Rand zum Größenändern und eigenem internen Scroll für die Kindzeilen, damit er nie wachsen muss, um alles auf einmal zu zeigen.

Der Unterschied zum obigen Beispiel ist eine einzige Zeile:

$orderdetails->position('bottom-fixed');

Vollständiges Beispiel, passend zu pages/nested-table-bottom-fixed.php:

$xcrud = Xcrud::get_instance();
$xcrud->table('orders');
$xcrud->route('nested-table-bottom-fixed');
$xcrud->columns('orderNumber,orderDate,status,customerNumber');

$orderdetails = $xcrud->nested_table('Order details', 'orderNumber', 'orderdetails', 'orderNumber');
$orderdetails->columns('productCode,quantityOrdered,priceEach');
$orderdetails->fields('productCode,quantityOrdered,priceEach');
$orderdetails->order_by('productCode', 'asc');
$orderdetails->change_type('priceEach', 'price', '2', ['prefix' => '$']);
$orderdetails->relation('productCode', 'products', 'productCode', 'productName', null, null, false, ' ', true);

// The one line that differs from plain 'bottom'.
$orderdetails->position('bottom-fixed');

echo $xcrud->render();

Öffnen Sie das Bearbeitungsformular der Bestellung und scrollen Sie durch die eigenen Felder - "Order details" bleibt die ganze Zeit nahe dem unteren Rand des Panels fixiert, statt mit dem Rest des Formulars wegzuscrollen, wie es beim einfachen bottom der Fall ist. Ziehen Sie den Griffbalken am eigenen oberen Rand nach oben oder unten, um die Größe anzupassen.

position()-Referenz