jQuery EasyUI danych Siatka - Tworzenie Podrejony
Szczegóły widoku używa siatki danych (DataGrid), użytkownik może rozszerzyć wiersz, aby wyświetlić dodatkowe szczegóły. Wszelkie treści może być załadowany jako detal wierszu, sub-sieci mogą być również ładowane dynamicznie. Ten poradnik pokaże Ci, jak stworzyć sub-siatkę na głównej sieci.
Krok 1: Tworzenie głównej sieci
<Table id = "DG" style = "width: 700px; height: 250px" url = "datagrid22_getdata.php" title = "DataGrid - subgrid" singleSelect = "true" fitColumns = "true"> <THEAD> <Tr> <Pole Th = "itemid" width = "80"> Item ID </ th> <Th pole = "productid" width = "100"> ID produktu </ th> <Th pole = "ListPrice" align = "right" width = "80"> Cennik </ th> <Th pole = "unitcost" align = "right" width = "80"> </ jednostkowy koszt th> <Th pole = "attr1" width = "220"> Atrybut </ th> <Pole Th = "status" width = "60" align = "center"> Stan </ th> </ Tr> </ THEAD> </ Table>
Krok 2: Ustaw, aby wyświetlić szczegółowy widok podobszarach
W celu wykorzystania szczegółowy widok, proszę pamiętać, aby odwołać się do pliku skryptu widoku w nagłówku strony.
<Script type = "text / javascript" src = "http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"> </ script>
$ ( '# Dg "). DataGrid ({ Widok: detailview, detailFormatter: function (indeksowe, wiersz) { Zwrot '<div style = "padding: 2px"> <table class = "DDV"> </ table> </ div>'; } onExpandRow: function (indeksowe, wiersz) { var DDV = $ (this) .datagrid ( "getRowDetail ', index) .find (" table.ddv'); ddv.datagrid ({ url: '? datagrid22_getdetail.php ItemID =' + row.itemid, fitColumns: prawda, singleSelect: prawda, rownumbers: prawda, loadMsg: '' wysokość: 'auto', kolumny: [[ {Pole: "idZamówienia", tytuł: 'ID zamówienia, szerokość: 100} {Pole: "ilość", tytuł: "Ilość", szerokość: 100} {Pole: "CenaJednostkowa", tytuł: "Cena za sztukę, szerokość: 100} ]] onResize: function () { $ ( '# Dg ") DataGrid (" fixDetailRowHeight', index) .; } onLoadSuccess: function () { setTimeout (function () { $ ( '# Dg ") DataGrid (" fixDetailRowHeight', index) .; }, 0); } }); $ ( '# Dg ") DataGrid (" fixDetailRowHeight', index) .; } });
Gdy użytkownik kliknie przycisk rozszerzenia ( "+"), zostaną wywołane zdarzenie "onExpandRow '. Tworzymy nową siatkę z trzech podsieci. Gdy dane sub-mesh po załadowaniu powodzeniem lub zmienić rozmiar, należy pamiętać, aby zadzwonić do głównej sieci metodą "fixDetailRowHeight '.
Krok 3: kod po stronie serwera
datagrid22_getdata.php
$ Result = array (); to "conn.php '; $ R = mysql_query ( "select * from pozycji, w której ItemID w (wybierz itemID od obiekcie LineItem)"); $ Items = array (); while ($ row = mysql_fetch_object ($ rs)) { array_push ($ przedmiotów, $ wiersz); } echo json_encode ($ przedmiotów);
datagrid22_getdetail.php
to "conn.php '; $ Itemid = mysql_real_escape_string ($ _ REQUEST [ 'itemid']); $ R = mysql_query ( "select * from obiekcie LineItem gdzie ItemID = '$ itemid'"); $ Items = array (); while ($ row = mysql_fetch_object ($ rs)) { array_push ($ przedmiotów, $ wiersz); } echo json_encode ($ przedmiotów);