问题
as u see in screenshot ,in existing dropdown I want to add an option of inbetween ,where either user can give two values for range selection in textbox or it can be a editabe dropdown.
jQGRID DATA - IF user enter 34:09:0;90:08:8 he should get all values which are >=34:09:0 and <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>回答1:
The implementation depends on the version of jqGrid which you use (can use) and from fork of jqGrid which you use (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). I develop free jqGrid fork and implemented custom filtering operations, where you can define any custom filter operation. See the answer, this one.
If you can't use free jqGrid, then you you can use beforeSearch callback of filterToolbar to change the filter like I described in the old answer. You will get more long and more complicated code, which works in the filter toolbar, but not in Searching Dialog, where you will have to use onSearch callback. In any way it's possible too, but the implementation is more sophisticated.
UPDATED: The fix of your code could be for example the 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); }
// now 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] - the data from the 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>来源：https://stackoverflow.com/questions/40483338/i-want-to-have-range-filter-in-columns-not-in-templates-filters-which-is-ther-i