Scroll within a javascript table

Navigation
1

I have this function that mounts a grid in js 

function CarregarGrid() {
            $('#gridConteudo').jqGrid({
                colModel: [{ width: 80, name: 'COD_OPERADORA', index: 'COD_OPERADORA', label: 'Operadora', formatter: GridOperadoraFormatter },
                           { name: 'NOM_OPERADORA', index: 'NOM_OPERADORA', hidden: true },
                           { width: 80, name: 'SITUACAO', index: 'SITUACAO', label: 'Situação' },
                           { width: 90, name: 'DT_EXCLUSAO_OPERADORA', index: 'DT_EXCLUSAO_OPERADORA', label: 'Dt. Exclusão Operadora', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 130, name: 'COD_REDE', index: 'COD_REDE', label: 'Rede', formatter: GridRedeFormatter },
                           { name: 'NOM_REDE', index: 'NOM_REDE', hidden: true },
                           { width: 90, name: 'DT_EXCLUSAO_REDE', index: 'DT_EXCLUSAO_REDE', label: 'Dt. Exclusão Rede' },
                           { width: 120, name: 'COD_PRESTADOR_SUBSTITUTO', index: 'COD_PRESTADOR_SUBSTITUTO', label: 'Prestador Substituto', formatter: GridPrestadorSubstitutoFormatter },
                           { name: 'NOME_PRESTADOR_SUBSTITUTO', index: 'NOME_PRESTADOR_SUBSTITUTO', hidden: true },
                           { width: 115, name: 'DESC_MOTIVO_EXCLUSAO', index: 'DESC_MOTIVO_EXCLUSAO', label: 'Motivo Exclusão' },
                           { width: 95, name: 'DT_NOTIF_VOLUNTARIA', index: 'DT_NOTIF_VOLUNTARIA', label: 'Dt. Notificação Excl. Voluntária', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_LIMITE_ATD', index: 'DT_LIMITE_ATD', label: 'Dt. Limite Realização', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_LIMITE_REMESSA', index: 'DT_LIMITE_REMESSA', label: 'Dt. Limite Apresentação', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_LIMITE_RECURSO', index: 'DT_LIMITE_RECURSO', label: 'Dt. Limite Reapresentação', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_FIM_EXIBE_DIRECIONAMENTO', index: 'DT_FIM_EXIBE_DIRECIONAMENTO', label: 'Dt. Fim Exibe Site', sorttype: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 100, name: 'OBSERVACAO', index: 'OBSERVACAO', label: 'Observação' }],
                url: urlControle + '/GetPrestadorOperadora',
                mtype: 'POST',
                postData: { "pEXEC": function () { return $("#pEXEC").val(); }, "pCodPrestadorTS": function () { return $("#hidCodPrestadorTS").val(); } },
                jsonReader: { repeatitems: false, root: function (obj) { return obj.Items; } },
                datatype: "json",
                autowidth: true,
                shrinkToFit: false,
                forceFit: true,
                loadonce: true,
                loadError: function (xhr, st, err) { $.notificacoes.erro("@TopSaudeResource.notificacao_erro_transacao"); },
                loadComplete: function () {

                    if ($('#hidCodPrestadorTS').val() != '') {

                        var linhas = $("#gridConteudo").getDataIDs();

                        if (linhas.length <= 0) {
                            $('#divConteudo').hide();
                            $.notificacoes.erro("Prestador não está excluído em nenhuma Operadora e/ou Rede");
                        }
                        else {
                            $('#divConteudo').removeAttr('style');
                            $('#divConteudo').show();
                        }
                    }
                }
            });

            $('#gridConteudo').jqGrid('setLabel', 'COD_OPERADORA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'SITUACAO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_EXCLUSAO_OPERADORA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'COD_REDE', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_EXCLUSAO_REDE', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'COD_PRESTADOR_SUBSTITUTO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DESC_MOTIVO_EXCLUSAO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_NOTIF_VOLUNTARIA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_LIMITE_ATD', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_LIMITE_REMESSA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_LIMITE_RECURSO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_FIM_EXIBE_DIRECIONAMENTO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'OBSERVACAO', '', { 'text-align': 'left' });
        }

And this is my view where the grid rotates 

<form id="form01" name="form01" method="POST" class="span12">
    <input type="hidden" name="pEXEC" id="pEXEC" />
    <input type="hidden" name="hidcodPrestadorTS" id="hidcodPrestadorTS" />
    <fieldset id="fPrestador" style="padding-top:10px; padding-left:20px; background-color: #C7DDEB; border: 1px solid #599ACA">
        <div class="row">
            <div class="span4 input-append">
                <label for="hidCodPrestadorTS">Código Prestador:</label>
                <input type="hidden" name="hidCodPrestadorTS" id="hidCodPrestadorTS" class="span3" />
                <input name="txtCodigoPrestador" id="txtCodigoPrestador" class="span3" type="text" style="width:190px" maxlength="9" onchange="BuscarPrestador();" />
                <button class="btn" id="BuscarPrestadorPeloCodigo" type="button"><i class="icon-search"></i></button>
                <span style="padding-right:5px"></span><input id="txtNomePrestador" class="span7" type="text" readonly />
            </div>
        </div>
    </fieldset>
    <div id="divConteudo" style="visibility:hidden; display:none">
        <fieldset style="border: 1px solid #CCCCCC; padding: 10px 10px 10px 10px">
            <div id="divGrid">
                <table id="gridConteudo"></table>
            </div>
        </fieldset>
    </div>
</form>

Well, a scroll bar is created, but I can not scroll, without scrolling the page. I would like to create a script that does not depend on the page scroll. How do I do this?

I have the div divConteudo ou the table gridConteudo

I have already done this and have not turned around. As for the size I have already changed for several and the same thing continues. I need to move the page scroll. 

<div id="divGrid" style="left: 300px; top: 150px; width: 450px; height: 220px">
        <table id="gridConteudo"></table>
</div>
    
asked by anonymous 04.12.2015 / 11:54

1 answer

1

You can add overflow:scroll to your div, as in the example below I have two divs one right and one left, each with its respective scroll: 

#left 
{
 float: left;
 width: 50%;
 background: red;
 height: 100%;
 overflow-y: scroll;
}

#right 
{
 float: left;
 width: 50%;
 background: blue;
 height: 100%;
 overflow-y: scroll;
}

Thus becoming independent of your page scroll.

Here is a link with a working example: Independent Scroll

    
04.12.2015 / 12:03
Because JSF is not respecting the inserted routes faces-config.xml Wait for time to execute new action [Selenium] [C #]