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:
Agradecería un poco de ayuda, ya que soy bastante nueva en esto y ando algo atascada en este punto.
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
0