Javascript 如何覆盖JQGrid中的默认搜索功能
我有一个JQGrid设置，搜索栏出现在顶部。对于文本字段，我希望搜索栏正常工作。当我创建一个带有几个精确匹配选项的下拉列表时，情况也是如此。但是，对于日期字段或数字范围，我想创建一个下拉列表，允许用户按范围搜索。我假设在这些情况下，我需要覆盖JQGrid的现有搜索功能，并编写自己的搜索功能 我假设这是通过fn searchoption完成的。到目前为止，我已经做到了以下几点。这将创建网格和搜索选项，完全如我所愿。然而，尝试进行任何搜索都会清除整个网格，可能是因为它不知道如何处理特殊的日期和范围下拉列表。我希望能够深入了解如何继续。如果JQGrid中已经存在此功能，请告诉我如何访问它 顺便说一句，我想让所有处理保持本地。像JQGrid这样的东西的主要优点是消除了来自多个数据库请求的负载，并且消除了由如此多的HTTP连接造成的延迟和开销Javascript 如何覆盖JQGrid中的默认搜索功能,javascript,jquery,jqgrid,Javascript,Jquery,Jqgrid,我有一个JQGrid设置，搜索栏出现在顶部。对于文本字段，我希望搜索栏正常工作。当我创建一个带有几个精确匹配选项的下拉列表时，情况也是如此。但是，对于日期字段或数字范围，我想创建一个下拉列表，允许用户按范围搜索。我假设在这些情况下，我需要覆盖JQGrid的现有搜索功能，并编写自己的搜索功能 我假设这是通过fn searchoption完成的。到目前为止，我已经做到了以下几点。这将创建网格和搜索选项，完全如我所愿。然而，尝试进行任何搜索都会清除整个网格，可能是因为它不知道如何处理特殊的日期和范围下
<script>
$("#grid1").jqGrid({
datatype: "local",
height: 250,
colNames: ['CF Template', 'Error Date', 'Skey', 'Type', 'Summary'],
colModel: [
{ name: 'page_name',
index: 'page_name',
width: 400,
sorttype: 'text',
search:true,
stype:'text'
}
,
{ name: 'row_timestamp',
index: 'row_timestamp',
width: 100,
sorttype: 'date',
search:true,
stype:'select',
searchoptions: {
value:{'0':'Any','2014-2-01_2014-2-28':'February','2014-3-01_2014-3-31':'March','2014-4-01_2014-4-30':'April'},
dataEvents: [
{
type: 'change',
fn: function(e) {
alert($('#gs_row_timestamp option:selected').val());
alert($('#gs_row_timestamp option:selected').text());
alert('4');
}
}
]
}
}
,
{ name: 'row_id',
index: 'row_id',
width: 100,
sorttype: 'int',
search:true,
stype:'select',
searchoptions: {
value:{0:'Any',2:'0 - 12000000000',3:'12000000000 - 24000000000',4:'24000000000 - 36000000000',5:'36000000000 - 48000000000',6:'48000000000 - 60000000000'},
dataEvents: [
{
type: 'change',
fn: function(e) {
alert($('#gs_row_id option:selected').val());
alert($('#gs_row_id option:selected').text());
alert('2');
}
}
]
}
}
,
{ name: 'error_type',
index: 'error_type',
width: 100,
sorttype: 'text',
search:true,
stype:'select',
searchoptions: {
value:{0:'Any',2:'Application',3:'Database',4:'Expression',5:'MissingInclude'},
dataEvents: [
{
type: 'change',
fn: function(e) {
alert($('#gs_error_type option:selected').val());
alert($('#gs_error_type option:selected').text());
alert('1');
}
}
]
}
}
,
{ name: 'error_summary',
index: 'error_summary',
width: 500,
sorttype: 'text',
search:true,
stype:'text'
}
],
multiselect: false,
rowNum: 25, // Number of rows shown per page; must also change down below
pager: '#pager1',
height: 250,
altRows: true, // Allows for styling of alt rows
altclass: 'altRowClass', // Create striped rows
viewrecords: true, // Show recordcount in lower right corner
ignoreCase: true, // Case insensitive searches
multiSort: true,
</script>
var mydata = [
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\home.cfm"
, row_timestamp: "2014-04-29 13:25:08.528"
, row_id: "135200030"
, error_type: "MissingInclude"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\home.cfm"
, row_timestamp: "2014-04-29 13:24:48.575"
, row_id: "135200040"
, error_type: "MissingInclude"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Report\\repot_file_1.cfm"
, row_timestamp: "2014-04-25 08:46:04.428"
, row_id: "135200050"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Report\\repot_file_1.cfm"
, row_timestamp: "2014-04-25 08:46:03.944"
, row_id: "135200060"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Test\\jqtest.cfm"
, row_timestamp: "2014-04-16 10:10:14.729"
, row_id: "135200070"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Activity\\loader_file_1.cfm"
, row_timestamp: "2014-04-15 16:47:51.477"
, row_id: "135200080"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Blank\\loader_file_2.cfm"
, row_timestamp: "2014-04-15 16:47:50.071"
, row_id: "135200090"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Activity\\loader_file_1.cfm"
, row_timestamp: "2014-04-15 16:42:22.18"
, row_id: "135300000"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Blank\\loader_file_2.cfm"
, row_timestamp: "2014-04-15 16:42:20.664"
, row_id: "135300010"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
, row_timestamp: "2014-04-08 11:53:38.01"
, row_id: "135300020"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
, row_timestamp: "2014-04-08 11:28:23.948"
, row_id: "135300030"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
, row_timestamp: "2014-04-08 11:07:24.76"
, row_id: "135300040"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
, row_timestamp: "2014-04-08 10:30:13.026"
, row_id: "135300050"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\CustomTag\\stored_proc.cfm"
, row_timestamp: "2014-04-08 09:03:21.588"
, row_id: "135300060"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\EdiErrorQueue\\INVN\\Frameset_1.cfm"
, row_timestamp: "2014-02-19 09:52:43.078"
, row_id: "135300070"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\EdiErrorQueue\\INVN\\Frameset_1.cfm"
, row_timestamp: "2014-02-19 09:46:10.906"
, row_id: "135300080"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
];
for (var i = 0; i < mydata.length; i++)
jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);
jQuery("#grid1").setGridParam({ rowNum: 25 }).trigger("reloadGrid");
var mydata=[
{
页面名称：“C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\home.cfm”
，row_时间戳：“2014-04-29 13:25:08.528”
，行识别号：“135200030”
，错误类型：“缺失包含”
，error_summary:“这是一些示例文本。实际数据将在此处。”
}
,
{
页面名称：“C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\home.cfm”
，row_时间戳：“2014-04-29 13:24:48.575”
，行识别号：“135200040”
，错误类型：“缺失包含”
，error_summary:“这是一些示例文本。实际数据将在此处。”
}
,
{
页面名称：“C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Report\\repot\u file_1.cfm”
，第u行时间戳：“2014-04-25 08:46:04.428”
，行识别号：“135200050”
，错误类型：“表达式”
，error_summary:“这是一些示例文本。实际数据将在此处。”
}
,
{
页面名称：“C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Report\\repot\u file_1.cfm”
，行时间戳：“2014-04-25 08:46:03.944”
，行识别号：“135200060”
，错误类型：“表达式”
，error_summary:“这是一些示例文本。实际数据将在此处。”
}
,
{
页面名称：“C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Test\\jqtest.cfm”
，row_时间戳：“2014-04-16 10:10:14.729”
，行识别号：“135200070”
，错误类型：“表达式”
，error_summary:“这是一些示例文本。实际数据将在此处。”
}
,
{
页面名称：“C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder\u 1\\Activity\\loader\u file\u 1.cfm”
，row_时间戳：“2014-04-15 16:47:51.477”
，行识别号：“135200080”
，错误类型：“数据库”
，error_summary:“这是一些示例文本。实际数据将在此处。”
}
,
{
页面名称：“C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder\u 1\\Blank\\loader\u file\u 2.cfm”
，row_时间戳：“2014-04-15 16:47:50.071”
，行识别号：“135200090”
，错误类型：“数据库”
，error_summary:“这是一些示例文本。实际数据将在此处。”
}
,
{
页面名称：“C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder\u 1\\Activity\\loader\u file\u 1.cfm”
，row_时间戳：“2014-04-15 16:42:22.18”
，行识别号：“135300000”
，错误类型：“数据库”
，error_summary:“这是一些示例文本。实际数据将在此处。”
}
,
{
页面名称：“C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder\u 1\\Blank\\loader\u file\u 2.cfm”
，row_时间戳：“2014-04-15 16:42:20.664”
，行识别号：“135300010”
，错误类型：“数据库”
，error_summary:“这是一些示例文本。实际数据将在此处。”
}
,
{
页面名称：“C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder\u 12\\Activity\\action\u页面1.cfm”
，row_时间戳：“2014-04-08 11:53:38.01”
，行识别号：“135300020”
，错误类型
var mydata = [
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\home.cfm"
, row_timestamp: "2014-04-29 13:25:08.528"
, row_id: "135200030"
, error_type: "MissingInclude"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\home.cfm"
, row_timestamp: "2014-04-29 13:24:48.575"
, row_id: "135200040"
, error_type: "MissingInclude"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Report\\repot_file_1.cfm"
, row_timestamp: "2014-04-25 08:46:04.428"
, row_id: "135200050"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Report\\repot_file_1.cfm"
, row_timestamp: "2014-04-25 08:46:03.944"
, row_id: "135200060"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Test\\jqtest.cfm"
, row_timestamp: "2014-04-16 10:10:14.729"
, row_id: "135200070"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Activity\\loader_file_1.cfm"
, row_timestamp: "2014-04-15 16:47:51.477"
, row_id: "135200080"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Blank\\loader_file_2.cfm"
, row_timestamp: "2014-04-15 16:47:50.071"
, row_id: "135200090"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Activity\\loader_file_1.cfm"
, row_timestamp: "2014-04-15 16:42:22.18"
, row_id: "135300000"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\interface\\subFolder_1\\Blank\\loader_file_2.cfm"
, row_timestamp: "2014-04-15 16:42:20.664"
, row_id: "135300010"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
, row_timestamp: "2014-04-08 11:53:38.01"
, row_id: "135300020"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
, row_timestamp: "2014-04-08 11:28:23.948"
, row_id: "135300030"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
, row_timestamp: "2014-04-08 11:07:24.76"
, row_id: "135300040"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\subFolder_12\\Activity\\action_page_1.cfm"
, row_timestamp: "2014-04-08 10:30:13.026"
, row_id: "135300050"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\Common\\CustomTag\\stored_proc.cfm"
, row_timestamp: "2014-04-08 09:03:21.588"
, row_id: "135300060"
, error_type: "Database"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\EdiErrorQueue\\INVN\\Frameset_1.cfm"
, row_timestamp: "2014-02-19 09:52:43.078"
, row_id: "135300070"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
,
{
page_name: "C:\\inetpub\\wwwroot\\AppName\\AppFolder\\interface\\EdiErrorQueue\\INVN\\Frameset_1.cfm"
, row_timestamp: "2014-02-19 09:46:10.906"
, row_id: "135300080"
, error_type: "Expression"
, error_summary: "This is some sample text for example purposes. Real data would be here."
}
];
for (var i = 0; i < mydata.length; i++)
jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);
jQuery("#grid1").setGridParam({ rowNum: 25 }).trigger("reloadGrid");
function(){
triggerToolbar();
return false;
}
var mydata = [ /* Your local data */ ];
var gridurl = window.location.href + "/mygrid";
$.ajaxTransport("json", function(options) {
if(options.url.indexOf(gridurl) === 0) {
return {
send: function(headers, completeCallback) {
setTimeout(function(){ //We still want the call to be asynchroneous
completeCallback(200, "success", {json: mydata});
}, 10);
},
abort: function() {
//Do nothing
}
};
}
});
$("#grid1").jqGrid({
url: gridurl,
datatype: "json",
height: 250,
colNames: ['CF Template', 'Error Date', 'Skey', 'Type', 'Summary'],
/* ... */
});
//No call to addRowData
function getParameterByName(url, name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(url);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
//Filtering split in two functions:
// -one to parse the url and identify what filters to apply
// -one to do the actual filtering
function getFilterOptions(url) {
var filterOptions = {};
var row_id = getParameterByName(url, "row_id");
if (row_id && row_id != "*") { //"*" == Any
filterOptions.row_id = row_id.split("_");
}
return filterOptions;
}
//Uses Array.filter(), may require a polyfill on older browsers
function filterData(data, filterOptions) {
return data.filter(function(row) {
if (filterOptions.row_id) {
return filterOptions.row_id[0] <= row.row_id
&& row.row_id <= filterOptions.row_id[1]
}
return true;
});
}
$.ajaxTransport("json", function(options) {
//options.url is the query sent by jqGrid, including search parameters
if(options.url.indexOf(gridurl) === 0) {
var filterOptions = getFilterOptions(options.url);
return {
send: function(headers, completeCallback) {
setTimeout(function(){
//this is what jqGrid will receive.
var filteredData = filterData(mydata, filterOptions);
completeCallback(200, "success", {json: filteredData});
}, 10);
},
abort: function() {
//Do nothing
}
};
}
});
$("#grid1").jqGrid({
url: gridurl,
datatype: "json",
height: 250,
colNames: ['CF Template', 'Error Date', 'Skey', 'Type', 'Summary'],
colModel: [{/* template column */},
{/* date column */},
{
name: 'row_id',
index: 'row_id',
width: 100,
sorttype: 'int',
search:true,
stype:'select',
searchoptions: {
value: {
'*':'Any', //Notice: joker used in getFilterOptions
'0_12000000000':'0 - 12000000000',
'12000000000_24000000000':'12000000000 - 24000000000',
/* ... */
}
//no event handler
}
},
/* ... */
],
/* ... */
});