jQuery EasyUI Data Grid - Erstellen von Untergliederungen
Details der Ansicht verwendet das Datengitter (Datagrid), kann der Benutzer die Reihe erweitern zusätzliche Details anzuzeigen. Jeder Inhalt kann als Detailzeile, Unter Gitter geladen werden kann auch dynamisch geladen werden. Dieses Tutorial zeigt Ihnen, wie ein Unter Raster auf dem Hauptnetz zu schaffen.
Schritt 1: Erstellen Sie das Hauptnetz
<Table id = "dg" style = "width: 700px; height: 250px" url = "datagrid22_getdata.php" title = "Datagrid - Subgrid" singleSelect = "true" fitColumns = "true"> <Thead> <Tr> <Th Feld = "itemid" width = "80"> Item ID </ th> <Th Feld = "productid" width = "100"> ID Produkt </ th> <Th Feld = "gelisteter" align = "right" width = "80"> Listenpreis </ th> <Th Feld = "Unitcost" align = "right" width = "80"> Kosten pro Einheit </ th> <Th Feld = "attr1" width = "220"> Attribut </ th> <Th field = "status" width = "60" align = "center"> Status </ th> </ Tr> </ Thead> </ Table>
Schritt 2: Stellen Sie eine Detailansicht des Unterteilungen zu zeigen,
Um eine Detailansicht zu verwenden, denken Sie bitte daran zu einem View Skript-Datei im Seitenkopf zu verweisen.
<Script type = "text / javascript" src = "http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"> </ script>
$ ( '# Dg'). Datagrid ({ Ansicht: Detailansicht, detailFormatter: function (Index, Zeile) { return '<div style = "padding: 2px"> <table class = "DDV"> </ table> </ div>'; }, onExpandRow: function (Index, Zeile) { var ddv = $ (this) .datagrid ( 'getRowDetail', index) .find ( 'table.ddv'); ddv.datagrid ({ url: '? datagrid22_getdetail.php Itemid =' + row.itemid, fitColumns: true, singleSelect: true, rownumbers: true, loadMsg: '', Höhe: 'auto', Spalten: [[ {Field: 'ORDERID', Titel: 'Order ID', Breite: 100}, {Field: "Menge", Titel: "Menge", Breite: 100}, {Field: 'Einzelpreis', Titel: 'Einheitspreis', Breite: 100} ]], onResize: function () { $ ( '# Dg') Datagrid ( 'fixDetailRowHeight', index) .; }, onLoadSuccess: function () { setTimeout (function () { $ ( '# Dg') Datagrid ( 'fixDetailRowHeight', index) .; }, 0); } }); $ ( '# Dg') Datagrid ( 'fixDetailRowHeight', index) .; } });
Wenn der Benutzer auf die Schaltfläche klickt erweitern ( '+'), 'onExpandRow' Ereignis ausgelöst. Wir schaffen ein neues Raster mit drei Subnetzen. Wenn die Teilnetzdaten bei einer erfolgreichen oder ändern Sie die Größe geladen, erinnern Sie bitte das Hauptraster-Methode "fixDetailRowHeight" zu nennen.
Schritt 3: Der serverseitigen Code
datagrid22_getdata.php
$ Ergebnis = array (); schließen 'conn.php'; $ Rs = mysql_query ( "select * from Punkt, wo itemid in (wählen itemid von lineitem)"); $ Artikel = array (); while ($ row = mysql_fetch_object ($ rs)) { array_push ($ items, $ row); } Echo json_encode ($ items);
datagrid22_getdetail.php
schließen 'conn.php'; $ Itemid = mysql_real_escape_string ($ _ REQUEST [ 'itemid']); $ Rs = mysql_query ( "select * from lineitem wo Itemid = '$ itemid'"); $ Artikel = array (); while ($ row = mysql_fetch_object ($ rs)) { array_push ($ items, $ row); } Echo json_encode ($ items);