jQuery EasyUI data Grid - Set Freeze Kolom
Contoh ini menunjukkan bagaimana untuk membekukan beberapa kolom saat pengguna bergerak horizontal scroll bar di grid, kolom beku tidak dapat bergulir ke tampilan luar.
Untuk membekukan kolom, Anda perlu menentukan properti frozenColumns. frozenColumn sifat dan atribut sebagai kolom.
$ ( '# Tt'). Datagrid ({ Judul: 'Kolom Frozen', iconCls: 'icon-save', width: 500, height: 250, url: 'data / datagrid_data.json', frozenColumns: [[ {Bidang: 'Itemid', judul: 'Barang ID', lebar: 80}, {Bidang: 'ProductID', judul: 'ID Produk', lebar: 80}, ]], kolom: [[ {Bidang: 'listprice', judul: 'Daftar Harga', lebar: 80, menyelaraskan: 'benar'}, {Bidang: 'unitcost', judul: 'Satuan Biaya', lebar: 80, menyelaraskan: 'benar'}, {Bidang: 'attr1', judul: 'Atribut', width: 100}, {Bidang: 'Status', judul: 'Status', lebar: 60} ]] });
Anda tidak perlu menulis kode javascript, sehingga Anda dapat membuat data grid (datagrid) komponen sebagai berikut:
<Table id = "tt" title = "Kolom Frozen" class = "easyui-datagrid" style = "width: 500px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "icon-save"> <Thead beku = "true"> <Tr> <Bidang Th = "Itemid" width = "80"> ID Item </ th> <Bidang Th = "productid" width = "80"> ID Produk </ th> </ Tr> </ Thead> <Thead> <Tr> <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>