jQuery EasyUI data Grid - Membuat Pembagian
Rincian tampilan menggunakan data grid (datagrid), pengguna dapat memperluas baris untuk menampilkan rincian tambahan. Setiap konten dapat dimuat sebagai rinci baris, sub-grid juga dapat dimuat secara dinamis. Tutorial ini akan menunjukkan cara untuk membuat sub-grid di grid utama.
Langkah 1: Buat grid utama
<Table id = "dg" style = "width: 700px; height: 250px" url = "datagrid22_getdata.php" title = "datagrid - subgrid" singleSelect = "true" fitColumns = "true"> <Thead> <Tr> <Bidang Th = "Itemid" width = "80"> ID Item </ th> <Th field = "productid" width = "100"> ID Produk </ th> <Th field = "listprice" align = "right" width = "80"> Daftar Harga </ th> <Th field = "unitcost" align = "right" width = "80"> Satuan Biaya </ th> <Th field = "attr1" width = "220"> Atribut </ th> <Bidang Th = "status" width = "60" align = "center"> Status </ th> </ Tr> </ Thead> </ Table>
Langkah 2: Set untuk menunjukkan tampilan rinci dari Pembagian
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 style = "padding: 2px"> <table class = "DDV"> </ table> </ div>'; }, onExpandRow: function (index, baris) { var DDV = $ (ini) .datagrid ( 'getRowDetail', indeks) .find ( 'table.ddv'); ddv.datagrid ({ url: '? datagrid22_getdetail.php itemid =' + row.itemid, fitColumns: benar, singleSelect: benar, rownumbers: benar, loadMsg: '', height: 'auto', kolom: [[ {Bidang: 'orderID', judul: 'Pesanan ID', width: 100}, {Bidang: 'kuantitas', judul: 'Jumlah', width: 100}, {Bidang: 'UNITPRICE', judul: 'Harga Satuan', width: 100} ]], OnResize: function () { $ ( '# Dg') datagrid ( 'fixDetailRowHeight', indeks) .; }, onLoadSuccess: function () { setTimeout (function () { $ ( '# Dg') datagrid ( 'fixDetailRowHeight', indeks) .; }, 0); } }); $ ( '# Dg') datagrid ( 'fixDetailRowHeight', indeks) .; } });
Ketika pengguna mengklik tombol bentangkan ( '+'), acara 'onExpandRow' akan dipicu. Kami membuat kotak baru dengan tiga subnet. Ketika data sub-mesh ketika dimuat berhasil atau mengubah ukuran, harap ingat untuk memanggil grid utama metode 'fixDetailRowHeight'.
Langkah 3: The kode sisi server
datagrid22_getdata.php
$ Hasil = array (); termasuk 'conn.php'; $ Rs = mysql_query ( "select * from barang mana itemid di (pilih itemid dari LineItem)"); $ Items = array (); sementara ($ row = mysql_fetch_object ($ rs)) { array_push ($ item, $ row); } json_encode echo ($ item);
datagrid22_getdetail.php
termasuk 'conn.php'; $ Itemid = mysql_real_escape_string ($ _ REQUEST [ 'Itemid']); $ Rs = mysql_query ( "select * from LineItem mana itemid = '$ itemid'"); $ Items = array (); sementara ($ row = mysql_fetch_object ($ rs)) { array_push ($ item, $ row); } json_encode echo ($ item);