Лучшая динамическая сетка JavaScript / JQuery [закрыто]

87

Я работаю с JavaScript, JQuery и HTML. UI моего проекта полностью динамичный. Я ищу динамическую сетку JavaScript / JQuery, которая поддерживает следующие функции.

Может ли кто-нибудь сказать мне, есть ли какая-нибудь хорошо выглядящая сетка с открытым исходным кодом, которая поддерживает следующие функции?

  1. Я должен иметь возможность создать экземпляр сетки во время выполнения и добавить его в DOM.
  2. Поддерживает шаблоны столбцов (текстовое поле, выбор, флажок или любые поля ввода или простой текст)
  3. Поддерживает установку нового шаблона столбца или замену существующего шаблона столбца в режиме реального времени.
  4. Некоторые элементы управления вводом (например, текстовое поле, флажок ...), присутствующие в столбце, могут быть включены, а некоторые могут быть отключены .
  5. Поддерживает setData () в реальном времени.
  6. Поддерживает событие, если какие-либо входные данные были изменены пользователем.
  7. Он должен поддерживать выбор строки
  8. Добавляйте строки или удаляйте поддержку строк в реальном времени без рендеринга всей сетки.
  9. Поддерживает пейджинг.
  10. Поддерживает сортировку по любому столбцу в реальном времени.
  11. Запускает событие, если данные сортируются пользователем в режиме реального времени.
  12. Пользовательский интерфейс сетки должен поддерживать реализуемые столбцы
  13. Автоматическое изменение размера (будет здорово, если размер сетки будет автоматически изменяться в соответствии с размером родительского элемента)
  14. Определенно хорошая документация.
Сомнатх
источник
7
Напишите это сами. Если вам нужны все эти функции, вам нужно сделать это самостоятельно. Индивидуальное решение - всегда лучшее решение.
Raynos
28
Я не уверен, что это всегда лучшее решение. Я имею в виду - я не собираюсь создавать собственный движок базы данных вместо того, чтобы использовать InnoDB ...
Мрачный ...
2
@Roynos, я сам написал несколько вещей, но мне нужно потратить много времени на реализацию всех функций, таких как сортировка, изменение размера ... и т. Д., Поэтому я ищу элемент управления сеткой. Я все еще оцениваю все сетки одну за другой.
Somnath
22
@Raynos Это смешно. Лучшее решение - это решение, работающее с наименьшими затратами. Зачем строить, если это уже сделано?
Ричард
@RichardDesLonde, ты прав. Мой вариант - выбрать существующее лучшее решение и расширить его в соответствии с вашими требованиями.
Somnath

Ответы:

42

Некоторые полезные:

Свободно:

Оплачено:

На мой взгляд, лучшие записи - это Flexigrid и jQuery Grid.

Сохам
источник
До сих пор мне нравился jQuery Grid. trirand.com/blog/jqgrid/jqgrid.html Но все же я не уверен. Держите вас в курсе ...
Somnath
@Somnath - Вы больше всего довольны сеткой jQuery? У меня есть аналогичная потребность, и я оценивал DataTables, но добавление строк (и включение их в порядок сортировки) не работает.
MattW
@MattW Да, мне нравится jQuery Grid, добавлять данные очень просто. Также вы можете сделать каждый столбец сортируемым, просто установив флаг. Список моих требований был действительно большим. Но кое-что я создаю сам, и в некоторых случаях я использую jQuery Grid. У него также есть классный и простой API. На данный момент я доволен jQuery Grid. Это хорошо.
Somnath
@Somnath Итак, какой из них ты наконец выбрал? Заголовок DataTable - тоже хороший вариант. Какой из них самый быстрый? А какой из них поддерживает группировку?
Вивек Вардхан
@VivekVardhan им с помощью trirand.com/blog/jqgrid/jqgrid.html
Сомнатх
38

вы можете попробовать http://datatables.net/

DataTables - это плагин для библиотеки jQuery Javascript. Это очень гибкий инструмент, основанный на принципах прогрессивного улучшения, который добавит расширенные элементы управления взаимодействием в любую таблицу HTML. Ключевая особенность:

  • Пагинация переменной длины
  • Фильтрация на лету
  • Сортировка по нескольким столбцам с определением типа данных
  • Умная обработка ширины столбцов
  • Отображение данных практически из любого источника данных
  • DOM, массив Javascript, файл Ajax и обработка на стороне сервера (PHP, C #, Perl, Ruby, AIR, Gears и т. Д.)
  • Параметры прокрутки для области просмотра таблицы
  • Полностью интернационализированный
  • Поддержка jQuery UI ThemeRoller
  • Надежность - поддерживается набором из 2600+ модульных тестов
  • Широкий выбор плагинов, вкл. TableTools, FixedColumns, KeyTable и другие
  • Это бесплатно!
  • Государственная экономия
  • Скрытые столбцы
  • Динамическое создание таблиц
  • Автоматическая загрузка данных Ajax
  • Пользовательское позиционирование DOM
  • Фильтрация по одному столбцу
  • Альтернативные типы пагинации
  • Неразрушающее взаимодействие с DOM
  • Сортировка выделения столбцов
  • Дополнительные параметры источника данных
  • Обширная поддержка плагинов
  • Сортировка, определение типа, функции API, разбиение на страницы и фильтрация
  • Полностью настраивается с помощью CSS
  • Надежная документация
  • 110+ готовых примеров
  • Полная поддержка Adobe AIR
анклав
источник
3
Пожалуйста, сделайте правильное форматирование для ключевых функций. Не используйте просто копирование / вставку. Придется прочитать его один раз после копирования / вставки?
Что означает «неразрушающее взаимодействие с DOM»? Трудно понять, почему это новинка или функция, и что она покрывает / гарантирует.
Джон Заброски
1
@John это больше не упоминается на связанной странице, но если вы поищете в Интернете это предложение, вы обнаружите: «Самое большое изменение в версии 1.4 - это неразрушающее взаимодействие с DOM. Это означает, что DataTables не будет перезаписывать элементы таблицы, чтобы выполнять свои функции (истинное прогрессивное улучшение!), скорее он перемещает элементы. В версии 1.3 и до того, как он динамически создавал HTML, необходимый для тела при каждом рисовании, это уже не так. Непосредственным преимуществом является то, что все атрибуты (классы и т. Д.) В исходной таблице сохраняются [...] »
CodeCaster
5
это не бесплатное программное обеспечение, я думаю, что это проблема.
Дэвид
4
Кажется, эти классные сетки DataTables не редактируются, и если вам это нужно - вы должны заплатить за редактируемую версию: editor.datatables.net/purchase/index
stillanothercoder 05
8

Мое предложение для динамической сетки JQuery ниже.

http://reconstrukt.com/ingrid/

https://github.com/mleibman/SlickGrid

http://www.datatables.net/index

Лучше всего:

DataTables - это плагин для библиотеки jQuery Javascript. Это очень гибкий инструмент, основанный на принципах прогрессивного улучшения, который добавит расширенные элементы управления взаимодействием в любую таблицу HTML.

Пагинация переменной длины

Фильтрация на лету

Сортировка по нескольким столбцам с определением типа данных

Умная обработка ширины столбцов

Отображение данных практически из любого источника данных

DOM, массив Javascript, файл Ajax и обработка на стороне сервера (PHP, C #, Perl, Ruby, AIR, Gears и т. Д.)

Параметры прокрутки для области просмотра таблицы

Полностью интернационализированный

Поддержка jQuery UI ThemeRoller

Надежность - поддерживается набором из 2600+ модульных тестов

Широкий выбор плагинов, вкл. TableTools, FixedColumns, KeyTable и другие

Динамическое создание таблиц

Автоматическая загрузка данных Ajax

Пользовательское позиционирование DOM

Фильтрация по одному столбцу

Альтернативные типы пагинации

Неразрушающее взаимодействие с DOM

Сортировка выделения столбцов

Дополнительные параметры источника данных

Обширная поддержка плагинов

Сортировка, определение типа, функции API, разбиение на страницы и фильтрация

Полностью настраивается с помощью CSS

Надежная документация

110+ готовых примеров

Полная поддержка Adobe AIR


источник
5

Взгляните на agiletoolkit.org, поскольку у него есть простой в использовании CRUD, который поддерживает 2,4,6,7,9,10 и 12 из коробки (использует Ajax для защиты сетки при добавлении, удалении данных и интегрируется с jquery.

Я бы опубликовал несколько примеров, но сейчас на iPad.

Тревор Норт
источник