DOM зависть(Я использую скрытые входы для хранения данных, но данных так много, что страница медленная)

Question

Я передаю 3 страницы HashMap, которые содержат данные, относящиеся к 13 различным периодам времени, на страницу JSP.

Данные из этих карт используются для заполнения и изменения итогового div данных (который состоит из итоговой суммы различных наборов данных для выбранных диапазонов , поэтому он может 1 из 13, 2 из 13, все 13 и т. Д. Однако наборы данных 3 большие. Всего имеется 910 = (13 * 7) + (13 * 7) + (13 * 8 * 7) отдельных значений.

Следите за мной до сих пор?

Выбранные данные используются javascript / jquery, когда выбран флажок bx - таким образом, имеется 13 флажков, и при проверке данные включаются в общую сумму, когда непроверенные данные вычитаются. Выбранное подмножество данных используется для построения графика с помощью flot. Я не использую форму HTML.

В настоящее время я использую скрытые входные данные за видимым флажком - это все замедлило, потому что DOM такой большой? Каковы лучшие варианты, которые увеличат отзывчивость (особенно диалог jquery, который содержит все данные).

Мои идеи пока: Передача данных в виде строки json?
Использование атрибутов входных тегов вместо 910 отдельных входных данных?

Спасибо! (любое решение должно быть совместимо с ie6 и ie8)

Answer 1

Я бы использовал .data(), чтобы прикрепить соответствующие значения для данного флажка к нему.Это все равно, что хранить его в атрибутах, ожидая, что вы не создаете проблем со свойствами эксплора.Для хранения полных наборов данных id придерживайтесь jsut хешей как глобальной переменной, или вы можете присоединить их к элементу form, к которому также относятся флажки с .data() (при условии, что они на самом деле находятся в form).

Так, например, мы можем увидеть что-то вроде:

$('#dataForm').data(
  'hashOne', 
   hashOne
).data(
  'hashTwo', 
  hashTwo
).data(
  'hashThree', 
  hashThree
);

$('#dataForm #checkboxOne').change(function(){
  var form = $(this).parents('form');
  if($(this).is(':checked'){
     $(this).data('currentValue', form.data('hashOne').someValueKey);
  }
});