Включение скрытых данных в страницу HTML для обработки JavaScript - PullRequest
Новая
       0

Включение скрытых данных в страницу HTML для обработки JavaScript

17 голосов
/ 20 января 2011

Я создаю сложный сводный отчет в формате HTML на основе данных в базе данных, который может быть суммой в 200 000 строк в базе данных.Пользователь может щелкнуть ссылку, чтобы запросить версию Excel.

При выполнении сценария JS извлекает ключевые компоненты отчета и помещает их в форму в скрытом фрейме.Эта форма отправляется на серверный сценарий, который генерирует версию отчета в формате Excel (без графики и т. Д.).

Поскольку вычисления для отчета являются сложными и «дорогостоящими», имеет смысл не запускать их снова.создать версию Excel, так как все данные уже есть на странице.Кроме того, пользователь может настроить отчет после его загрузки, и я могу использовать JS, чтобы передать эти настройки в форму, чтобы документ Excel также отражал их.

Способ, которым я делаю это, заключается в том, чтобы включитьследующие для каждого компонента отчета, который переносится в строку в версии Excel.Я угнал HTML-тег, который иначе не используется.

   <code id="xl_row_211865_2_x" class="rowlabel">Musicals}{40%}{28.6%}{6</code>

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

alt text

Поскольку данные содержат текст, мне пришлось использовать что-то вроде }{ в качестве разделителя полей, поскольку это вряд ли произойдет в любом реальном тексте в отчете.У меня code установлено отображение: нет в CSS.

Когда пользователь хочет получить версию отчета для Excel, код JS ищет в HTML любые элементы <code> и помещает свои className и innerHTML вформа.ClassName указывает, как форматировать строку в Excel, а затем данные помещаются в соседние ячейки в строке Excel.

alt text

В отчете HTML отображается один процентный показатель (они могут переключатьсямежду ними), но предпочтение пользователя при запросе версии Excel должно было включать оба.

Есть ли лучший способ сделать это?

(Так как это часть сложного веб-приложения, нетпользователь собирается отключить CSS, или ему не хватает javascript, или он не сможет зайти так далеко) ДОБАВЛЕНО: я не могу использовать HTML5, поскольку пользователи часто работают в старых браузерах, таких как IE6

Ответы [ 4 ]

12 голосов
/ 20 января 2011

Стандартные решения:

1) Используйте блок данных Javascript: 

<script>
var mydata = {
         'Musicals': ['6','40%','28.6%'],
         "That's Life": ['2','13.2%','0.5%'],
         ...etc....
      }
</script>

2) Используйте атрибуты элемента: (см. http://ejohn.org/blog/html-5-data-attributes/ для получения дополнительной информации) 

<div class='my_data_row' data-name='Musicals' data-col1='6' data-col2='40%' data-col3='26.6%'>

... и затем используйте Javascript для загрузки атрибутов по мере необходимости.

Эта вторая опция будет использоваться, когда данные связаны с рассматриваемым элементом.Обычно вы не захотите использовать это для данных, которые будут использоваться в других местах;Я бы сказал, что в вашем случае простой блок данных Javascript был бы гораздо лучшим решением.

Если вы используете атрибуты данных согласно второму варианту, обратите внимание на использование префикса «data-»на атрибутах.Это спецификация HTML5, в которой определяемые пользователем атрибуты отделены от обычных атрибутов HTML.Для получения дополнительной информации см. Связанную страницу.

11 голосов
/ 20 января 2011

Использовать новые данные- атрибуты

http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

<div data-row="[[&quot;Musicals&quot;,40,28.6,6], ...]">

Элементом div может быть тег TD, тег TR или любой другой соответствующий тег, уже связанный со строкой, а &quot; - экранированный ".

Это делает данные скрытыми от просмотра, а также гарантирует, что появятся стандартные решения для обработки данных.

Также для кодирования данных я бы предложил использовать JSON , так как это также стандарт, который прост в использовании.

2 голосов
/ 20 января 2011

Вы можете попробовать новую html5 функцию localStorage вместо использования скрытых полей html, то есть если вы уверены, что ваши пользователи используют только последние современные браузеры.

В любом случае, улучшением вашего кода стало бы сохранение данных в формате JSON:
Вместо 

Musicals}{40%}{28.6%}{6

вы бы использовали что-то вроде 

{
    "label": "Musicals",
    "percentage1": 40,
    "percentage2": 28.6,
    "otherLabel": 6
}

Таким образом, вы можете создавать объекты javascript, просто оценивая (eval) или анализируя (JSON.parse) innerHTML скрытого элемента, быстрее, чем вы интерпретируете свой собственный протокол фигурных скобок.

1 голос
/ 20 января 2011

Моя задача решить, что лучшим способом было бы взять эти результаты и сохранить их в каком-то временном XML-файле на сервере, показать содержимое в браузере, а когда пользователь запрашивает версию Excel, вам нужно только взять временный XML.

Обратите внимание на Linq-to-XML, поскольку его программирование в свободном стиле поможет вам прочитать XML-файл в несколько строк и затем создать такой файл Excel.

Другим решением будет сериализация вашей коллекции объектов в JSON и десериализация их с помощью DataContractJsonSerializer. Это сделало бы размер временного файла меньшим, чем подход XML.

...