jQuery EasyUI data Grid - Format Kolom
Contoh-contoh berikut diformat dalam data kolom datagrid easyui dalam, dan menggunakan kustom kolom formatter, jika harga kurang dari 20 teks akan berubah menjadi merah.
Untuk memformat data kolom grid (datagrid), kita perlu mengatur atribut formatter, yang merupakan fungsi. Fungsi format berisi tiga parameter:
- Nilai: nilai bidang yang sesuai di kolom saat ini.
- baris: Data baris saat direkam.
- Indeks: Indeks baris saat.
Membuat data Grid (datagrid)
<Table id = "tt" title = "Memformat Kolom" class = "easyui-datagrid" style = "width: 550px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "icon-save"> <Thead> <Tr> <Bidang Th = "Itemid" width = "80"> ID Item </ th> <Bidang Th = "productid" width = "80"> ID Produk </ th> <Th field = "listprice" width = "80" align = "right" formatter = "formatPrice"> Daftar Harga </ th> <Bidang Th = "unitcost" width = "80" align = "right"> Satuan Biaya </ th> <Th field = "attr1" width = "100"> Atribut </ th> <Bidang Th = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>
Harap dicatat bahwa, bidang 'listprice' memiliki 'formatter' atribut, yang menunjukkan fungsi format.
Menulis Fungsi Formatting
Fungsi formatPrice (val, baris) { jika (val <20) { kembali '<span style = "color: red;"> (' + val + ') </ span>'; } Lain { kembali val; } }