Что jquery Grid поддерживает непрерывный поток обновлений (json)

Question

Поскольку это огромный пост, здесь краткая сводка (пожалуйста, прочитайте дырочный пост, если вы хотите ответить, хотя):

Реализовано сейчас:

• Сайт извлекает много json (полный набор данных каждый раз ~ 30 КБ, уже распакован)
• Отображает данные в виде клиентской таблицы html
• Слишком много трафика
• Слишком много времени рендеринга

Ссылка на один из сайтов: Пример

Мы уже осуществили частичный поиск данных, теперь нам нужно найтирешение, которое:

• Отображает только изменения
• Обновление флеш-ячеек

Вопрос: Какие решетки или другие решения существуют для этого?случилось?

ОБНОВЛЕНИЕ : клиент хочет видеть все доступные данные одновременно, без подкачки .

---

Полное описание:

В нашем приложении нам нужно отобразить определенное количество строк (~ 300-1000) в сетке.Посетители могут сортировать (на стороне клиента) , нажимая на заголовки.Кроме того, каждая строка содержит несколько ссылок, которые открывают iframe с использованием colorbox .

Данные

• обновляются каждые 30 секунд (json с сервера)
• состоит из нескольких полей (строки, целые и десятичные числа).
• Меняются только десятичные дроби, это означает, что ссылки (colorbox) также остаются прежними
• отображаются не все данные, некоторые используются только для сортировки на стороне клиента

В настоящее время мы используем комбинацию jTemplates, tablesorter и colorbox для рендеринга всего набора данных json в html-таблицу.Текущий поток:

1. Получение данных с сервера (полный набор данных)
2. Отображение данных в html с использованием jTemplates
3. Инициализация colorbox для таблицы
4. Инициализация таблиц сортировки для таблицы
5. Начните заново с # 1

Решение, описанное выше, работает, но есть некоторые проблемы:

• Много дублирующихся данныхполучает перевод.Это довольно быстро (> 5 ГБ / день)
• Рендеринг данных занимает довольно много времени (~ 300 мс), это хуже на мобильных устройствах
• Повторная инициализация colorbox и tableorter каждый раз занимает довольно много времени.некоторое время (~ 400 мс), что еще хуже на мобильных телефонах

Поэтому наша цель - просто передать обновленные и новые данные через json.Каждая строка имеет простой уникальный ключ (int), поэтому их можно легко идентифицировать.
Кроме того, мы хотим flash контейнер обновленных или вновь вставленных данных в качестве уведомления для пользователя о том, чтобыли изменения.

Поток, который мы имеем в виду:

1. Получение данных JSON с сервера ( полный набор )
2. Визуализация сеткис сортировкой и инициализацией ссылок colorbox
3. Получение данных json с сервера ( только обновленные значения и новые строки )
4. Обновление сетки ( только измененные значения и новые строки) <- также <strong>flash контейнер значений после обновления
5. Начать снова с # 3

Таким образом, сетка, которую мы ищем, должна поддерживать загрузку данные в виде дыры , а также загрузка только обновленные значения .

Полный набор данных будет выглядеть так:

{
    [ 
        { 
        "key":1, 
        "StaticProperty":"value3",
        "PropertyOne":2.85 ,
        "PropertyTwo":1.99
        },
        {
        "key":2, 
        "StaticProperty":"value2",
        "PropertyOne":5.66,
        "PropertyTwo":7.36
        },
        {
        "key":3, 
        "StaticProperty":"value3",
        "PropertyOne":1.78,
        "PropertyTwo":9.31
        },
        {
        "key":4, 
        "StaticProperty":"value4",
        "PropertyOne":1.78,
        "PropertyTwo":9.31
        },
        {
        "key":5, 
        "StaticProperty":"value5",
        "PropertyOne":1.78,
        "PropertyTwo":9.31
        }
    ]
};  

Обновленный набор данныхбудет выглядеть (помните, что он будет содержать только измененные значения):

{
    "updates" : [ 
        { 
        "key":1,
        "PropertyOne":4.88
        },
        {
        "key":2,
        "PropertyOne":2.77,
        "PropertyTwo":3.88
        },
        {
        "key":6,
        "StaticProperty":"value6",
        "PropertyOne":7.23,
        "PropertyTwo":8.42
        } 
    ],
    "deletes" : [ 4, 5 ]
}; 

Как вы можетеn см. обновление может содержать:

• частичные обновления (id # 1)
• несколько обновлений для каждой строки (id # 2)
• без обновлений для существующих строк (id # 3)
• идентификаторы удаленных строк как простой массив (id # 4, # 5)
• новые строки (id # 6)

Что нам нужноэто сетка или другие предложения, которые могут сделать нас способными всех упомянутых операций .
У нас уже есть способ убедиться, что данные никогда не будут повреждены (уже обработаны на стороне сервера и клиента), так что это действительно просто о отображение данных и поддержание актуальности дисплея .

Весь вклад приветствуется.

Answer 1

Мой личный любимый плагин на основе jQuery Grid - это jQuery flexigrid плагин .

Он довольно богатый функционал.Вы можете указать, загружать ли записи таблицы при загрузке страницы, или указать симпатичную функцию, которая возвращает XML / JSON, который затем будет автоматически выводиться.Я лично много раз использовал его с приложениями ASP .Net для вызова поддерживающих веб-сервисов, а затем каждый раз отображал результаты.

По вашему запросу главное, что у него нет, это таймер обновления, ноВы можете просто запустить таймер самостоятельно, а затем вызвать метод обновления данных сетки, который будет каждый раз запускать новый запрос JSON.

Answer 2

Чтобы закрыть этот вопрос:
NO , такой сетки нет. Мы должны будем построить его с нуля.
Я обновлю этот вопрос / ответ с помощью URL-адреса к заполненной сетке, как только он будет на месте, хотя, чтобы дать другим преимущество.

Answer 3

просто мысль ... вы уже используете jquery и json ... вы рассматривали ajax? поскольку вы делаете только обновления, вы сможете найти идентификатор в таблице для обновлений, используя json из jquery, и обновлять только эти строки.

это помогло бы вашему рендерингу и трафику огромной суммой. установите jquery для запуска ajax по таймеру с заданным фоновым объектом, который извлекает только обновленные строки.

Лично мне нравятся ретрансляторы, но это личное предпочтение ... вы можете установить загрузку страницы, чтобы загрузить кэшированную версию набора данных, а затем разрешить jquery захватить и вернуть данные асинхронно.