У меня есть массив данных в парах $key => $value которые я хотел бы хорошо отобразить для пользователя. Поскольку я пытался думать о том, как это сделать, я придумал, хотя:
Было бы неплохо, если бы я мог просто передать JSON на страницу и создать дерево javascript.
Затем я нашел jsTree , который, казалось, соответствовал моим требованиям. После прочтения документации я нашел формат JSON, который необходимо было передать для создания дерева, поэтому я создал рекурсивную функцию, чтобы преобразовать ее в правильный формат массива, а затем json_encode 'd it и передал ее конструктору , Проблема заключалась в том, что json_encode не правильно создавал children узлы, поэтому он был полностью непригодным. Мне нравятся общие решения, без необходимости форматировать данные из источника для одного определенного типа отображения (в данном случае это jsTree), и решил, что хочу, чтобы я мог взять любой массив и эффективно отображать его с помощью jsTree. После нескольких часов поиска я не смог найти решение для решения этой проблемы.
Итак, мой вопрос заключается в том, как лучше всего преобразовать массив PHP в нечто, с чем jsTree будет хорошо играть. Добавлен бонус, если у дочерних узлов нет значков или места, где был значок, поскольку я лично не имею дело с файловой системой и не нуждаюсь в значке, где нет дочерних узлов.
Во-первых, давайте рассмотрим, как превратить массив в нечто, с чем jsTree будет хорошо играть, поскольку json_encode не работает должным образом, мы получим формат неупорядоченного списка. Поскольку входной массив может содержать либо скалярные данные, либо массив, он должен быть рекурсивным.
Для этого мы создадим функцию array2jstree , которая по существу превращает массив в неупорядоченный список, который не является специфичным для jsTree с одним исключением class .
function array2jstree($ar){ $out = ''; foreach($ar as $k => $v){ $out .= "<li>$k"; if(is_array($v)){ $out .= array2jstree($v); }else{ $out .= "<ul><li class=\"jstree-nochildren\">$v</li></ul>"; } $out .= '</li>'; } return "<ul>$out</ul>"; }
Это происходит через каждый элемент массива, и если другой массив вызывает себя и создает неупорядоченный список под элементом «parent» <li> , если не массив, все еще расширяется до нового списка, но он содержит только Значение. Таким образом, массив из:
array( 'data' => 'value' )
Будет расширен за счет data показывающих value поскольку это ребенок.
Обратите внимание на класс для значения без массива, являющегося jstree-nochildren . Этот класс не является частью jsTree, но используется для любого элемента, у которого нет детей (поэтому значок можно удалить успешно).
Теперь все, что нужно, – это отбросить функцию и передать массив для работы с jsTree с иконками. Объединять его, чтобы показать, как его использовать, было бы (используя echo в качестве примера, но можно легко передать как переменную в механизм шаблонов и т. Д.
echo '<div id="cTree">'. array2jstree(array('name' => $myArray)) .'</div>';
Причина передачи нового массива в функцию заключается в том, что у него есть определенный «корневой» узел для расширения, опустите его, если вам не нужен корневой узел.
И JS инициализирует его как jsTree:
<script> $('#cTree').jstree(); </script>
Теперь у вас есть функция вставки для преобразования массивов в jsTree! Теперь, вернемся к проблеме без значка для узлов, у которых нет детей, мы создадим стиль, основанный на этом классе, который мы назначили ранее jstree-nochildren , и работаем с тем, что преобразует список jsTree в список, единственный стиль, который вам нужно добавить, – это :
.jstree-nochildren > a > .jstree-icon { display:none !important; }
Теперь все готово!