Melhor JavaScript / JQuery Grid dinâmico [fechado]

87

Estou trabalhando com JavaScript, JQuery e HTML. A interface do usuário do meu projeto é totalmente dinâmica. Estou procurando uma grade dinâmica de JavaScript / JQuery que ofereça suporte aos seguintes recursos.

Alguém pode me dizer se existe alguma grade de fontes abertas de boa aparência que suporte os seguintes recursos?

Devo ser capaz de criar uma instância da grade em tempo de execução e adicionar ao DOM.
Suporta modelos de coluna (caixa de texto, seleção, caixa de seleção ou qualquer entrada ou texto simples)
Oferece suporte para definir um novo modelo de coluna ou substituir o modelo de coluna existente em tempo real.
Alguns controles de entrada (por exemplo, caixa de texto, caixa de seleção ..) presentes em uma coluna podem ser ativados e poucos podem ser desativados .
Suporta setData () em tempo real.
Suporta evento se algum dado de entrada for alterado pelo usuário.
Deve suportar a seleção de uma linha
Adicione ou exclua o suporte de linha em tempo real sem renderizar toda a grade.
Suporta paginação.
Suporta classificação por qualquer coluna em tempo real.
Dispara um evento se os dados forem classificados pelo usuário em tempo real.
A interface de usuário da grade deve suportar colunas realizáveis
Auto redimensionável (será ótimo se a grade for redimensionada automaticamente de acordo com o tamanho do elemento pai)
Definitivamente, tem uma boa documentação.

javascript jquery grid

— Somnath
fonte

7

Escreva você mesmo. Se você deseja todos esses recursos, precisa fazer isso sozinho. A solução personalizada é sempre a melhor solução.

— Raynos

28

Não tenho certeza se é sempre a melhor solução. Quer dizer - eu não estou prestes a construir meu próprio mecanismo de banco de dados em vez de usar InnoDB ...

— Grim ...

2

@Roynos, eu mesmo escrevi algumas coisas, mas preciso investir muito tempo para implementar todos os recursos, como classificação, redimensionamento ... etc., então estou procurando um controle de grade. Ainda estou avaliando todas as grades, uma por uma.

— Somnath

22

@Raynos Isso é ridículo. A melhor solução é aquela que funciona com o menor custo. Por que construir se já foi feito?

— richard,

@RichardDesLonde você está certo. Minha opção é selecionar a melhor solução existente e estendê-la de acordo com suas necessidades.

— Somnath,

42

Alguns úteis são:

Livre:

Pago:

As melhores entradas na minha opinião são Flexigrid e jQuery Grid.

— Soham
fonte

Até agora comecei a gostar do jQuery Grid. trirand.com/blog/jqgrid/jqgrid.html Mas ainda não tenho certeza. Manter você atualizado ...

— Somnath

@Somnath - O jQuery grid é o que você mais gostou? Tenho uma necessidade semelhante e tenho avaliado DataTables, mas adicionar linhas (e fazer com que façam parte da ordem de classificação) não está funcionando bem.

— MattW

@MattW Sim, eu gosto do jQuery Grid, adicionar dados é realmente fácil. Além disso, você pode tornar cada coluna classificável apenas definindo um sinalizador. Minha lista de requisitos era muito grande. Mas poucas coisas eu mesmo construo e para alguns casos estou usando jQuery Grid. Também ficou uma API legal e fácil. Neste ponto, estou feliz com o jQuery Grid. É bom.

— Somnath de

@Somnath Então, finalmente qual você escolheu? O cabeçalho DataTable também é uma boa opção. Qual é o mais rápido? E qual suporta agrupamento?

— Vivek Vardhan,

@VivekVardhan estou usando trirand.com/blog/jqgrid/jqgrid.html

— Somnath

38

podes tentar http://datatables.net/

DataTables é um plug-in para a biblioteca jQuery Javascript. É uma ferramenta altamente flexível, baseada nos fundamentos do aprimoramento progressivo, que adicionará controles de interação avançados a qualquer tabela HTML. Características principais:

Paginação de comprimento variável
Filtragem em tempo real
Classificação de várias colunas com detecção de tipo de dados
Tratamento inteligente de larguras de coluna
Exibir dados de quase qualquer fonte de dados
DOM, array Javascript, arquivo Ajax e processamento do lado do servidor (PHP, C #, Perl, Ruby, AIR, Gears etc)
Opções de rolagem para janela de visualização da tabela
Totalmente internacionalizável
Suporte jQuery UI ThemeRoller
Sólido como uma rocha - apoiado por um conjunto de mais de 2600 testes de unidade
Grande variedade de plug-ins inc. TableTools, FixedColumns, KeyTable e mais
É grátis!
Economia do estado
Colunas ocultas
Criação dinâmica de tabelas
Carregamento automático de dados Ajax
Posicionamento DOM personalizado
Filtragem de coluna única
Tipos de paginação alternativos
Interação DOM não destrutiva
Classificando coluna (s) destacando
Opções avançadas de fonte de dados
Amplo suporte a plug-ins
Classificação, detecção de tipo, funções de API, paginação e filtragem
Totalmente tematizável por CSS
Documentação sólida
Mais de 110 exemplos pré-construídos
Suporte completo para Adobe AIR

— enclavado
fonte

3

Faça a formatação adequada para os principais recursos. Não use apenas copiar / colar. Tem que ler uma vez após copiar / colar?

O que significa "interação não destrutiva de DOM"? Tendo dificuldade em entender por que isso é novo ou um recurso e o que ele cobre / garante.

— John Zabroski

1

@John não é mais mencionado na página vinculada, mas se você pesquisar essa frase na web, encontrará "A maior mudança na v1.4 é a interação não destrutiva do DOM. O que isso significa é que o DataTables não sobrescreverá os elementos da mesa para realizar suas funções (verdadeiro aprimoramento progressivo!), em vez disso, move os elementos ao redor. Na v1.3 e antes de criar dinamicamente o HTML necessário para o tbody em cada desenho, esse não é mais o caso. A vantagem imediata é que todos os atributos (classes etc) na tabela original são preservados [...] "

— CodeCaster

5

não é software livre eu acho, mmm, um problema com ele.

— David

4

parece que essas grades DataTables legais não são editáveis e, se você precisar, você terá que pagar pela versão editável: editor.datatables.net/purchase/index

— yetanothercoder

8

Minha sugestão para o JQuery Grid dinâmico está abaixo.

http://reconstrukt.com/ingrid/

https://github.com/mleibman/SlickGrid

http://www.datatables.net/index

O melhor é:

DataTables é um plug-in para a biblioteca jQuery Javascript. É uma ferramenta altamente flexível, baseada nos fundamentos do aprimoramento progressivo, que adicionará controles de interação avançados a qualquer tabela HTML.

Paginação de comprimento variável

Filtragem em tempo real

Classificação de várias colunas com detecção de tipo de dados

Tratamento inteligente de larguras de coluna

Exibir dados de quase qualquer fonte de dados

DOM, array Javascript, arquivo Ajax e processamento do lado do servidor (PHP, C #, Perl, Ruby, AIR, Gears etc)

Opções de rolagem para janela de visualização da tabela

Totalmente internacionalizável

Suporte jQuery UI ThemeRoller

Sólido como uma rocha - apoiado por um conjunto de mais de 2600 testes de unidade

Grande variedade de plug-ins inc. TableTools, FixedColumns, KeyTable e mais

Criação dinâmica de tabelas

Carregamento automático de dados Ajax

Posicionamento DOM personalizado

Filtragem de coluna única

Tipos de paginação alternativos

Interação DOM não destrutiva

Classificando coluna (s) destacando

Opções avançadas de fonte de dados

Amplo suporte a plug-ins

Classificação, detecção de tipo, funções de API, paginação e filtragem

Totalmente tematizável por CSS

Documentação sólida

Mais de 110 exemplos pré-construídos

Suporte completo para Adobe AIR

5

Dê uma olhada em agiletoolkit.org, pois ele tem um CRUD simples de usar que suporta 2,4,6,7,9,10 e 12 fora da caixa (usa Ajax para defender a grade ao adicionar, excluir dados e se integra com jquery.

Eu postaria alguns exemplos, mas em um iPad no momento.

— Trevor North
fonte