1. Home
  2. jQuery EasyUI Data Grid - Editor de Extensão

O melhor tutorial jQuery EasyUI Data Grid - Editor de Extensão em 2024. Neste tutorial você pode aprender Baixar exemplos jQuery EasyUI,

jQuery EasyUI Data Grid - Editor de Extensão

Alguns editor comum (editor) adicionada à grade de Dados (datagrid), para que os usuários editar os dados. Tudo editor (editor) são definidos no objeto $ .fn.datagrid.defaults.editors, isso pode ser estendido para suportar novo editor de herança (editor). Este tutorial irá mostrar-lhe como adicionar uma nova edição numberspinner à grade de dados (datagrid).

Editor de numberspinner estendida Herdado 

	$ .extend ($. Fn.datagrid.defaults.editors, {
		numberspinner: {
			o init: function (recipiente, opções) {
				var $ input = ( '<input type = "text">') appendTo (container) .;
				voltar input.numberspinner (opções);
			},
			destruir: function (target) {
				$ (Target) .numberspinner ( 'destruir');
			},
			getValue: function (target) {
				voltar .numberspinner $ (alvo) ( 'getValue');
			},
			setValue: function (-alvo, value) {
				$ (Target) .numberspinner ( 'setValue', value);
			},
			redimensionar: function (alvo, largura) {
				$ (Target) .numberspinner ( 'redimensionar, largura);
			}
		}
	});

Criando uma grade de dados (DataGrid) em tag html 

	<Table id = "tt" style = "width: 600px; height: 250px"
			url = "Dados / datagrid_data.json" title = "iconCls editável DataGrid" = "icon-editar"
			singleSelect = "true" IDField = "ItemId" fitColumns = "true">
		<Thead>
			<Tr>
				<Field Th = "ItemId" width = "60"> Item ID </ th>
				<Th campo = "ListPrice" width = "80" align = "right" editor = "{type: 'numberbox', opções: {precisão: 1}}"> Listar preço </ th>
				<Field Th = "unitcost" width = "80" align = "right" editor = "numberspinner"> Custo Unitário </ th>
				<Th campo = "attr1" width = "180" editor = "text"> Atributo </ th>
				<Th campo = largura "status" = "60" align = editor "centro" = "{type: 'caixa', opções: {on: 'P', off: ''}}"> Estado </ th>
				<Field Th = "ação" width = "80" align = "center" formatador = "formatAction"> Action </ th>
			</ Tr>
		</ Thead>
	</ Table>

Atribuímos editor numberspinner aos campos "Unidade de custo. Quando você começar a editar uma linha, o usuário pode editar os dados pelo editor numberspinner.

Baixar exemplos jQuery EasyUI

jeasyui-datagrid-datagrid23.zip

Tutoriais quentes

Contact US

jQuery EasyUI Data Grid - Editor de Extensão
10/30