1

É basicamente fazer com que a função do JQGrid receba parâmetros tipo(data: {} ), pelos eventos .change e que atualize a grid.

Eu tenho uma grid que é carregado junto com documento, mas preciso implementar algumas condições e filtros. Por exemplo, no .change do <select> passar o value do option como parâmetro para url:'/Representantes/Cliente/listapelodao', para trazer somente os clientes daquele representantes. Além disso tenho outros filtros, como vendedores, datas, loja e cada vez que for preenchido, preciso atualizar a lista (JQGrid).

 var grid = $("#jqGrid").jqGrid({
        //url: '@Url.Action("Lista","Recurso", new { Area = "Gerenciamento" })',
        url:'/Representantes/Cliente/listapelodao',
        mtype: 'GET',
        datatype: 'json',

        colModel: [
            { label: 'Codigo', name: 'A1_COD', width: 80 },
            { label: 'Loja', name: 'A1_LOJA', width: 80 }, 
            { label: 'Nome', name: 'A1_NOME', width: 350 },
            { label: 'CNPJ', name: 'A1_CGC', width: 120 }, 
            { label: 'Municipio', name: 'A1_MUN', width: 150 },
            { label: 'Telefone', name: 'A1_TEL', width: 80 },

        ],

         viewrecords: true,
        rowNum: 20,
        rowList: [20, 40, 100],
        //height: "auto",
        height: 400,
        emptyrecords: "Nenhum Recurso",
        loadtext: "Buscando e carregando...",
        rowNum: 20,
        pager: "#jqGridPager",        
        loadonce: true
        });

1 Resposta 1

0

Achei um exemplo no stackoverflow em inglês e adaptei a minha necessidade e está funcinando.

 var url = "/Representantes/Cliente/listapelodao";

$(document).ready(function () {

    var representante = $("#sessaoRepresentante").val();
    if ($("#sessaoRepresentante").val() != "0") {
        $("#representante").prop("disabled", true);
        CarregaVendedores(representante)
    }


    var vendedor = $("#sessaoVendedor").val();
    var nome = $("#nome").val();

    CarregaRepresentante(representante);    

    var $table = $("#jqGrid");

    $table.jqGrid({
        url: url,
        datatype: 'json',
        mtype: 'GET',  
        postData: {
            representante: function () { return jQuery("#representante option:selected").val(); },
            vendedor: function () { return jQuery("#vendedor option:selected").val(); },
            nome: function () { return jQuery("#nome").val(); }
        }, 
       colModel: [
           { label: 'RECNO', name: 'RECNO', width: 80 },
           { label: 'Cliente', name: 'CLIENTE', width: 80 },
            { label: 'Loja', name: 'A1_LOJA', width: 80 },
            { label: 'Nome', name: 'A1_NOME', width: 350 },
            { label: 'CNPJ', name: 'A1_CGC', width: 120 },
            { label: 'Municipio', name: 'A1_MUN', width: 150 },
            { label: 'Telefone', name: 'A1_TEL', width: 80 },

        ],
         viewrecords: true,
            rowNum: 20,
            rowList: [20, 40, 100],
            //height: "auto",
            height: 400,
            emptyrecords: "Nenhum Recurso",
            loadtext: "Buscando e carregando...",
            rowNum: 20,
            pager: "#jqGridPager",
            loadonce: true

    });



    $('select#representante').on("change", function () {

        var id = $("#representante").val();
        $("#nome").val('');

        CarregaVendedores(id)
        //$table.trigger('reloadGrid');
        $("#jqGrid").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid');
    });

  $('select#vendedor').on("change", function () {

      //$table.trigger('reloadGrid');
      $("#nome").val('');
      $("#jqGrid").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid');
  });

  const inputEle = document.getElementById('nome');
  inputEle.addEventListener('keyup', function (e) {
      var key = e.which || e.keyCode;
      if (key == 13) { // codigo da tecla enter
          nome = this.value;

          $("#jqGrid").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid');
      }

  });


    function CarregaRepresentante(representante) {
        $.ajax({
            url: "/Gerenciamento/UsuarioExterno/SelecionarRepresentante",
            async: false,
            success: function (data) {

                $("#representante").empty();

                if (representante == 0) {
                    $("#representante").append('<option value="" disabled selected hidden>Selecione...</option>');
                }

                $.each(data, function (i, element) {
                    if (representante > 0) {
                        if (representante == element.codigoRepresentante) {
                            $("#representante").append('<option  value=' + element.codigoRepresentante + ' selected >' + element.nome + '</option>');
                        }
                    }
                    $("#representante").append('<option value=' + element.codigoRepresentante + '>' + element.nome + '</option>');
                });
            }
        });
    }

    function CarregaVendedores(representante) {
        $.ajax({
            url: "/Gerenciamento/UsuarioExterno/SelecionarVendedores",
            data: { representante: representante },
            async: false,
            success: function (data) {

                $("#vendedor").empty();

                $("#vendedor").append('<option value="0" disabled selected hidden>Selecione...</option>');

                $.each(data, function (i, element) {

                    $("#vendedor").append('<option value=' + element.codigoVendedor + '>' + element.nomeVendedor + '</option>');
                });

            }
        });
    }


});

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 .