jQuery EasyUI Data Grid - Establecer Inmovilizar columnas
Este ejemplo demuestra cómo congelar algunas de las columnas cuando el usuario mueve la barra de desplazamiento horizontal en la parrilla, columnas congelados no pueden desplazarse a la vista exterior.
Para congelar una columna, es necesario definir la propiedad frozenColumns. frozenColumn propiedades y atributos como columnas.
$ ( '# Tt'). Datagrid ({ Título: '' Columnas congeladas, iconCls: 'icono de guardado', anchura: 500, altura: 250, url: "datos / datagrid_data.json ', frozenColumns: [[ El campo {: 'ITEMID', título: "Identificación de artículo, anchura: 80}, El campo {: 'ProductId', título: "Identificación de Producto ', ancho: 80}, ]], columnas: [[ El campo {: 'Precio de la lista', título: 'Precio', ancho: 80, alinee: "derecho"}, El campo {: 'unitcost', título: "Costo unitario, anchura: 80, alinee:" derecho "}, El campo {: 'attr1', título: "Atributo, anchura: 100}, El campo {: 'status', título: "Estado", ancho: 60} ]] });
No es necesario escribir ningún código Javascript, por lo que puede crear una cuadrícula de datos (DataGrid) componentes de la siguiente manera:
<Tabla id = "tt" title = class = estilo "easyui-cuadrícula de datos" "Columnas congeladas" = "width: 500px; altura: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "icono de guardado"> <Culata en T congelado = "true"> <Tr> <Campo Th = "Itemid" width = "80"> ID del elemento </ th> <Campo Th = "ProductID" width = "80"> Identificación del producto </ th> </ Tr> </ Culata en T> <Culata en T> <Tr> <Th Campo = "Precio de la lista" width = "80" align = "right"> Lista de Precios </ th> <Campo Th = "unitcost" width = "80" align = "right"> Costo unitario </ th> <= Th Campo anchura "attr1" = "150"> Atributo </ th> <Campo Th = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Culata en T> </ Table>