I want to have range filter in columns (not in templates filters which is ther in jqgrid) . Can anyone help on this -
as u see in screenshot ,in existing dropdown want add option of inbetween ,where either user can give 2 values range selection in textbox or can editabe dropdown.
jqgrid data - if user enter 34:09:0;90:08:8 should values >=34:09:0 , <90:08:8 in duration filter
$(function() { "use strict"; var mydata = [{ id: "1", invdate: "720:0:0", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "2", invdate: "34:09:0", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "3", invdate: "0:0:0", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "4", invdate: "90:08:8", name: "test4", note: "note4", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "5", invdate: "09:34:2", name: "test5", note: "note5", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "6", invdate: "80:12:02", name: "test6", note: "note6", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "7", invdate: "80:12:01", name: "test7", note: "note7", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "8", invdate: "112:23:6", name: "test8", note: "note8", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "9", invdate: "80:12:1 ", name: "test9", note: "note9", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "10", invdate: "112:34:2", name: "test10", note: "note10", amount: "500.00", tax: "30.00", total: "530.00" }, { id: "11", invdate: "114:23:2", name: "test11", note: "note11", amount: "500.00", tax: "30.00", total: "530.00" }, { id: "13", invdate: "80:12:4 ", name: "test11", note: "note12", amount: "500.00", tax: "30.00", total: "530.00" }, { id: "14", invdate: "0:1:0", name: "test11", note: "note12", amount: "500.00", tax: "30.00", total: "530.00" }, { id: "15", invdate: "80:12:3", name: "test11", note: "note12", amount: "500.00", tax: "30.00", total: "530.00" }]; $("#grid").jqgrid({ data: mydata, colnames: ['inv no', 'duration', 'client', 'amount', 'tax', 'total', 'notes'], colmodel: [{ name: 'id', index: 'id', search: false, width: 65, sorttype: 'int' }, { name: 'invdate', index: 'invdate', width: 120, align: 'center', sorttype: 'datetime', datefmt: 'h:i:s', searchoptions: { sopt: ['inbetween', 'eq', 'lt', 'le', 'gt', 'ge'] } }, { name: 'name', index: 'name', width: 90, search: false, }, { name: 'amount', index: 'amount', width: 70, formatter: 'number', align: "right", search: false, }, { name: 'tax', index: 'tax', width: 60, formatter: 'number', align: "right", search: false, }, { name: 'total', index: 'total', width: 60, formatter: 'number', align: "right", search: false, }, { name: 'note', index: 'note', width: 100, search: false, }], pager: true, autoencode: true, viewrecords: true, rownum: 10, rowlist: [5, 10, 20, "10000:all"], caption: "demonstration custom searching operation (duration range)", customsortoperations: { inbetween: { operand: "inbetween", text: "in between", filter: function(options) {} } }, searching: { searchoperators: true } }).jqgrid("filtertoolbar"); });<style> html, body { font-size: 75%; } </style><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/redmond/jquery-ui.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <!--<link rel="stylesheet" href="../jqgrid/css/ui.jqgrid.css">--> <link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqgrid/ok/ui.jqgrid.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <script src="http://www.ok-soft-gmbh.com/jqgrid/ok/i18n/grid.locale-en.js"></script> <script src="http://www.ok-soft-gmbh.com/jqgrid/ok/jquery.jqgrid.src.js"></script> </head> <body> <div id="outerdiv" style="margin:5px;"> <table id="grid"></table> </div> </body> </html>
the implementation depends on version of jqgrid use (can use) , fork of jqgrid use (free jqgrid, commercial guriddo jqgrid js or old jqgrid in version <=4.7). develop free jqgrid fork , implemented custom filtering operations, can define custom filter operation. see the answer, this one.
if can't use free jqgrid, you can use beforesearch callback of filtertoolbar change filter described in the old answer. more long , more complicated code, works in filter toolbar, not in searching dialog, have use onsearch callback. in way it's possible too, implementation more sophisticated.
updated: fix of code example following:
$(function() { "use strict"; var mydata = [{ id: "1", invdate: "720:0:0", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "2", invdate: "34:09:0", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "3", invdate: "0:0:0", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "4", invdate: "90:08:8", name: "test4", note: "note4", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "5", invdate: "09:34:2", name: "test5", note: "note5", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "6", invdate: "80:12:02", name: "test6", note: "note6", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "7", invdate: "80:12:01", name: "test7", note: "note7", amount: "200.00", tax: "10.00", total: "210.00" }, { id: "8", invdate: "112:23:6", name: "test8", note: "note8", amount: "300.00", tax: "20.00", total: "320.00" }, { id: "9", invdate: "80:12:1 ", name: "test9", note: "note9", amount: "400.00", tax: "30.00", total: "430.00" }, { id: "10", invdate: "112:34:2", name: "test10", note: "note10", amount: "500.00", tax: "30.00", total: "530.00" }, { id: "11", invdate: "114:23:2", name: "test11", note: "note11", amount: "500.00", tax: "30.00", total: "530.00" }, { id: "13", invdate: "80:12:4 ", name: "test11", note: "note12", amount: "500.00", tax: "30.00", total: "530.00" }, { id: "14", invdate: "0:1:0", name: "test11", note: "note12", amount: "500.00", tax: "30.00", total: "530.00" }, { id: "15", invdate: "80:12:3", name: "test11", note: "note12", amount: "500.00", tax: "30.00", total: "530.00" }]; $("#grid").jqgrid({ data: mydata, colnames: ['inv no', 'duration', 'client', 'amount', 'tax', 'total', 'notes'], colmodel: [{ name: 'id', index: 'id', search: false, width: 65, sorttype: 'int' }, { name: 'invdate', index: 'invdate', width: 200, align: 'center', sorttype: 'datetime', datefmt: 'h:i:s', searchoptions: { sopt: ['inbetween', 'eq', 'lt', 'le', 'gt', 'ge'] } }, { name: 'name', index: 'name', width: 90, search: false, }, { name: 'amount', index: 'amount', width: 70, formatter: 'number', align: "right", search: false, }, { name: 'tax', index: 'tax', width: 60, formatter: 'number', align: "right", search: false, }, { name: 'total', index: 'total', width: 60, formatter: 'number', align: "right", search: false, }, { name: 'note', index: 'note', width: 100, search: false, }], pager: true, autoencode: true, viewrecords: true, rownum: 10, rowlist: [5, 10, 20, "10000:all"], caption: "demonstration custom searching operation (duration range)", customsortoperations: { inbetween: { operand: "inbetween", text: "in between", filter: function(options) { var converttoseconds = function (value) { // every value should have 3 integer parts var parts = value.split(":"); if (parts.length < 2) { parts.push(0); } if (parts.length < 3) { parts.push(0); } // parts has 3 elements: h:m:s return parseint(parts[2], 10) + parseint(parts[1], 10) * 60 + parseint(parts[0], 10) * 3600; }; var partsoffilter = options.searchvalue.split("-"); if (partsoffilter.length < 2) { // wrong filter return false; } // options.item[options.cmname] - data column return converttoseconds(options.item[options.cmname]) >= converttoseconds(partsoffilter[0]) && converttoseconds(options.item[options.cmname]) <= converttoseconds(partsoffilter[1]) } } }, searching: { searchoperators: true } }).jqgrid("filtertoolbar"); });<style> html, body { font-size: 75%; } </style><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/css/ui.jqgrid.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script> </head> <body> <div id="outerdiv" style="margin:5px;"> <table id="grid"></table> </div> </body> </html>
Comments
Post a Comment