1
，在现有的下拉列表中，我想添加一个inbetween选项，其中任何一个用户都可以为文本框中的范围选择提供两个值，也可以是editabe下拉列表。我想要在列中有范围过滤器（不在模板过滤器中，它是在jqgrid中）。任何人都可以帮助在这个屏幕截图中看到这个
的jqGrid DATA - IF用户输入34：09：0; 90：08：8他应该得到这是所有值> = 34：09：0和< 90：08：在持续时间滤波器8
$(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>
的实现依赖于jqGrid的使用哪种（可以使用）的版本，并从叉您使用的jqGrid（[免费jqGrid]（https://github.com/free-jqgrid/jqGrid），商业[Guriddo jqGrid JS]（http://guriddo.net/?page_id=103334））或旧的jqGrid在版本<= 4.7）中。我开发了免费的jqGrid分支并实现了[**自定义过滤操作**]（https://github.com/free-jqgrid/jqGrid/wiki/Custom-filtering-searching-Operation），您可以在其中定义任何自定义过滤操作。请参阅[答案]（http://stackoverflow.com/a/28615923/315935），[this one]（http://stackoverflow.com/a/29676941/315935） – Oleg
添加代码@Oleg .pls help.so当用户在文本框中输入例如：34：09：00; 90：08：08并选择inbewteen时 - jqgrid shud显示所有记录，其大于等于34:09:00但小于90:08:08 - – Priya
添加的代码@Oleg – Priya