Как представить невидимые данные пары имя-значение, связанные со строкой таблицы HTML? - PullRequest
Новая
       21

Как представить невидимые данные пары имя-значение, связанные со строкой таблицы HTML?

1 голос
/ 29 февраля 2012

Фон

Я представляю данные, используя набор фреймов HTML.Левая рамка - это древовидная таблица навигации, построенная в виде таблицы HTML.В этом кадре показаны только минимальные данные, потому что я хочу использовать правую рамку «Детали», чтобы дать пользователю больше подробностей, когда он выбирает одну из строк навигационной таблицы. 

+----------------------------+
|          |                 |
| tree     |   "details"     |
| table    | pertaining to   |
| nav.     |   selected      |
|          |     row         |
|=selected=|                 |
|          |                 |
|          |                 |
|          |                 |
+----------------------------+

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

Получение сведений об элементе на стороне сервера - это последовательная задача, т.е.Чтобы получить подробности о n-м элементе, сервер должен проработать все n-1 предыдущих элементов.По этой причине я думаю, что самый простой способ представить подробные данные пользователю - это сделать так, чтобы сервер встраивал всю подробную информацию в строки навигационной таблицы, а скрипт создавал страницу с подробностями в правой рамке.

Вопрос

Как представить подробные данные в навигационной таблице HTML?Должен ли я создать свои собственные теги элементов?Следует ли использовать дополнительные столбцы, которые не отображаются?Или что-то другое?Данные обычно представляют собой пары имя-значение - и имя, и значение могут быть текстовыми.Каждый элемент может иметь различный набор пар данных.Существует ли стандартный способ представления пользовательских данных в (X) HTML-документе?

1 Ответ

3 голосов
/ 29 февраля 2012

НИКОГДА, НИКОГДА НИКОГДА НИКОГДА НИКОГДА не смешивать данные и отображать.Я также думаю, что вы можете легко обойти итерации по n элементам, чтобы получить необходимые данные.Вот как вы это делаете.

Создайте модель (ваше хранилище данных) в javascript. 

var data = [
   {
      title: "item 1",
      foo: "bar",
      baz: 10
   },
   {
      title: "item 2",
      foo: "bazbar",
      baz: 20
   }
];

Затем, используя Javascript, вы можете использовать приведенные выше данные для создания следующей таблицыслева 

<table>
   <tr><td><a href="#" onclick="showDetails(0);return false;">item 1</a></td></tr>
   <tr><td><a href="#" onclick="showDetails(1);return false;">item 2</a></td></tr>
</table>

Итак, у вас будет функция детализации шоу 

function showDetails(index){
   var currentData = data[index];
   /* Do something with data */
}

Я создал рабочий пример здесь .В этом коде есть ошибка, в которой говорится, что showDetails не определен, но из-за проблемы с jsfiddle код будет работать, если поместить его на страницу HTML.ТАКЖЕ, обязательно используйте строгий тип документа в верхней части страницы (чтобы избежать кросс-браузерной причуды).

Могу также посоветовать вам взглянуть на Диспетчер компоновки YUI 2 вместо использования frameset,Для фрейм-набора требуется несколько страниц с разбросанным javascript повсюду, и это может стать кошмаром для техобслуживания в будущем.

...