jQuery EasyUI Data Grid - Set Blocca colonne
Questo esempio dimostra come congelare alcune delle colonne quando l'utente sposta la barra di scorrimento orizzontale sulla griglia di partenza, le colonne congelati non possono passare alla vista esterna.
Per bloccare una colonna, è necessario definire proprietà frozenColumns. frozenColumn proprietà e attributi come colonne.
$ ( '# Tt'). DataGrid ({ Titolo: 'Colonne congelate', iconCls: 'icona-save', larghezza: 500, altezza: 250, URL: 'dati / datagrid_data.json', frozenColumns: [[ {Campo: 'Itemid', titolo: 'ID dell'oggetto', Larghezza: 80}, {Campo: 'IDProdotto', titolo: 'ID prodotto', Larghezza: 80}, ]], colonne: [[ {Campo: 'Prezzo di listino', titolo: 'Listino', Larghezza: 80, allineare: 'destra'}, {Campo: 'Costounitario', titolo: 'Costo unitario', Larghezza: 80, allineare: 'destra'}, {Campo: 'attr1', titolo: 'attributo', Larghezza: 100}, {Campo: 'status', titolo: 'Stato', Larghezza: 60} ]] });
Non è necessario scrivere alcun codice JavaScript, in modo da poter creare una griglia di dati (DataGrid) componenti come segue:
<Table id = titolo "tt" = "Colonne congelati" class = stile "easyui-DataGrid" = "width: 500px; height: 250px" url = "dati / datagrid_data.json" singleSelect = "true" iconCls = "icona-save"> <Thead congelato = "true"> <Tr> <Field Th = "Itemid" width = "80"> ID Articolo </ th> <Field Th = larghezza "ProductID" = "80"> ID prodotto </ th> </ Tr> </ Thead> <Thead> <Tr> <Th campo = larghezza "prezzo di listino" = "80" align = "right"> Listino </ th> <Field Th = "Costounitario" width = "80" align = "right"> Costo Unità </ th> <Th campo = larghezza "attr1" = "150"> attributo </ th> <Field Th = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>