Tabelle Annidate: Bottom e Bottom-Fixed

position('bottom')

Renderizza la tabella annidata come una sezione a larghezza piena, aggiunta subito sotto i campi propri del modulo genitore (o sotto la barra delle schede, se lo stesso modulo ha anche altri figli nested_table() che usano ancora la posizione predefinita tab - ogni posizionamento convive liberamente su un unico modulo). Non serve alcun click su una scheda per vederla:

$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();

Aprendo ora il modulo di modifica di un ordine compare "Order details" come intestazione con la propria griglia subito sotto i campi propri dell'ordine - scorrendo il modulo, la sezione annidata scorre via insieme a tutto ciò che sta sopra.

position('bottom-fixed')

La versione "ancorata" di bottom: la stessa sezione, ma fissata (CSS position: sticky) al fondo del pannello con scroll proprio del modulo, mentre il visitatore scorre i campi sopra di essa - restando raggiungibile senza dover scorrere fino in fondo. Per impostazione predefinita occupa il 35% dell'altezza del viewport (min-height: 90px, max-height: 70vh), con una maniglia trascinabile sul proprio bordo superiore per ridimensionarla, e un proprio scroll interno per le righe figlie, così da non dover mai crescere per mostrare tutto in una volta.

La differenza rispetto all'esempio precedente è una sola riga:

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

Esempio completo, corrispondente a 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);

// L'unica riga che differisce dal semplice 'bottom'.
$orderdetails->position('bottom-fixed');

echo $xcrud->render();

Apri il modulo di modifica dell'ordine e scorri tra i suoi campi propri - "Order details" resta ancorato vicino al fondo del pannello per tutto il tempo, invece di scorrere via con il resto del modulo come fa il semplice bottom. Trascina la barra della maniglia sul proprio bordo superiore verso l'alto o il basso per ridimensionarla.

Riferimento di position()