jQuery EasyUI Data Grid - Definir Congelar colunas
Este exemplo demonstra como para congelar algumas das colunas quando o usuário move a barra de rolagem horizontal na grelha, colunas congeladas não pode rolar para a visão de fora.
Para congelar uma coluna, você precisa definir frozenColumns propriedade. Propriedades frozenColumn e atributos como colunas.
$ ( "# Tt '). Datagrid ({ Título: 'colunas congeladas', iconCls: 'icon-save', width: 500, height: 250, url: 'data / datagrid_data.json', frozenColumns: [[ {Field: 'ItemId', título: 'ID Item', largura: 80}, {Field: "ProductID", título: 'ID do produto, largura: 80}, ]], colunas: [[ {Field: 'ListPrice', título: «Lista de preços ', largura: 80, alinhamento:' direita '}, {Field: 'unitcost', título: 'Custo Unitário, largura: 80, alinhamento:' direita '}, {Field: 'attr1', título: 'atributo', width: 100}, {Field: 'status', título: 'Status', largura: 60} ]] });
Você não precisa escrever qualquer código javascript, de modo que você pode criar uma grade de dados (datagrid) componentes como se segue:
<Id Tabela = "tt" title = "colunas congeladas" class = "easyui-datagrid" style = "width: 500px; height: 250px" url = "Dados / datagrid_data.json" singleSelect = "true" iconCls = "icon-salvar"> <Thead congelada = "true"> <Tr> <Field Th = "ItemId" width = "80"> Item ID </ th> <Field Th = "ProductID" width = "80"> ID do produto </ th> </ Tr> </ Thead> <Thead> <Tr> <Th campo = "ListPrice" width = "80" align = "right"> Listar preço </ th> <Field Th = "unitcost" width = "80" align = "right"> Custo Unitário </ th> <Th campo = largura "attr1" = "150"> Atributo </ th> <Field Th = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>