Input paifilho dentro de outro

Boa tarde, gostaria de saber se há algum modo de inserir um paifilho dentro de outro, preciso de dois níveis e ambos são dinânimicos, é possível? Eu fiz o código, mas a table interna não é exibida.

<form name="form" role="form">
    <div class="row">
        <div class="col-md-12">
            <table tablename="comodos" class="table table-hover" addbuttonlabel='Adicionar cômodo'>
                <thead>
                    <tr>
                        <td>Cômodos</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="width:20%">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label>Cômodo (O nome deve ser único):</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <input type="text" name="nome" id="nome_comodo">
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td style="width:70%">
                            <table tablename="item" addbuttonlabel="Adicionar Item" class="table table-hover">
                                <thead>
                                    <tr>
                                        <td>Itens do Cômodo</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="form-group">
                                                <label>Item:</label>
                                                <input type="text" name="item" id="nome_item_comodo">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <label>Marca:</label>
                                                <!--INSERIR CAMPO ZOOM PARA A MARCA-->
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <label>Quantidade:</label>
                                                <input type="number" min="1" name="qtd" id="qtd_item_comodo">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <label>Observação:</label>
                                                <textarea name="obs" id="obs_item_comodo"></textarea>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="text-right col-md-6">
            Imóvel em bom estado?
        </div>
        <div class="text-left col-md-6">
            <input type="checkbox" name="bom_estado" id="bom_estado">
        </div>
    </div>
</form>

criado 08 de Jan de 2020
Vitor Assis Camargo
156 pontos
editado 08 de Jan de 2020

Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

2 respostas

Boa tarde, consegui resolver o problema improvisando um segundo nível utilizando um input hidden que aparece para o usuário como uma lista, vou postar o código para ajudar quem estiver com a mesma dificuldade.

NOTA IMPORTANTE PARA FACILITAR A COMPREENSÃO: A lista é chamada nas funções como Tree pois, no começo minha intenção era usar uma TreeView, depois mudei para UL

HTML:

<table tablename="comodos" class="table table-hover" addbuttonclass='btn btn-primary'
    addbuttonlabel='Adicionar cômodo' id='comodos'>
    <thead>
        <tr>
            <th colspan="3">Cômodo (O nome deve ser único)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="row">
                    <div class="form-group">
                        <label>Cômodo:
                            <input 
                                onkeyup="toggleTree($(this))" type="text"
                                class="form-control comodo" name="nome" id="nome_comodo">
                            </label>
                    </div>
                </div>
                <div class="row">
                    <div id="arvore_itens" style="display: none;"></div>
                    <input type="hidden" name="comodo_items" value="[]" id="comodo_items">
                </div>
        </tr>
    </tbody>
</table>

JS:

var form = `
    <form class="form" role="form" name="form-item" id="form-item" onsubmit="processItem($(this))">
        <div class="row">
            <div class="form-group">
                <div class="col-md-4">
                    <label for="item">Nome <span class="text-danger">*</span>:</label>
                </div>
                <div class="col-md-8">
                    <input class="form-control" name="item" id="item" type="text" required>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-md-4">
                    <label for="marca">Marca:</label>
                </div>
                <div class="col-md-8">
                    <input class="form-control" name="marca" id="marca" type="text">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-md-4">
                    <label for="qtde">Quantidade <span class="text-danger">*</span>:</label>
                </div>
                <div class="col-md-8">
                    <input class="form-control" min=1 name="qtde" id="qtde" type="number" value="1" required>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-md-4">
                    <label for="obs">Observações:</label>
                </div>
                <div class="col-md-8">
                    <textarea class="form-control" name="obs" id="obs"></textarea>
                </div>
            </div>
        </div>
        <div class="row">
            <input type="hidden" name="id_comodo" id="id_comodo" value="">
            <input type="hidden" name="id_item" id="id_item" value="">
            <input type="hidden" name="action" id="action" value="">
            <div class="col-md-4"><div>
            <div class="col-md-8">
                <button class="btn btn-primary form-control" type="submit">Enviar</button>
            </div>
        </div>
    </form>
`;

var modal;


const get_id = (object, i = 1) => { return object.attr('id').split("___")[i] }

const toggleTree = (object) => {
    var id = get_id(object);
    var tree = $("#arvore_itens___" + id);
    var display = "none";

    if (object.val())
        display = 'block';

    display = object.hasClass("error") ? "none" : "block";

    tree.css('display', display);
    update_tree_value(object);
}

var converter = {
    str2json: (obj) => { return JSON.parse(obj.split("&*").join('"')) },
    json2str: (obj) => { return JSON.stringify(obj).split('"').join("&*") }
}

const processItem = (form) => {
    var values = {};
    $.each(form.serializeArray(), function (i, field) {
        values[field.name] = field.value;
    });

    object = {};
    object.item = values.item;
    object.marca = values.marca;
    object.qtde = values.qtde;
    object.obs = values.obs;
    list = converter.str2json($("#comodo_items___" + values.id_comodo).val());

    switch (values.action) {
        case 'ADD':
            list.push(object);
            break;
        case 'EDT':
            list[values.id_item] = object;
            break;
    }
    $("#comodo_items___" + values.id_comodo).val(converter.json2str(list));
    update_tree_value($("#comodo_items___" + values.id_comodo));
    modal.remove();
}

const open_modal = (id_comodo) => {
    modalConfigs = {
        title: "Item > ",
        content: form,
        id: 'fluig-modal',
        size: 'large',
        actions: [{
            'label': 'Fechar',
            'autoClose': true
        }]
    };

    nome_comodo = $("#nome___"+id_comodo).val();
    modalConfigs.title += nome_comodo;

    modal = FLUIGC.modal(modalConfigs, () => {});

    $("#id_comodo").val(id_comodo);

    $("#form-item").on('submit', function (e) {
        e.preventDefault();
    });
}

const add_item = (object) => {
    id = get_id(object);
    open_modal(id);
    $("#action").val("ADD");
}

const edit_item = (object) => {
    id = get_id(object);
    index = get_id(object, 2);
    open_modal(id);
    $("#action").val("EDT");
    item = converter.str2json($("#comodo_items___" + id).val())[index];
    $("#item").val(item.item);
    $("#marca").val(item.marca);
    $("#qtde").val(item.qtde);
    $("#obs").val(item.obs);
    $("#id_item").val(index);
}

const rm_item = (object) => {
    id = get_id(object);
    index = get_id(object, 2);

    list = converter.str2json($("#comodo_items___" + id).val());
    item = list[index];

    if (confirm("Deseja mesmo remover " + item.item + "?")) {
        list.splice(index, 1);
        $("#comodo_items___" + id).val(converter.json2str(list));
    }

    update_tree_value(object);
}

const update_tree_value = (object) => {
    var id = get_id(object);
    var tree = $("#arvore_itens___" + id);
    items = converter.str2json($("#comodo_items___" + id).val());

    html = "<h2>Itens <button class='btn btn-success' id='btn_add_item___" + id + "' onclick='add_item($(this))'><i class=\"flaticon flaticon-add-plus icon-md\"></i></button><ul class='list-group'></h2>"
    if (items)
        items.forEach((item, index) => {
            html += "<li class='list-group-item' onclick='toggle_item_detail($(this))' id='view_item___" + id + "___" + index + "'>"; {
                html += "<div class='row'>"; {
                    html += "<div class='col-md-12 text-center'>"; {
                        html += "<span class='capitalize'><h3>" + item.item + "</h3></span>";
                        html += "<button class='btn btn-info' id='btn_edit_item___" + id + "___" + index + "' onclick='edit_item($(this))'><i class=\"flaticon flaticon-edit icon-md\"></i></button>"
                        html += "<button class='btn btn-danger' id='btn_rm_item___" + id + "___" + index + "' onclick='rm_item($(this))'><i class=\"flaticon flaticon-trash icon-md\"></i></button>";
                    } html += "</div>";
                }
                html += "<div class='row'>"; {
                    html += "<div class='col-md-12'>"; {
                        html += "<ul class='list-group' style='display: none;' id='item_specs___" + id + "___" + index + "'>"; {
                            html += "<li class='list-group-item capitalize'>Marca: " + item.marca + "</li>";
                            html += "<li class='list-group-item capitalize'>Quantidade: " + item.qtde + "</li>";
                            html += "<li class='list-group-item capitalize'>Observação: " + item.obs + "</li>";
                        } html += "</ul>";
                    } html += "</div>";
                } html += "</div>";
            }
            html += "</li>";
        });
    html += "</ul>"

    tree.html(html)
}

const toggle_item_detail = (object) => {
    id_comodo = get_id(object, 1);
    id_item = get_id(object, 2);

    show = $("#item_specs___" + id_comodo + "___" + id_item);

    if (show)
        show.toggle();
}

ESPERO QUE SEJA ÚTIL A MAIS ALGUÉM, ABRAÇOS.

editar
- x
grosseiro ou ofensivo pouco construtivo obsoleto outro...
Motivo

criado 21 de Jan de 2020
Vitor Assis Camargo
156 pontos
editado 21 de Jan de 2020

up 0 down
Olá, já tentei fazer a mesma coisa a uns 3 meses atrás, e pelo que andei pesquisando não é possível ter uma tabela de relacionamento pai x filho x neto.
- editar
- x
  
  grosseiro ou ofensivo pouco construtivo obsoleto outro...
  Motivo
- criado 09 de Jan de 2020
  RODRIGO DOS SANTOS GOMES
  193 pontos
- 0
  
  Boa tarde, e qual solução você usou? como fez? Poderia postar a saída para eu ter de exemplo?
  — Vitor Assis Camargo 09 de Jan de 2020
- 0
  
  Pro meu processo eu mudei para processos pai x filho. Creio que isso não vai te atender. Mas pro seu caso, se todos os cômodos cadastrados forem ter itens nele, você cria apenas a tabela pai x filho dos itens e adiciona uma campo cômodo para identificar a qual cômodo pertence o item. Talvez seja uma saída, ou faz as duas tabelas separadas.
  — RODRIGO DOS SANTOS GOMES 09 de Jan de 2020
Adicionar comentário

Caracteres restantes: 600
Quero acompanhar este tópico via email.

Comentário
Utilize formatação mini-Markdown: [link](http://exemplo.com) _italico_ **negrito** `codigo`.
Comentarios devem ter, no maximo, 600 caracteres. Se achar necessario, utilize links em vez de copiar código ou ainda edite sua pergunta/resposta para colocar mais informações

fluig forum

Input paifilho dentro de outro

Comentário

2 respostas

Comentário

Comentário

Não é a resposta que estava procurando? Procure outras perguntas com as tags paifilho formulario niveis ou faça a sua própria pergunta.