jquery - JqGrid local filter not working -
the below piece of code not working filter toolbar local data.
please me resolve . new jqgrid. trying make grid filter locally. below piece of code took 1 of example given in fiddle.
i same thing, happens ,i have 2 filters in grid. if select 2 filters grid filters data correctly. if select 1 filter grid not getting filter. eventhough value second filter "no filter"
var serverresponse = [ {id: 10, label: 10, value: "abc"}, {id: 20, label: 20, value: "xyz"}, {id: 30, label: 30, value: "abc"}, {id: 40, label: 40, value: "xyz"}, {id: 50, label: 50, value: "abc"}, {id: 60, label: 60, value: "abc"}, {id: 70, label: 70, value: "xyz"}, {id: 80, label: 90, value: "abc"}, {id: 90, label: 10, value: "xyz"}, {id: 100, label: 20, value: "abc"}, {id: 110, label: 10, value: "abc"}, {id: 120, label: 30, value: "xyz"}, {id: 130, label: 10, value: "abc"}, {id: 140, label: 60, value: "xyz"}, {id: 150, label: 10, value: "abc"} ]; $("#grid").jqgrid({ url: "/echo/json/", // use jsfiddle echo service postdata: { json: json.stringify(serverresponse) // needed jsfiddle echo service }, mtype: "post", // needed jsfiddle echo service datatype: "json", colnames: ["label", "value"], colmodel: [ {name: "label", width: 70, template: "integer" }, {name: "value", width: 200 } ], loadonce: true, pager: true, rownum: 10, rowlist: [5, 10, "10000:all"], iconset: "fontawesome", cmtemplate: { autoresizable: true }, shrinktofit: false, autoresizing: { compact: true }, beforeprocessing: function (data) { var labelmap = {}, valuemap = {}, i, item, labels = ":all", values = [], $self = $(this); (i = 0; < data.length; i++) { item = data[i]; if (!labelmap[item.label]) { labelmap[item.label] = true; labels += ";" + item.label + ":" + item.label; } if (!valuemap[item.value]) { valuemap[item.value] = true; values.push(item.value); } } $self.jqgrid("setcolprop", "label", { stype: "select", searchoptions: { value: labels, sopt: ["eq"] } }); $self.jqgrid("setcolprop", "value", { stype: "select", searchoptions: { value: values, sopt: ["eq"] } }); // 1 should use stringresult:true option additionally because // datatype: "json" @ moment, 1 need use local filtreing later $self.jqgrid("filtertoolbar", {stringresult: true }); } });
first of 1 can see code created jfsiddle, use echo service of jsfiddle, , try use if whiteout jsfiddle. it's wrong. should remove references echo service if need use local data (datatype: "local").
the corresponding code like
$(function () { "use strict"; var mydata = [ {id: 10, label: 10, value: "abc"}, {id: 20, label: 20, value: "xyz"}, {id: 30, label: 30, value: "abc"}, {id: 40, label: 40, value: "xyz"}, {id: 50, label: 50, value: "abc"}, {id: 60, label: 60, value: "abc"}, {id: 70, label: 70, value: "xyz"}, {id: 80, label: 90, value: "abc"}, {id: 90, label: 10, value: "xyz"}, {id: 100, label: 20, value: "abc"}, {id: 110, label: 10, value: "abc"}, {id: 120, label: 30, value: "xyz"}, {id: 130, label: 10, value: "abc"}, {id: 140, label: 60, value: "xyz"}, {id: 150, label: 10, value: "abc"} ]; $("#grid").jqgrid({ datatype: "local", data: mydata, colnames: ["label", "value"], colmodel: [ {name: "label", width: 70, template: "integer" }, {name: "value", width: 200 } ], pager: true, rownum: 10, rowlist: [5, 10, "10000:all"], iconset: "fontawesome", cmtemplate: { autoresizable: true }, shrinktofit: false, autoresizing: { compact: true } }).jqgrid("filtertoolbar"); }); see demo https://jsfiddle.net/0bfnt8ym/
if want creates selects unique values can before creating grid:
$(function () { "use strict"; var mydata = [ {id: 10, label: 10, value: "abc"}, {id: 20, label: 20, value: "xyz"}, {id: 30, label: 30, value: "abc"}, {id: 40, label: 40, value: "xyz"}, {id: 50, label: 50, value: "abc"}, {id: 60, label: 60, value: "abc"}, {id: 70, label: 70, value: "xyz"}, {id: 80, label: 90, value: "abc"}, {id: 90, label: 10, value: "xyz"}, {id: 100, label: 20, value: "abc"}, {id: 110, label: 10, value: "abc"}, {id: 120, label: 30, value: "xyz"}, {id: 130, label: 10, value: "abc"}, {id: 140, label: 60, value: "xyz"}, {id: 150, label: 10, value: "abc"} ], builduniquevalues = function (data, propname) { var i, item, valuemap = {}, values = [":all"], datalength = data.length, value, lowcasevalue; (i = 0; < datalength; i++) { value = data[i][propname]; if (value !== undefined) { lowcasevalue = typeof value === "string" ? value.tolowercase() : value; if (valuemap[lowcasevalue] === undefined) { valuemap[lowcasevalue] = lowcasevalue; values.push(lowcasevalue + ":" + value); } } } return values.join(";"); }; $("#grid").jqgrid({ datatype: "local", data: mydata, colnames: ["label", "value"], colmodel: [ { name: "label", width: 70, template: "integer", stype: "select", searchoptions: { value: builduniquevalues(mydata, "label"), sopt: ["eq", "ne"] } }, { name: "value", width: 200,stype: "select", searchoptions: { value: builduniquevalues(mydata, "value"), sopt: ["eq", "ne"] } } ], pager: true, rownum: 10, rowlist: [5, 10, "10000:all"], iconset: "fontawesome", cmtemplate: { autoresizable: true }, shrinktofit: false, autoresizing: { compact: true } }).jqgrid("filtertoolbar"); }); 
Comments
Post a Comment