正如您在屏幕截图中看到的那样，在现有下拉列表中，我想添加中间选项，用户可以在文本框中为范围选择提供两个值，也可以是可编辑的下拉列表。
jQGRID DATA - 如果用户输入 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>