jQuery EasyUI Data Grid - erweitert Linien Details Anzeigen
Data Grid (Datagrid) können die Ansicht ändern (Ansicht) unterschiedliche Ergebnisse zu zeigen. Benutzen Sie die Detailansicht, die Datengitter (Datagrid) kann die Taste auf der linken Seite der Datenleitung erweitern Anzeige ( "+" oder "-"). Der Benutzer kann die Reihe erweitern zusätzliche Details anzuzeigen.
Schritt 1: Datenraster erstellen (Datagrid)
<Table id = "dg" style = "width: 500px; height: 250px" url = "datagrid8_getdata.php" Paginierung = "true" sortName = "itemid" sortOrder = "desc" title = "Datagrid - Erweitern Row" singleSelect = "true" fitColumns = "true"> <Thead> <Tr> <Th Feld = "itemid" width = "60"> Item ID </ th> <Th Feld = "productid" width = "80"> Product ID </ th> <Th Feld = "gelisteter" align = "right" width = "70"> Listenpreis </ th> <Th Feld = "Unitcost" align = "right" width = "70"> Kosten pro Einheit </ th> <Th Feld = "Status" width = "50" align = "center"> Status </ th> </ Tr> </ Thead> </ Table>
Schritt 2: Stellen Sie eine Detailansicht des Datengitters (Datagrid)
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 class = "DDV" style = "padding: 5px 0"> </ div>'; }, onExpandRow: function (Index, Zeile) { var ddv = $ (this) .datagrid ( 'getRowDetail', index) .find ( 'div.ddv'); ddv.panel ({ Grenze: false, Cache: false, href: 'datagrid21_getdetail.php Itemid =' + row.itemid, onLoad: function () { $ ( '# Dg') Datagrid ( 'fixDetailRowHeight', index) .; } }); $ ( '# Dg') Datagrid ( 'fixDetailRowHeight', index) .; } });
Wir definieren 'detailFormatter' Funktion, um die Datenraster zu sagen (Datagrid), wie in der Detailansicht zu machen. In diesem Fall kehren wir zu einem einfachen '<div>' Element, wirkt es als Behälter für die Details. Bitte beachten Sie, dass weitere Informationen ist leer. Wenn der Benutzer auf die Schaltfläche klickt erweitern ( "+"), wird onExpandRow Ereignis ausgelöst werden. So können wir einige Code zu laden Ajax-Details schreiben. Schließlich rufen wir die 'fixDetailRowHeight' Methode die Details zu beheben, wenn die Zeilenhöhe bei Belastung.
Schritt 3: Der serverseitigen Code
& Lt ;? Php include_once 'conn.php'; $ Itemid = mysql_real_escape_string ($ _ REQUEST [ 'itemid']); $ Rs = mysql_query ( "select * from Punkt, wo Itemid = '$ itemid'"); $ Item = mysql_fetch_array ($ rs); ? & Gt; <Table class = "dv-Tabelle" border = "0" style = "width: 100%;"> <Tr> <Td rowspan = "3" style = "width: 60px"> & Lt ;? Php $ Aa = explode ( '-', $ itemid); $ Serno = $ aa [1]; $ Img = "images / Hemd $ serno.gif"; echo "<img src = \" img \ "style = \" width $: 60px; margin-right: 20px \ "/>"; ? & Gt; </ Td> <Td class = "dv-label"> Artikelnummer: </ td> <Td> & lt ;? Php echo $ item [ 'itemid'] ;? & gt; </ td> <Td class = "dv-label"> Product ID: </ td> <Td> & lt ;? Php echo $ item [ 'productid'] ;? & gt; </ td> </ Tr> <Tr> <Td class = "dv-label"> Listenpreis: </ td> <Td> & lt ;? Php echo $ item [ 'gelisteter'] ;? & gt; </ td> <Td class = "dv-label"> Einheitskosten: </ td> <Td> & lt ;? Php echo $ item [ 'Unitcost'] ;? & gt; </ td> </ Tr> <Tr> <Td class = "dv-label"> Attribut: </ td> <Td colspan = "3"> & lt ;? Php $ item echo [ 'attr1'] ;? & gt; </ td> </ Tr> </ Table>