Scroll inside a javascript table

Asked

Viewed 88 times

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 runs

<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’t scroll without scrolling the page. I would like to create a scroll that doesn’t depend on the scroll of the page. How do I do this?

I have the div divConteudo oua table gridConteudo

I’ve done it and not turned. As for the size I’ve changed to several and continues the same thing. I need to move the scroll of the page.

<div id="divGrid" style="left: 300px; top: 150px; width: 450px; height: 220px">
        <table id="gridConteudo"></table>
</div>
javascript asp.net-mvc

1 answer

1


You can add a overflow:scroll for your div, as in the example below I have two Divs a right and a 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 a link with a functional example: Independent scroll

  • And to assign the css I do: <div id="meu_Div" class="left; right" ></div>. That’s right?

  • take a look at the jsfiddle I put in, I think you’ll understand better

  • In your example you didn’t create scroll. I couldn’t see scrollbar.

  • you want the scroll bar not just the scroll right?

  • 1

    That’s right, the scroll bar so I can walk through the page. At the moment I have two bars, one of the page and one of the table or div, I don’t know. It turns out to see the last grid fields, I need to scroll the page and then scroll the grid and this does not turn.

  • right, I added to my reply the overflow-y and also a link with an example

  • This way it solves, but it is dependent on the size and this is bad, because in another resolution it can give dick, because if I put 100%(width) generates the bar, but it depends on the bar of the page. If I put 1100px, it is ideal, but in my resolution. What about users who use another resolution? I just need to see that question and that’s it, but your solution did work.

  • is that to have the bar it needs a reference only, for example another div that contains a predetermined size, follows another example: http://jsfiddle.net/6WAnd/4/

Show 3 more comments

Browser other questions tagged javascript asp.net-mvc

You are not signed in. Login or sign up in order to post.