Laravel conseguir N nivel jeraraquía desplegable de mesa en la opción selecta

Question

Estoy usando LARAVEL 7 con MySQL back-end. Tengo una tabla de temas con columnas id, nombre y padre. Aquí, padre es de la columna Id. Los datos del cuadro son los siguientes: Estoy tratando de mostrar esos temas nombres como este fractions  - fractions > introduction to fractions  - fractions > introduction to fractions > What are fractions and its purpose?  - fractions > introduction to fractions > Fractions as division  - fractions > Representation of fractions  - fractions > Representation of fractions > How to represent a fraction - Area Models aquí está mi llamada ajax donde estoy mostrando todos los temas : function getSubjectsTopics(subject_id) { if(subject_id) { loading_show(); axios.get( /master/topic/get-topic-by- subject-id/  + subject_id) .then(function(response) { var optionHtml = 'Parent'; if(response.data.status) { $.each(response.data.subject_topics, function(i,v) { optionHtml += `${v.name}`; }); } $( #ddl_topic_type ).html(optionHtml).attr('disabled', false).select2(); loading_hide(); //console.log(response); }) .catch(function(error) { loading_hide(); console.log(error); Swal.fire({ type: 'error', title: 'Oops...', text: 'Something went wrong!' }) }) } else { $( #ddl_topic_type ).attr('disabled', true); } } aquí está la función del controlador donde estoy recibiendo todos los temas: public function getTopicsBySubjectID($subject_id) { $topics = Topic::where( subject_id , $subject_id)->get(['id', 'name']); $sub_topics = Topic::with('childTopics')->parent()->get(['id', 'name']); return response()->json(['status' => 'success', 'subject_topics' => $topics, 'sub_topics' => $sub_topics], 200); } aquí está mi función modelo donde estoy recibiendo sólo temas con un nivel solamente: public function parentTopic() { return $this->belongsTo('App Models Topic', 'parent_id'); } public function scopeParent($query) { return $query->whereNull('parent_id'); } Ahora en mi tema desplegable estoy recibiendo temas como este: [Introducir la descripción de la imagen aquí][2] [2] ¿Puede alguien ayudarme cómo puedo cambiar la jerarquía? gracias de antemano. [2]: https://i.stack.imgur.com/7XN5Z.png

Gpt · Accepted Answer

Para lograr mostrar una jerarquía de N niveles en el desplegable select de Laravel, puedes realizar algunos cambios en tu código.

En primer lugar, necesitas modificar tus relaciones en el modelo Topic para poder obtener los temas hijos de forma recursiva. Puedes hacer uso de una relación recursiva en Eloquent para lograr esto.

Aquí te dejo un ejemplo de cómo podrías definir la relación recursiva en tu modelo Topic:

php
public function childrenTopics()
{
    return $this->hasMany('App\Models\Topic', 'parent_id', 'id');
}

public function parentTopic()
{
    return $this->belongsTo('App\Models\Topic', 'parent_id');
}

Luego, puedes modificar tu controlador para obtener la lista de temas con su jerarquía completa:

php
public function getTopicsBySubjectID($subject_id)
{
    $topics = Topic::with('childrenTopics')->where("subject_id", $subject_id)->whereNull('parent_id')->get();

    return response()->json(['status' => 'success', 'subject_topics' => $topics], 200);
}

Finalmente, en tu función JavaScript, puedes iterar de manera recursiva sobre los temas para construir la jerarquía en el desplegable select: js function getSubjectsTopics(subject_id) { if(subject_id) { loading_show(); axios.get("/master/topic/get-topic-by-subject-id/" + subject_id) .then(function(response) { var optionHtml = '<option value="0">Parent</option>'; if(response.data.status) { var buildTree = function(topics, level) { topics.forEach(function(topic) { var prefix = level > 0 ? '-'.repeat(level * 2) + ' ' : ''; optionHtml += `<option value="${topic.id}">${prefix}${topic.name}</option>`; if(topic.childrenTopics) { buildTree(topic.childrenTopics, level + 1); } }); }; buildTree(response.data.subject_topics, 0); } $("<h51>ddl_topic_type").html(optionHtml).attr('disabled', false).select2();</h51> loading_hide(); }) .catch(function(error) { loading_hide(); console.log(error); Swal.fire({ type: 'error', title: 'Oops...', text: 'Something went wrong!' }); }); } else { $("<h34>ddl_topic_type").attr('disabled', true);</h34> } }

Con estos cambios, deberías poder obtener la jerarquía de temas de N niveles en el desplegable select en tu aplicación Laravel. Recuerda adaptar el código según tus necesidades específicas.

Respondida el Dec 18, 2020 a las 09:01 - por Gpt

Gemini · Answer

Función de controlador actualizada: php public function getTopicsBySubjectID($subject_id) { $topics = Topic::where( subject_id , $subject_id)->orderBy('name', 'asc')->get(['id', 'name', 'parent_id']); $sub_topics = Topic::with('childTopics')->parent()->get(['id', 'name']); $node_map = []; // Crea un mapa con nodos como clave y sus hijos como valor foreach ($sub_topics as $topic) { $node_map[$topic->id] = $topic->childTopics; } $hierarchical_topics = []; $this->nestTopics($topics, $node_map, $hierarchical_topics, 0); return response()->json(['status' => 'success', 'hierarchical_topics' => $hierarchical_topics], 200); } Función auxiliar para anidar temas: php private function nestTopics($topics, &$node_map, &$hierarchical_topics, $parent_id) { foreach ($topics as $topic) { if ($topic->parent_id == $parent_id) { $hierarchical_topics[] = $topic; if (isset($node_map[$topic->id])) { $this->nestTopics($node_map[$topic->id], $node_map, $hierarchical_topics, $topic->id); } } } } Cambios en la función de modelo: Ningún cambio es necesario en las definiciones del modelo. Cambios en la llamada AJAX: ``javascript function getSubjectsTopics(subject_id) { if(subject_id) { loading_show(); axios.get( /master/topic/get-topic-by- subject-id/ + subject_id) .then(function(response) { var optionHtml = ''; if(response.data.status) { $.each(response.data.hierarchical_topics, function(i,v) { optionHtml +=${v.name.repeat(v.depth - 1)}${v.name}`; }); } $( ddl_topic_type ).html(optionHtml).attr('disabled', false).select2(); loading_hide(); //console.log(response); }) .catch(function(error) { loading_hide(); console.log(error); Swal.fire({ type: 'error', title: 'Oops...', text: 'Something went wrong!' }) }) } else { $( ddl_topic_type ).attr('disabled', true); } } ``` Explicación: La función del controlador actualizada recupera todos los temas ordenados por nombre y organiza los nodos secundarios en un mapa. La función auxiliar nestTopics recorre recursivamente los temas y los anida en una estructura jerárquica. La llamada AJAX actualizada utiliza la propiedad `depth` para sangrar los nombres de los temas y mostrarlos anidados. Estos cambios producirán el resultado de jerarquía desplegable deseado.

Laravel conseguir N nivel jeraraquía desplegable de mesa en la opción selecta

2 Respuestas: