jQuery EasyUI data Grid - garis diperluas Tampilkan Detail
Data Grid (datagrid) dapat mengubah tampilan (tampilan) menunjukkan hasil yang berbeda. Gunakan tampilan rinci, data grid (datagrid) dapat menampilkan tombol memperluas ke kiri dari garis data ( "+" atau "-"). Pengguna dapat memperluas baris untuk menampilkan rincian tambahan.
Langkah 1: Buat data grid (datagrid)
<Table id = "dg" style = "width: 500px; height: 250px" url = "datagrid8_getdata.php" pagination = "true" sortName = "Itemid" sortOrder = "desc" title = "datagrid - Bentangkan Row" singleSelect = "true" fitColumns = "true"> <Thead> <Tr> <Bidang Th = "Itemid" width = "60"> ID Item </ th> <Bidang Th = "productid" width = "80"> ID Produk </ th> <Th field = "listprice" align = "right" width = "70"> Daftar Harga </ th> <Th field = "unitcost" align = "right" width = "70"> Satuan Biaya </ th> <Bidang Th = "status" width = "50" align = "center"> Status </ th> </ Tr> </ Thead> </ Table>
Langkah 2: Tetapkan tampilan rinci dari data grid (datagrid)
Untuk menggunakan tampilan rinci, harap ingat untuk merujuk ke file skrip view di header halaman.
<Script type = "text / javascript" src = "http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"> </ script>
$ ( '# Dg'). Datagrid ({ lihat: detailview, detailFormatter: function (index, baris) { kembali '<div class = "DDV" style = "padding: 5px 0"> </ div>'; }, onExpandRow: function (index, baris) { var DDV = $ (ini) .datagrid ( 'getRowDetail', indeks) .find ( 'div.ddv'); ddv.panel ({ border: palsu, cache: palsu, href: '? datagrid21_getdetail.php itemid =' + row.itemid, onLoad: function () { $ ( '# Dg') datagrid ( 'fixDetailRowHeight', indeks) .; } }); $ ( '# Dg') datagrid ( 'fixDetailRowHeight', indeks) .; } });
Kami mendefinisikan fungsi 'detailFormatter' untuk memberitahu grid data (datagrid) bagaimana untuk membuat tampilan detail. Dalam hal ini, kita kembali ke sederhana '<div>' elemen, ia bertindak sebagai wadah untuk rincian. Harap dicatat bahwa informasi lebih lanjut kosong. Ketika pengguna mengklik tombol bentangkan ( '+'), acara onExpandRow akan dipicu. Jadi kita dapat menulis beberapa kode untuk memuat rincian ajax. Akhirnya, kita sebut metode 'fixDetailRowHeight' untuk memperbaiki rincian ketika tinggi baris saat dimuat.
Langkah 3: The kode sisi server
& Lt ;? Php include_once 'conn.php'; $ Itemid = mysql_real_escape_string ($ _ REQUEST [ 'Itemid']); $ Rs = mysql_query ( "select * from barang mana itemid = '$ itemid'"); $ Barang = mysql_fetch_array ($ rs); ? & Gt; <Table class = "dv-table" border = "0" style = "width: 100%;"> <Tr> <Td rowspan = "3" style = "width: 60px"> & Lt ;? Php $ Aa = meledak ( '-', $ itemid); $ Serno = $ aa [1]; $ Img = "images / shirt $ serno.gif"; echo "<img src = \" $ img \ "style = \" width: 60px; margin-right: 20px \ "/>"; ? & Gt; </ Td> <Td class = "dv-label"> ID Item: </ td> <Td> & lt ;? Php echo $ item [ 'Itemid'] ;? & Gt; </ td> <Td class = "dv-label"> ID Produk: </ td> <Td> & lt ;? Php echo $ item [ 'productid'] ;? & Gt; </ td> </ Tr> <Tr> <Td class = "dv-label"> Daftar Harga: </ td> <Td> & lt ;? Php echo $ item [ 'listprice'] ;? & Gt; </ td> <Td class = "dv-label"> Satuan Biaya: </ td> <Td> & lt ;? Php echo $ item [ 'unitcost'] ;? & Gt; </ td> </ Tr> <Tr> <Td class = "dv-label"> Atribut: </ td> <Td colspan = "3"> & lt ;? Php echo $ item [ 'attr1'] ;? & Gt; </ td> </ Tr> </ Table>