Usuário de Interface Yahoo! Blog (YUIBlog)

Modo de edição rápida para YUI 3 DataTable

19 de abril de 2011 às 3:20 pm por John Lindal | Em Desenvolvimento , YUI 3 Galeria | 1 Comentário

Mesmo que YUI 3 DataTable ainda não tem edição em linha de células individuais, é relativamente simples de implementar modo de edição rápida. O QuickEdit plugin para o DataTable na Galeria 3 YUI permite que todos os valores visíveis em um DataTable a ser editado simultaneamente.

( Clique na imagem para jogar com este exemplo .)

Visão global

Como com o YUI versão 2 , a idéia central do modo de edição rápida é trocar todos os formatadores de células com os novos que povoam as células com elementos de formulário, por exemplo, campos de entrada ou dropdowns. Isso é feito quando start() é chamado, com base na configuração descrita abaixo. Depois que o usuário estiver concluída, você pode chamar getChanges() para obter os valores mudaram e, em seguida, persistem eles. Para sair do modo de edição rápida, chamada cancel() . (É chamado em vez de cancelar a parar para lembrá-lo que ele desfaz todas as alterações.)

Uma vez que o módulo galeria Quick Edit é um plugin para o DataTable, você precisa conectá-lo ao seu datatable antes que você possa usá-lo:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

Esta armazena o plugin no qe membro do datatable, então você deve chamar funções do plugin como este:

 my_table.qe.start ();

Configuração

Quick Edit adiciona dois atributos nova configuração para todas as colunas: quickEdit e qeFormatter .

Se uma coluna quickEdit de propriedade é definida, a coluna vai ser editado no modo de edição rápida. Para aceitar todos os padrões, você pode simplesmente definir quickEdit:true . Para obter mais controle, você pode passar um objeto com as seguintes propriedades:

formatter

O formatador de células o que tornará um campo de formulário apropriado: <input type="text">, <textarea>, ou <select>. Por padrão, o formatador de células Y.Plugin.DataTableQuickEdit.textFormatter é usado para todas as células para produzir elementos de entrada. Para obter uma textarea elemento, configurar uma coluna para usar Y.Plugin.DataTableQuickEdit.textareaFormatter vez.

validation

Configuração de validação para cada campo na coluna.

css

Classes CSS codificação de regras de validação básicas:

yiv-required

Valor não deve ser vazio.

yiv-length:[x,y]

Seqüência deve ser de pelo menos x caracteres e no máximo y caracteres. Pelo menos um dos X e Y devem ser especificados.

yiv-integer:[x,y]

O valor inteiro deve ser, pelo menos, x e, no máximo y . x e y são ambos opcionais.

yiv-decimal:[x,y]

O valor decimal deve ser pelo menos x e, no máximo y . Expoentes não são permitidos. x e y são ambos opcionais.

fn

A função que será chamado com o DataTable como o seu alcance e elemento da célula forma como o argumento. Return true se o valor é válido. Caso contrário, ligue para this.displayMessage(...) para mostrar um erro e, em seguida, retornar false.

msg

Um mapa de tipos de mensagens que serão exibidas quando uma regra de validação básica ou regex falhar. Os tipos válidos são: required , min_length , max_length , integer , decimal , e regex . Não há padrão para o tipo regex , então você deve especificar uma mensagem se você configurar uma validação regex. As mensagens de erro padrão para os outros tipos são armazenadas em Y.FormManager.Strings (fornecido pela galeria formmgr-css-validação ) e pode ser substituído e / ou localizadas.

regex

Expressão regular que o valor deve satisfazer para ser considerado válido.

Às vezes, uma coluna não-editáveis ​​deverão ser prestados de forma diferente durante o modo Quick Edit. O melhor exemplo é uma coluna que contém um link, uma vez que navegar para fora da página, enquanto no modo de edição rápida pode ser desastroso. Para remover o link durante a Edição Rápida, configure qeFormatter para a coluna a ser Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter . Para endereços de e-mail, use Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter . Você também pode escrever personalizado, formatador de somente leitura. Basta seguir as regras normais para a construção de um formatador de células DataTable.

Características faltando

Devido a um bug no 3.3.0 DataTable YUI , a td elemento passado para um formatador coluna é na verdade a partir da coluna anterior. Isso tornou muito problemático para apoiar a cópia para baixo, onde um botão na primeira linha permite que você copiar o valor para baixo para todas as outras linhas.

O bug também necessária uma reformulação completa da célula básica formatadores Quick Edit para retornar texto em vez de manipular o DOM. É por isso que formatadores de célula personalizado não são suportados oficialmente nesta versão inicial. Se você é aventureiro, você ainda pode construí-los, mas tenha em mente que você terá que reescrevê-los, incluindo a adição de suporte para copiar para baixo, uma vez que o bug no DataTable é fixo.

Sobre o autor: John Lindal ( @ jafl5272 no Twitter) é um dos engenheiros levam construir o alicerce sobre o qual Yahoo! APT é construído. Anteriormente, ele trabalhou no Yahoo! Publisher Network.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark with del.icio.us | digg it! | reddit!