jQuery EasyUI Data Grid - Set Spalten fixieren
Dieses Beispiel zeigt, wie einige der Spalten einzufrieren, wenn der Benutzer die horizontale Bildlaufleiste auf dem Gitter bewegt, kann gefrorene Spalten nicht außerhalb der Ansicht blättern.
Um eine Spalte einfrieren, müssen Sie frozenColumns Eigenschaft zu definieren. frozenColumn Eigenschaften und Attribute wie Spalten.
$ ( '# Tt'). Datagrid ({ Titel: 'Gefrorene Spalten ", iconCls: 'icon-save', Breite: 500, Höhe: 250, url: 'data / datagrid_data.json', frozenColumns: [[ {Field: 'itemid', Titel: 'Item ID', Breite: 80}, {Field: 'ProductId', Titel: 'Product ID', Breite: 80}, ]], Spalten: [[ {Field: 'gelisteter', Titel: "Listenpreis", Breite: 80, ausrichten: "Recht"}, {Field: 'Unitcost ", Titel:" Stückkosten ", Breite: 80, ausrichten:" Recht "}, {Field: 'attr1', Titel: 'Attribut', Breite: 100}, {Field: "Status", Titel: 'Status', Breite: 60} ]] });
Sie brauchen keine JavaScript-Code zu schreiben, so dass Sie ein Datenraster erstellen (Datagrid) Komponenten wie folgt:
<Table id = "tt" title = "Frozen Spalten" class = "easyui-Datagrid" style = "width: 500px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "Symbol-save"> <Thead gefroren = "true"> <Tr> <Th Feld = "itemid" width = "80"> Item ID </ th> <Th Feld = "productid" width = "80"> Product ID </ th> </ Tr> </ Thead> <Thead> <Tr> <Th Feld = "gelisteter" width = "80" align = "right"> Listenpreis </ th> <Th Feld = "Unitcost" width = "80" align = "right"> Kosten pro Einheit </ th> <Th Feld = "attr1" width = "150"> Attribut </ th> <Th field = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>