Я пытаюсь создать HTML-компонент, который предоставит представление в виде pivottable для моих данных, но с пользовательскими элементами html внутри pivotarea, а не с суммой или количеством; в приведенном ниже примере я просто использую строку текста, но я бы хотел, чтобы это был любой элемент HTML (img, div, текст и т.д.).
Мне сложно выбрать направление, написание собственного кода для его создания (с помощью jQuery) или с помощью библиотеки, например Pivottable. Я пробовал последний, но не мог даже найти правильное направление w.r.t. настройка функции агрегатора.
Я мог видеть, что я снова использую html, сгенерированный js pivottable (с простым подсчетом) и добавляя элементы впоследствии в jQuery, но это похоже на довольно хакерское решение, а также отсутствие настроек настройки. Плюсы такого подхода включают в себя тот факт, что в какой-то момент я хотел бы включить фильтрацию/настройку колонок в web-ui.
Что я ищу? Учитывая массив JSON с несколькими строками, имеющими атрибуты [Columngroup1, Columngroup2] и [Rowgroup 1, rowgroup2, rowgroup3], я бы хотел разложить его по следующий (построенный в таблице):
В приведенном выше примере [Businessline, Type, Product] представляют собой группы строк и [Active_or_roadmap, Roadmap Quarter] - группы столбцов. Гранулярность набора данных на один уровень глубже, каждый "Продукт" может состоять из нескольких субпродуктов, которые должны быть размещены либо в "активной" колонке (заголовок периода), либо в одной из столбцов квартальной карты. Это видно из подпрограмм 15.03 и 15.01, которые визуально сгруппированы в одну и ту же "строку".
С какими трудностями сталкиваюсь?
- Использую ли я таблицу HTML для этого, нужно ли мне делиться с классами с указанием строк/столбцов или их комбинацией? Добавленная сложность: в какой-то момент я хотел бы, чтобы столбцы без заголовка были "прокручиваемыми" по горизонтали (если они были слишком широкими).
- В ситуации, когда я хотел бы отфильтровать некоторые строки, должен ли я восстановить всю таблицу или (неверно) использовать видимость: скрытый? В последнем случае: как бы я работал с частично фильтрованной группой Продуктов (т.е. Подпродукт 15.01 не должен быть видимым, подпродукт 15.03 должен быть видимым)
- Как бы я "вставлял" детали объекта в элемент DOM? то есть в случае зависания /clickevent, как я узнаю, какая строка в объекте JSON соответствует имени, которое было нажато?
Обратите внимание, что я не обязательно ищу ответ, который полностью выполняет то, что я говорю выше, я в первую очередь ищу направление w.r.t. код, чтобы перейти от JSON к приведенной выше таблице в структурно приличном и гибком виде.
Приветствуется любая помощь, у меня есть codepen, который содержит некоторые примерные данные и довольно плохую попытку.
function load_data(callback){
$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/997352/data_portfolioroadmap.json', function(data){
callback(data)
});
}
