Datagrid di easyui menampilkan data dalam bentuk tabel dan memberikan dukungan fungsional yang kaya untuk memilih, menyortir, mengelompokkan dan mengedit data. Datagrid dirancang untuk mengurangi waktu pengembangan dan untuk mencegah pengembang memiliki pengetahuan khusus. Ringan dan kaya fitur. Gabungan sel, judul multi-kolom, kolom beku dan footer hanyalah beberapa fitur.
1. Tinjau konten Bagian 4
Di bagian 4, kami menggunakan EasyUi untuk membangun bilah menu di sebelah kiri, dan tab yang sesuai muncul di sebelah kanan dengan mengklik opsi menu. Di bagian ini, kami akan menggunakan Datagrid untuk menyelesaikan bagian tab di sebelah kanan. Mari pertama -tama lihat file AIndex.jsp terakhir di Bagian 4 (lihat juga konten di Bagian 4):
2. Beberapa cara untuk membuat kontrol datagrid
Data tampilan Datagrid ada dalam format JSON, jadi kami harus terlebih dahulu mengemas data yang diperoleh dari latar belakang ke dalam format Jason, dan kemudian meneruskannya ke meja depan untuk membiarkan Datagrid ditampilkan. Di bagian ini, kami tidak akan mendapatkan data dari latar belakang. Pertama siapkan file .json, yang berisi data dalam format yang sama. Kemudian kami akan membiarkan Datagird ditampilkan, pertama -tama membuat fungsi tampilan dengan baik, dan kemudian meminta data latar belakang.
Mari pertama -tama lihat format tampilan datagrid dari dokumen referensi EyyUi, seperti yang ditunjukkan pada gambar di bawah ini:
Kami melihat ke bawah di sepanjang dokumen referensi dan kami menemukan bahwa ruang datagrid dibuat melalui <able>, dan ada tiga cara untuk membuatnya:
Yang pertama: Buat datagrid dari elemen tabel yang ada, mendefinisikan kolom, baris, dan data dalam HTML.
Tipe kedua: Buat kontrol datagrid melalui tag <able>. Gunakan tag <t th> untuk menentukan kolom dalam tabel.
Jenis ketiga: Gunakan JavaScript untuk membuat kontrol datagrid.
Kami mengadopsi tipe ketiga, menggunakan JS untuk membuat kontrol datagrid. Pertama, kita harus menyiapkan file yang menyimpan data format JSON. Ada beberapa file JSON di bawah webroot/jQuery-easyui-1.3.5/demo/datagrid/. Kami memilih datagrid_data1.json, menyalinnya ke direktori webroot, memodifikasi parameter, dan kami akan menampilkan data dalam file json ini nanti. sebagai berikut:
{"Total": 10, "ROWS": [{"Code": "Fi-SW-01", "ProductName": "Koi", "Price": 10.00}, {"kode": "K9-DL-01", "ProductName": "Dalmation", "Price": 12.00}, {"Code": "RP-SN-01", "ProductName": "Rattlesnake", "Price": 12.00}, {"kode": "RP-Li-02", "ProductName": "iguana", "Price": 12.00}, {"Code": "fl-dsh-01," Produce ":" "" "": "" "" "," "" "" "" "{" iguans "," iguans "," iguana "," "" {"Code": "FL-DSH-01", "ProductName": "Manx", "Price": 12.00}, {"Code": "FL-DLH-02", "ProductName": "Persia", "Harga": 12.00}, {"Code": "FL-DLH-02", "ProductName", "ProductName", "ProductName", "ProductName", "," FL-DLH-02 ",", "," FL-DLH-02 ",", "," {"Code": "AV-CB-01", "ProductName": "Amazon Parrot", "Price": 92.00}, {"kode": "AV-CB-03", "ProductName": "Amazon Parrot", "Price": 92.00}]} Kita dapat melihat bahwa format data JSON adalah: "key1": value1, "key2": value2. Setiap nilai dapat berupa array, dan data Jason baru disimpan dalam array.
Dengan file JSON, kami dapat merancang kontrol datagrid berikutnya. Seluruh datagrid dirancang di query.jsp, karena konten yang akan ditampilkan adalah konten di query.jsp. Mari kita lihat halaman kueri.jsp:
<%@ page language = "java" import = "java.util.*" pageenCoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transisi // en"> <html> <pead> <%@ termasuk file = "/head.jsp." "%"%Jrips = "%jrips/"%jrips = "%jrips ="%jrips = "%jrips ="%jrips = "@ jepsprips ="%public. " $ (function () {$ ('#dg'). datagrid ({// alamat url dari data permintaan akan diubah untuk meminta url url kita sendiri: 'datagrid_data.json', loadmsg: 'loading ......, queryparams: {type:' ''}, // parameters // wid. tidak akan menjadi bilah gulir horizontal. console.info ("index" + index + "," + row) if (index % 2 == 0) {return 'latar belakang: #ffff;'; Ketika lebar lebih besar dari 250, bilah gulir akan ditampilkan, tetapi kolom beku tidak ada di bilah gulir frozencolumns: [[{field: 'centang kotak', kotak centang: true}, {field: 'judul: /judul: Width: 200}]], // Konfigurasi bidang kolom dari DataGrid // NOMOR: The NAME: 200}], // Konfigurasikan bidang kolom dari DataGrid // NAME: The COLUMNLE, NAME: The COLUMNLE, KOLOM LAPUS DATRID, POLUMN LOUMLE, POLUM POLUMLE, KOLOM LOUME DATRID, KOLOM DATRID, BIDE KOLOM DATRID, BIDE, FIEL THE COLUMNLE, LIBUK: 200 Judul, yang ditampilkan untuk orang -orang untuk melihat kolom: [[{field: 'ProductName', judul: 'Nama kategori', lebar: 100, // Gunakan untuk memformat nilai kolom saat ini, pengembalian adalah formatter data akhir: fungsi (nilai, baris, indeks) {return "<span>" + nilai + "</span>"; }}, {field: 'harga', judul: 'harga', lebar: 100, styler: function (nilai, baris, indeks) {// Tetapkan gaya sel saat ini, dan string yang dikembalikan secara langsung diserahkan ke atribut gaya // console.info ("val:" + value + ", baris:" + baris + ", indeks:" + if (val "val:" + rance: " + ROW:" + ("Nilai:" }}}]]}); }); </script> </head> <body> <Table id = "dg"> </able> </body> </html>3. Properti Kontrol Datagrid
Kami dapat melihat bahwa jika Anda menggunakan JS untuk membuat kontrol datagrid, Anda hanya memerlukan tag <able>, yang terutama dilakukan di JS. Kontrol Datagrid sangat kuat. Di sini kami terutama melakukan tampilan dasar. Untuk lebih banyak fungsi lainnya, silakan merujuk ke dokumen pengembangan Easyui. Kami sekarang melakukan analisis pada file kueri.jsp di atas:
Pertama -tama, kontrol datagrid memiliki dua properti: satu adalah properti datagrid dan yang lainnya adalah properti kolom . Seperti namanya, properti Datagrid adalah atribut yang ditambahkan ke seluruh kontrol datagrid, dan properti kolom adalah untuk kolom tertentu. Ada banyak atribut di masing -masing, dan hanya beberapa atribut dasar dan umum yang digunakan di sini.
Hal terpenting dalam properti Datagrid adalah properti kolom, yang merupakan array yang dapat membuat beberapa kolom, lihat tangkapan layar di bawah ini:
Mari kita lihat detail di atribut kolom:
Dalam atribut kolom, bidang mewakili nama bidang, sesuai dengan kunci data JSON, dan kemudian judul adalah judul yang akan ditampilkan untuk pengguna. Lihat file query.jsp. Ada beberapa atribut dasar lain yang dapat dirujuk ke dokumen Easyui. Dua properti yang lebih penting dan umum digunakan dalam properti kolom adalah formatter dan styler, yang digunakan untuk memformat nilai kolom saat ini dan mengatur gaya sel. Mari kita lihat dua properti ini:
Mari kita analisis secara rinci cara menggunakan dua properti kolom ini di atribut kolom di query.jsp di atas:
{Field: 'ProductName', Judul: 'Nama Kategori', Lebar: 100, // Gunakan untuk memformat nilai kolom saat ini, pengembaliannya adalah formatter data akhir: fungsi (nilai, baris, indeks) {return "<span>" + value + "</span>"; // Set untuk menempatkan mouse pada dan menampilkan nilai nilai}}, {span> "; fungsi (nilai, baris, indeks) {// Atur gaya sel saat ini, dan string yang dikembalikan secara langsung diserahkan ke atribut gaya // console.info ("val:" + value + ", baris:" + baris + ", indeks:" + indeks) jika (nilai <20) {// Jika nilai nilai lebih dari 20 color ';'; '; // Tunjukkan nilainya dalam}}}}Lalu mari kita lihat beberapa properti dari kontrol datagrid:
URL mewakili sumber data yang akan ditampilkan. Tetapkan sebagai datagrid_data.json di sini berarti bahwa sumber data adalah file JSON ini dan ditempatkan di direktori webroot;
LoadMSG mewakili informasi yang ditampilkan selama pemuatan data;
QueryParams berarti parameter yang diteruskan ke latar belakang, dan tidak dapat digunakan di sini, karena kami belum terkait dengan latar belakang, tetapi hanya menampilkan file JSON, yang akan digunakan nanti;
Setelah Fitcolums diatur ke True, itu berarti bahwa ekspansi horizontal akan diperluas secara horizontal secara otomatis dan lebar kisi adaptif akan diadaptasi. Dengan cara ini, tidak akan ada batang gulir di arah horizontal, dan tidak perlu mengatur lebar;
Lebar adalah lebar. Jika data terlalu panjang dan tidak dapat ditampilkan, bilah gulir akan muncul dalam arah horizontal;
Setelah striped diatur ke true, itu berarti bahwa persimpangan zebra ditampilkan. Ini adalah gaya tampilan. Cobalah saja;
Jika Nowrap diatur ke True, itu berarti bahwa ketika ada terlalu banyak data, itu tidak akan dibungkus dengan baris, jika tidak ketika ada terlalu banyak data pada baris tertentu, itu akan jelek;
Ketika pagination diatur ke true, itu berarti bahwa fungsi paging diaktifkan;
Ketika Singleselect diatur ke true, hanya satu baris yang diizinkan untuk diperiksa. Seleksi semua fungsi tidak valid dan terutama digunakan untuk kotak centang di kolom depan;
Frozencolums adalah untuk mengatur kolom beku, dan kolom yang disetel dalam frozencolum tidak akan mengubah ukurannya. Jika {field: 'centang kotak', kotak centang: true} diatur, itu berarti bahwa ini adalah kolom kotak centang, yang dipilih untuk pengguna. Jika Singleselect di atas ditetapkan, maka hanya satu yang dapat dipilih, tidak semuanya;
Rowstyler adalah gaya semua baris. Dua parameter adalah indeks baris dan baris. Di atas diatur bahwa bahkan baris putih dan baris aneh berwarna kuning.
Tunggu ... Ada properti lain dari kontrol datagrid, Anda dapat merujuk pada dokumentasi teknis Easyui, dan saya tidak akan menjelaskannya satu per satu di sini.
4. Pengaruh Daftar Data Datagrid
Oke, setelah menyelesaikan query.jsp, kami restart tomcat, lalu masukkan latar belakang, klik pada manajemen kategori di bilah menu di sebelah kiri, dan tab manajemen kategori akan muncul di sebelah kanan, dan kemudian data JSON yang kami tentukan akan ditampilkan. Data Jason ini ditempatkan di direktori webroot sendiri. Kemudian, kami akan mengintegrasikan JSON dan Struts untuk secara dinamis mendapatkan data JSON yang dikirimkan dari latar belakang.
(Catatan: Pada akhirnya, saya akan memberikan pengunduhan kode sumber dari seluruh proyek! Semua orang dipersilakan untuk mengumpulkan atau berbagi)
Alamat asli: http://blog.csdn.net/eson_15/article/details/51322262
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.