none
Ayuda con un filtro en JQGRID Y ASP.NET usando Webmethod RRS feed

  • Pregunta

  • hola a todos, estoy tratando de hacer un filtro de data a través de textbox (adjunto un link para que tengan idea lo que intento hacerejemplo y http://stackoverflow.com/questions/5749723/jqgrid-filtering-records)

    el codigo que muestro funciona muy bien el listado,paginado,sorting de la grid

    lo que no eh podido implementar es el filtro y no se con que valor llega al webmethod

    por ejemplo al -->

    postData: { searchString: '', searchField: '', searchOper: '' ,filters:''},

    si cambio valores aqui llegan los valores que cambio al webmethod pero no tengo conocimiento como pasarle el valor de textbox :S aqui esta mi gran dilema

    espero alguien pueda ayudarme. saludos 

    pd: adjunto el codigo de webmethod

    $(document).ready(function () {
    
      
        $("#list").jqGrid({
    
            search:true,
            postData: { searchString: '', searchField: '', searchOper: '' ,filters:''},
    //        postData: { filters: JSON.stringify(filtro) },
            datatype: function (postdata) {
    
                $(".loading").show();
                mtype: "GET",
                    $.ajax({
                        url: "PruebaSearch.aspx/CountryGridDatos",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(postdata), //no borrar , es necesario
    
                        dataType: "json",
    
                        success: function (data, st) {
                            if (st == "success") {
    
                                var grid = jQuery("#list")[0];
                                grid.addJSONData(JSON.parse(data.d));
                            }
                        },
                        error: function () {
                            alert("Error with AJAX callback");
                        }
    
                    });
            },
    
            
            colNames: ['ID', 'CountrieName', 'Is Active'],
            colModel: [
                    { name: 'CountryID', index: 'CountryID', width: '50px', key: true },
                    { name: 'CountrieName', index: 'CountrieName', width: '100px',search:true },
                    { name: 'IsActive', index: 'IsActive', width: '100px', formatter: "checkbox" }
    
                ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: jQuery("#pager"),
            sortname: "CountrieName",
            sortorder: "asc",
            loadonce: true,
            loadtext: 'Loading Data....',
            viewrecords: true,
            emptyrecords: "No hay resultados",
            gridview: true,
            height: '400',
            width: '900',
            caption: "List Countries",
            ondblClickRow: function (id) {
            
                location.href = 'Detalles.aspx?CountryID=' + id;
            },
            gridComplete: function () {
                $(".loading").hide();
            }
        });
        $("#list").jqGrid('navGrid', '#pager', { del: true, add: false, edit: true, search: true },
            {},
            {},
            {}, {
                
             });
    
    
            $("#btnsearch").click(function () {
                var searchFiler = $("#txtcountry").val(), grid = $("#list"), f;
    
                if (searchFiler.length === 0) {
                    grid[0].p.search = false;
                    $.extend(grid[0].p.postData, { filters: "" });
                }
                f = { groupOp: "OR", rules: [] };
                f.rules.push({ field: "CountrieName", op: "cn", data: searchFiler });
    //            f.rules.push({ field: "note", op: "cn", data: searchFiler });
                grid[0].p.search = true;
                $.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
                grid.trigger("reloadGrid", [{ page: 1, current: true}]);
            });
    });
    
    [WebMethod(EnableSession = true)]
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
            public static string CountryGridDatos(string sidx, string sord, int page, int rows, string searchString, string searchField, string searchOper, string filters)
            {
                var gestorCountry = new CountryBusinessLogic();
                IEnumerable<COUNTRY> datos;
    
                // Establecemos la función de ordenación dependiendo del valor del 
                // parámetro "sidx", que es el campo de orden actual
                Func<COUNTRY, IComparable> funcOrden =
                    sidx == "CountrieName" ? a => a.CountrieName :
                    sidx == "CountryID" ? a => a.CountryID :
    
                    (Func<COUNTRY, IComparable>)(a => a.CountryID);
    
                // Establecemos si se trata de orden ascendente o descendente, en
                // función del parámetro "sord", que puede valer "asc" o "desc"
                Ordenacion ordenacion = sord == "asc" ? Ordenacion.Ascendente : Ordenacion.Descendente;
    
                // Usamos el modelo para obtener los datos
                int pageIndex = Convert.ToInt32(page) - 1;
                var pageSize = rows;
                int totalRegistros = 0;
    
    
                //  datos = gestorClient.searching();
                datos = gestorCountry.ObtenerCountries(funcOrden, ordenacion);
                //var datos2 = gestorClient.OrdenarClientes(funcOrden, ordenacion); 
    
    
    
                totalRegistros = datos.Count();
    
                int totalPages = (int)Math.Ceiling((decimal)totalRegistros / (decimal)pageSize);
    
                datos = datos.Skip(pageIndex * pageSize).Take(pageSize);
                // Creamos la estructura
                var data = new
                {
                    total = totalPages,
                    page = page,
                    records = totalRegistros,
                    rows = (from a in datos
    
                            select new
                            {
                                id = a.CountryID,
                                cell = new string[] {
                                    a.CountryID.ToString(),
                                   a.CountrieName,
                                   a.IsActive.ToString()
                               }
                            }).ToArray()
                };
                return JsonConvert.SerializeObject(data);
            }


    lunes, 8 de octubre de 2012 21:28

Respuestas

  • Que tal....

    No veo como puede enlazar el operador y el campo a buscar, al ser un textbox aparte lo que podria ser es predeterminarlo para un solo campo o a los que defina y del operador que usted escoja, mayor o igual o solo un like por ejemplo, como lo hizo aca:

    $("#btnsearch").click(function () {
                var searchFiler = $("#txtcountry").val(), grid = $("#list"), f;
    
                if (searchFiler.length === 0) {
                    grid[0].p.search = false;
                    $.extend(grid[0].p.postData, { filters: "" });
                }
                f = { groupOp: "OR", rules: [] };
                f.rules.push({ field: "CountrieName", op: "cn", data: searchFiler });
    //            f.rules.push({ field: "note", op: "cn", data: searchFiler });
                grid[0].p.search = true;
                $.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
                grid.trigger("reloadGrid", [{ page: 1, current: true}]);
            });

    para enviarle el valor del textbox, debe hacer algo como esto:

    o en el en el postdata que definio arriba.

    data: "{'search':'" + $('#textboxid').val()

    y no le suena mejor la busqueda que viene en el jqgrid?

    un saludo

    miércoles, 10 de octubre de 2012 17:15

Todas las respuestas

  • Que tal....

    No veo como puede enlazar el operador y el campo a buscar, al ser un textbox aparte lo que podria ser es predeterminarlo para un solo campo o a los que defina y del operador que usted escoja, mayor o igual o solo un like por ejemplo, como lo hizo aca:

    $("#btnsearch").click(function () {
                var searchFiler = $("#txtcountry").val(), grid = $("#list"), f;
    
                if (searchFiler.length === 0) {
                    grid[0].p.search = false;
                    $.extend(grid[0].p.postData, { filters: "" });
                }
                f = { groupOp: "OR", rules: [] };
                f.rules.push({ field: "CountrieName", op: "cn", data: searchFiler });
    //            f.rules.push({ field: "note", op: "cn", data: searchFiler });
                grid[0].p.search = true;
                $.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
                grid.trigger("reloadGrid", [{ page: 1, current: true}]);
            });

    para enviarle el valor del textbox, debe hacer algo como esto:

    o en el en el postdata que definio arriba.

    data: "{'search':'" + $('#textboxid').val()

    y no le suena mejor la busqueda que viene en el jqgrid?

    un saludo

    miércoles, 10 de octubre de 2012 17:15
  • Hola cmmmasi.

    Tengo un problema que no logro resolver. Tiene que ver con tu pregunta aquí.
    Mi objetivo es hacer que desde un click de búsqueda <input>, lanzo una llamada a una funcion que actualice la data de mi jqGrid. He leido que con el postData lo puedo hacer, pero no me funciona. Ni si quiera llega al Controlador. Estoy programando en VS.Net y MVC4.

    Te paso el código que he hecho:

    $(".buttonListar").button().click(function () {
        ClickListarCuenta();
        primeravez = false;
    });

    function ClickListarCuenta() {
        var cadena = "";
        if ($("#txtCuenta").val() != "") cadena += "cuenta=" + $("#txtCuenta").val() + "&";
        if ($("#txtDescripcion").val() != "") cadena += "descripcion=" + $("#txtDescripcion").val() + "&";
        if ($("#optTipoCuenta").val() != 'Selecciona Tipo Cuenta') cadena += "tipo=" + parseInt($("#optTipoCuenta").val()).toString() + "&";
        if ($("#optClase").val() != 'Selecciona Clase') cadena += "clase=" + parseInt($("#optClase").val()).toString() + "&";

        cadena = cadena.substr(0, cadena.length - 1);
       //Hasta aquí siempre entra!!!... pero no hace nada al Grid.
        $('#grilla').jqGrid({
            url: "/Cuentas/PlanContableListar" + "?" + cadena,
            datatype: 'json',
            postData: {
                cuenta: function () { return $("#txtCuenta").val(); },
                descripcion: function () { return $("#txtDescripcion").val(); },
                tipo: function () { return parseInt($("#optTipoCuenta").val()); },
                clase: function () { return parseInt($("#optClase").val()); }
            },
            mtype: 'Post',
            colNames: ['cod_plancontable', 'Cuenta', 'Descripcion', 'Clase', 'Tipo', 'Saldo', 'Costo', 'codclase', 'codtipo', 'codsaldo', 'codcosto', 'Acciones'],
            colModel: [
                { key: true, hidden: true, name: 'cod_plancontable', index: 'cod_plancontable', editable: false },
                { key: false, name: 'cuenta', index: 'cuenta', width: 60, editable: false, search: true },
                { key: false, name: 'descripcion', index: 'descripcion', width: 150, editable: false },
                { key: false, name: 'clase', index: 'clase', width: 60, editable: false },
                { key: false, name: 'tipo', index: 'tipo', width: 60, editable: false },
                { key: false, name: 'saldo', index: 'saldo', width: 60, editable: false },
                { key: false, name: 'costo', index: 'costo', width: 60, editable: false },
                { key: false, hidden: true, name: 'codclase', index: 'codclase', editable: false },
                { key: false, hidden: true, name: 'codtipo', index: 'codtipo', editable: false },
                { key: false, hidden: true, name: 'codsaldo', index: 'codsaldo', editable: false },
                { key: false, hidden: true, name: 'codcosto', index: 'codcosto', editable: false },
                { key: false, name: 'action', index: 'action', sortable: false, formatter: displayButtons }],
            pager: "#pagergrilla",
            rowNum: 20,
            rowList: [20, 30, 40, 50, 999],
            height: '100%',
            viewrecords: true,
            loadonce:true,
            gridview:true,
            emptyrecords: 'Sin registros a mostrar',
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                cod_plancontable: "0"
            },
            autowidth: true,
            multiselect: false,
        });
        //.navGrid('#pagergrilla', { edit: false, add: false, del: false, search: false, refresh: true });

        if (primeravez) {
            $('#grilla').jqGrid('navGrid', '#pagergrilla', {
                search: true,
                searchtext: "Search",  //  Make the Search icon have a "Search" label next to it
                edit: false,
                add: false,
                del: false,
                refresh: false
            },
            {}, // default settings for edit
            {}, // default settings for add
            {}, // delete
            {
                closeOnEscape: true, closeAfterSearch: true, ignoreCase: true, multipleSearch: false, multipleGroup: false, showQuery: false,
                sopt: ['cn', 'eq', 'ne'],
                defaultSearch: 'cn'
            }).navButtonAdd('#pagergrilla', {
                caption: "Exportar a Excel",
                buttonicon: "ui-icon-disk",
                onClickButton: function () {
                    ExportDataToExcel("#grilla");
                },
                last"
            });
        }

    }

    Saludos.

    lunes, 23 de febrero de 2015 22:31