1. Home
  2. jQuery EasyUI Data Grid - Formatar Colunas

O melhor tutorial jQuery EasyUI Data Grid - Formatar Colunas em 2024. Neste tutorial você pode aprender Baixar exemplos jQuery EasyUI,

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;
		}
	}

Baixar exemplos jQuery EasyUI

jeasyui-datagrid-datagrid7.zip

Tutoriais quentes

Contact US

jQuery EasyUI Data Grid - Formatar Colunas
10/30