jQuery EasyUI data Grid - ketentuan yang ditetapkan baris warna latar belakang
Tutorial ini akan menunjukkan cara untuk mengubah Line Style data Grid (datagrid) perakitan menurut sejumlah kondisi. Ketika nilai listprice lebih besar dari 50, kita akan menetapkan warna yang berbeda untuk baris.
Dirancang untuk data grid (datagrid) fungsi rowStyler adalah untuk memungkinkan Anda untuk menyesuaikan gaya garis. Kode berikut menunjukkan cara mengubah gaya garis:
<Table id = "tt" title = "DataGrid" style = "width: 600px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" fitColumns = "true"> <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"> Daftar Harga </ th> <Bidang Th = "unitcost" width = "80" align = "right"> Satuan Biaya </ th> <Th field = "attr1" width = "150"> Atribut </ th> <Bidang Th = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>
$ ( '# Tt'). Datagrid ({ rowStyler: function (index, baris) { jika (row.listprice> 50) { kembali 'background-color: pink; warna: biru; font-weight: bold;'; } } });
Seperti yang Anda lihat, kami mengatur latar belakang warna (warna latar belakang), menurut beberapa kondisi untuk merah muda (pink), mengatur warna teks ke biru (biru).