Nested Tables: Aside Left & Right

position('left') / position('right')

Beide Werte lassen die Nested Table als fest breite Spalte laufen (standardmäßig 300px, min-width: 160px, max-width: 60vw), klebend am oberen Rand des Panels, neben den eigenen Feldern des übergeordneten Formulars (dessen einfache Felder, Tab-Leiste und etwaige bottom/bottom-fixed-Abschnitte) statt darüber oder darunter. Beide erhalten eine ziehbare Kante zum Anpassen der Spaltenbreite und einen eigenen internen Scroll für die Kindzeilen - dieselbe Kombination aus klebendem Verhalten, ziehbarem Griff und internem Scroll, die bottom-fixed verwendet, nur seitwärts gedreht.

left platziert die Nested-Spalte links, die eigenen Felder des übergeordneten Datensatzes fließen rechts; right spiegelt das. So oder so sitzt der ziehbare Griff jeweils an der Kante, die an die Hauptformularspalte grenzt.

Beispiel: left

Passend zu pages/nested-table-left.php:

$xcrud = Xcrud::get_instance();
$xcrud->table('orders');
$xcrud->route('nested-table-left');
$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);

$orderdetails->position('left');

echo $xcrud->render();

Das Öffnen des Bearbeitungsformulars einer Bestellung zeigt hier "Order details" als feste Spalte, die die linke Seite hinunterläuft, oben im Panel fixiert, während die eigenen Felder der Bestellung rechts daneben scrollen. Ziehen Sie an ihrer rechten Kante, um sie breiter oder schmaler zu machen.

Beispiel: right

Der Ein-Zeilen-Unterschied:

$orderdetails->position('right');

Dasselbe Layout, gespiegelt - die Nested-Spalte läuft jetzt die rechte Seite hinunter, mit dem ziehbaren Griff an ihrer linken Kante (der Kante, die an die eigenen Felder des übergeordneten Datensatzes grenzt), und die Felder des übergeordneten Datensatzes fließen stattdessen links.

position()-Referenz