jQuery EasyUI Data Grid - Formatar Colunas
Os exemplos a seguir são formatados em dados da coluna DataGrid easyui dentro, e usar personalizado formatador coluna, se o preço for inferior a 20 texto ficará vermelho.
Para formatar uma coluna de grade de dados (DataGrid), precisamos definir o atributo de formatador, que é uma função. A função de formatação contém três parâmetros:
- valor: o valor do campo correspondente da coluna corrente.
- row: Os dados linha atual é gravado.
- índice: O índice da linha atual.
Criando uma grade de dados (DataGrid)
<Id Tabela = "tt" title = "Colunas Formatação" class = "easyui-datagrid" style = "width: 550px; height: 250px" url = "Dados / datagrid_data.json" singleSelect = "true" iconCls = "icon-salvar"> <Thead> <Tr> <Field Th = "ItemId" width = "80"> Item ID </ th> <Field Th = "ProductID" width = "80"> ID do produto </ th> <Th campo = "ListPrice" width = "80" align = "right" formatador = "formatPrice"> Listar preço </ th> <Field Th = "unitcost" width = "80" align = "right"> Custo Unitário </ th> <Th campo = largura "attr1" = "100"> Atributo </ th> <Field Th = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>
Por favor note que, o campo 'ListPrice "tem um atributo' formatador ', que indica as funções de formatação.
Escrever funções de formatação
função formatPrice (val, linha) { Se (val <20) { retorno "<span style =" color: red; "> ( '+ val +') </ span> '; } Else { regresso Val; } }