我想在列中使用范围过滤器(而不是在jqgrid中的模板过滤器中).任何人都可以帮忙吗 [英] I want to have range filter in columns (not in templates filters which is ther in jqgrid) . Can anyone help on this
本文介绍了我想在列中使用范围过滤器(而不是在jqgrid中的模板过滤器中).任何人都可以帮忙吗的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如您在屏幕快照中所见，在现有下拉菜单中，我想添加一个inbetween选项，其中用户可以在文本框中输入两个值作为范围选择，也可以是editabe下拉菜单.
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数据-如果用户输入34:09:0; 90:08:8他应该在持续时间过滤器中获得> = 34:09:0和< 90:08:8的所有值
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>
推荐答案
实现取决于您使用(可以使用)的jqGrid版本以及您使用的jqGrid的分支( Guriddo jqGrid JS 或版本< = 4.7中的旧jqGrid).我开发了免费的jqGrid fork，并实现了 自定义过滤操作 ，您可以在其中定义任何自定义过滤器操作.参见答案，这一个.
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.
如果您不能使用免费的jqGrid，则可以使用filterToolbar的beforeSearch回调来更改过滤器，如我在
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>
这篇关于我想在列中使用范围过滤器(而不是在jqgrid中的模板过滤器中).任何人都可以帮忙吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
