JQuery - FilterToolbar jqgrid

   
Vista:

FilterToolbar jqgrid

Publicado por Pitu (5 intervenciones) el 13/10/2014 16:33:20
Hola,

estoy utilizando el plugin de jQuery jqgrid para mostrar una tabla con datos. El grid se rellena de forma correcta a partir de un servicio web .asmx y el problema viene cuando intento implementar el filterToolbar del grid; de momento he conseguido que se muestren los filtros en la parte superior del grid, pero no consigo que funcionen. La versión del jqgrid es la 4.0.0. A continuación dejo parte del código utilizado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
var colModeItems = [];
jQuery(document).ready(function() {
    $.ajax({
        dataType: "json",
        type: "post",
        url: "Webservices/LoadColumns.asmx/GetColumnsItems",
        data: "{}",
        contentType: "application/json;",
        async: false, //esto es requerido, de otra forma el jqgrid se cargaria antes que el grid
        success: function(data) {
            var persons = JSON.parse(data.d);
            $.each(persons, function(index, persona) {
                colModeItems.push({ name: persona.Name, index: persona.index, label: persona.label, width: persona.width, align: persona.align, editable: persona.editable, edittype: persona.editType, editrules: { edithidden: true }, hidden: false });
            })
        }
    }),
            $("#gridItems").jqGrid(
        {
            datatype: function() {
                $.ajax(
                {
                    url: "Webservices/LoadData.asmx/GetItems", //PageMethod
 
                    data: "{'pPageSize':'" + $('#gridItems').getGridParam("rowNum") +
                    "','pCurrentPage':'" + $('#gridItems').getGridParam("page") +
                    "','pSortColumn':'" + $('#gridItems').getGridParam("sortname") +
                    "','pSortOrder':'" + $('#gridItems').getGridParam("sortorder") + "'}", //PageMethod Parametros de entrada
 
                    dataType: "json",
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    complete: function(jsondata, stat) {
                        if (stat == "success")
                            jQuery("#gridItems")[0].addJSONData(JSON.parse(jsondata.responseText).d);
                        else
                            alert(JSON.parse(jsondata.responseText).Message);
                    }
                });
            },
            jsonReader: //Set the jsonReader to the JQGridJSonResponse squema to bind the data.
            {
            root: "Items",
            page: "CurrentPage",
            total: "PageCount",
            records: "RecordCount",
            repeatitems: true,
            cell: "Row",
            id: "ID" //index of the column with the PK in it    
        },
 
        colModel: colModeItems,
 
        pager: "#pagerItems", //Pager.
        loadtext: 'Cargando datos...',
        recordtext: "{0} - {1} de {2} elementos",
        emptyrecords: 'No hay resultados',
        pgtext: 'Pág: {0} de {1}', //Paging input control text format.
        rowNum: "10", // PageSize.
        rowList: [10, 20, 30], //Variable PageSize DropDownList. 
        viewrecords: true, //Show the RecordCount in the pager.
        multiselect: false,
        sortname: "Id", //Default SortColumn
        sortorder: "asc", //Default SortOrder.
        width: "1000",
        height: "230",
        caption: 'Artículos',
        onSelectRow: function(id) {
            var rowData = jQuery(this).getRowData(id);
            ItemId = rowData['ItemId'];
        }
    }).navGrid("#pagerItems", { edit: false, add: false, search: false, del: false },
    { url: "Webservices/ProcessData.asmx/EditDataItem", closeAfterEdit: true },
    { url: "Webservices/ProcessData.asmx/EditDataItem", closeAfterAdd: true },
    { url: "Webservices/ProcessData.asmx/DeleteDataItem" });
 
    jQuery("#gridItems").hideCol("ItemId");
 
    //Search Toolbar
 
    jQuery("#gridItems").filterToolbar({stringResult: false, searchOperators: true, enableClear: false, searchOnEnter: true,
    defaultSearch: "cn"});
 
    jQuery.extend(jQuery.jgrid.edit, {
        ajaxEditOptions: { contentType: "application/json" },
        recreateForm: true,
        serializeEditData: function(postData) {
            return JSON.stringify(postData);
        }
    });
 
    jQuery.extend(jQuery.jgrid.del, {
        ajaxDelOptions: { contentType: "application/json" },
        serializeDelData: function(postData) {
 
            return JSON.stringify(postData);
        }
    });
});

Agradecería un poco de ayuda, ya que soy bastante nueva en esto y ando algo atascada en este punto.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder