1

Tenho essa function que monta um grid em 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' });
        }

E essa é a minha view onde o grid roda

<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>

Bem, um barra de scroll é criada, mas não consigo rolar, sem que eu role o scroll da página. Gostaria de criar um scroll que não dependesse do scroll da página. Como eu faço isso?

Tenho a div divConteudo oua table gridConteudo

Já fiz isso e não virou. Quanto ao tamanho já alterei para vários e continua a mesma coisa. Preciso mover o scroll da página.

<div id="divGrid" style="left: 300px; top: 150px; width: 450px; height: 220px">
        <table id="gridConteudo"></table>
</div>

1 Resposta 1

1

Você pode adicionar um overflow:scroll para sua div, como no exemplo abaixo tenho duas divs uma direita e uma esquerda, cada uma com seu respectivo 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;
}

Assim se tornando independente do seu scroll da página.

Aqui um link com um exemplo funcional: Scroll independente

8
  • E para atribuir o css eu faço: <div id="meu_Div" class="left; right" ></div>. É isso mesmo?
    – pnet
    Commented 4/12/2015 às 11:09
  • da uma olhada no jsfiddle que coloquei, acho que você entenderá melhor Commented 4/12/2015 às 11:16
  • No seu exemplo não criou o scroll. Não consegui ver a barra de scroll.
    – pnet
    Commented 4/12/2015 às 11:19
  • você quer a barra de scroll não apenas o scroll né? Commented 4/12/2015 às 11:20
  • 1
    Isso mesmo, a barra de scroll para eu poder caminhar pela página. No momento eu tenho duas barras, uma da página e outra da table ou div, sei lá. Acontece que para ver os últimos campos do grid, eu preciso rolar o scroll da página e depois rolar o do grid e isso não vira.
    – pnet
    Commented 4/12/2015 às 11:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .