Image for My JQgrid with my Own filter
/**
*
*/
var grid = jQuery("#list2");
var keyitems = [];
var valitems = [];
var uniqueNames = [];
var colNamesHeader = [];
var filterobjArr = [];
jQuery(document).ready(function($) {
$('body').click(function(e) {
var isInpOpen = $("#dialogInp").dialog("isOpen");
if (isInpOpen && e.target.tagName.toUpperCase() != 'INPUT' && e.target.tagName.toUpperCase() != 'IMG' && e.target.tagName.toUpperCase() != 'DIV')
$("#dialogInp").dialog("close");
var isCheckOpen = $("#dialogCheck").dialog("isOpen");
if (isCheckOpen && e.target.tagName.toUpperCase() != 'INPUT' && e.target.tagName.toUpperCase() != 'IMG' && e.target.tagName.toUpperCase() != 'DIV')
$("#dialogCheck").dialog("close");
var isDateOpen = $("#dialogDate").dialog("isOpen");
if (isDateOpen && e.target.tagName.toUpperCase() != 'INPUT' && e.target.tagName.toUpperCase() != 'IMG' && e.target.tagName.toUpperCase() != 'DIV' && e.target.tagName.toUpperCase() != 'SELECT' && e.target.tagName.toUpperCase() != 'A' && e.target.tagName.toUpperCase() != 'SPAN')
$("#dialogDate").dialog("close");
});
$("#dialogInp").dialog({
height: 45,
autoOpen: false,
resizable: false,
});
$("#dialogCheck").dialog({
height: 'auto',
autoOpen: false,
resizable: false,
});
$("#dialogDate").dialog({
height: 'auto',
autoOpen: false,
resizable: false,
});
var myControl = {
create: function(tp_inst, obj, unit, val, min, max, step) {
$('<input class="ui-timepicker-input" value="' + val + '" style="width:50%">')
.appendTo(obj)
.spinner({
min: min,
max: max,
step: step,
change: function(e, ui) { // key events
// don't call if api was used and not key press
if (e.originalEvent !== undefined)
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
},
spin: function(e, ui) { // spin events
tp_inst.control.value(tp_inst, obj, unit, ui.value);
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
}
});
return obj;
},
options: function(tp_inst, obj, unit, opts, val) {
if (typeof(opts) == 'string' && val !== undefined)
return obj.find('.ui-timepicker-input').spinner(opts, val);
return obj.find('.ui-timepicker-input').spinner(opts);
},
value: function(tp_inst, obj, unit, val) {
if (val !== undefined)
return obj.find('.ui-timepicker-input').spinner('value', val);
return obj.find('.ui-timepicker-input').spinner('value');
}
};
$("#from").datetimepicker({
controlType: myControl,
showButtonPanel: true,
changeYear: true,
showTime: false,
showMin: false,
showHour: true,
hourText: "Time",
minuteText: "",
dateFormat: "dd-M-yy",
timeFormat: "hh:mm",
closeText: "Cancel",
buttonText: "Select date",
currentText: "Today",
showOn: "button",
buttonImage: "assets/images/cal.png",
buttonImageOnly: true,
pick12HourFormat: false,
onSelect: function(time, inst) {}
});
$('#to').datetimepicker({
controlType: myControl,
showButtonPanel: true,
changeYear: true,
showTime: false,
showMin: false,
showHour: true,
hourText: "Time",
minuteText: "",
dateFormat: "dd-M-yy",
timeFormat: "hh:mm",
closeText: "Cancel",
buttonText: "Select date",
currentText: "Today",
showOn: "button",
pick12HourFormat: false,
buttonImage: "assets/images/cal.png",
buttonImageOnly: true,
onSelect: function(time, inst) {}
});
$('.searchRem').click(function(e) {
var colIdInp = $("#dialogInp").data("id");
var colIdCheck = $("#dialogCheck").data("id");
var colIdDate = $("#dialogDate").data("id");
var isInpOpen = $("#dialogInp").dialog("isOpen");
var isCheckOpen = $("#dialogCheck").dialog("isOpen");
var isDateOpen = $("#dialogDate").dialog("isOpen");
if (isInpOpen) {
colIdCheck = '';
colIdDate = '';
if (this.src.indexOf('search') > -1) {
var enteredSearch = $(this).closest('div.ui-dialog').find("input[type='text']").val();
filterGrid(enteredSearch, colIdInp);
} else if (this.src.indexOf('remove') > -1) {
filterGrid('', colIdInp);
}
}
if (isCheckOpen) {
colIdInp = '';
colIdDate = '';
if (this.src.indexOf('search') > -1) {
if (colIdCheck == 'colorcode' || colIdCheck == 'event') {
var checkboxes = $(this).closest('div.ui-dialog').find("input[type='checkbox']:checked");
var checkArr = []
for (var i = 0; i < checkboxes.length; i++) {
checkArr.push(checkboxes[i].nextSibling.textContent);
}
filterGridCheck(checkArr, colIdCheck);
} else {
}
} else if (this.src.indexOf('remove') > -1) {
filterGridCheck('', colIdCheck);
}
}
if (isDateOpen) {
colIdCheck = '';
colIdInp = '';
if (this.src.indexOf('search') > -1) {
if (colIdDate == 'currentdate') {
var fromSearch = $(this).closest('div.ui-dialog').find("input[type='text']")[0].value;
var toSearch = $(this).closest('div.ui-dialog').find("input[type='text']")[1].value;
filterGridDate(fromSearch, toSearch, colIdDate);
} else {
}
} else if (this.src.indexOf('remove') > -1) {
filterGrid('', colIdDate);
}
}
grid[0].p.search = fi.rules.length > 0;
$.extend(grid[0].p.postData, {
filters: JSON.stringify(fi)
});
grid.trigger("reloadGrid", [{
page: 1
}]);
$("#dialogInp").dialog("close");
$("#dialogCheck").dialog("close");
$("#dialogDate").dialog("close");
});
var valArr = function() {
return ':Select All;3:3;5:5';
}
/*parse json from file*/
$.ajax({
dataType: "json",
url: "js/grid.json",
// data: data,
success: function(data, status, xhr) {
//console.log(typeof data);
for (var i = 0; i < data.length; i++) {
$.each(data, function(key, val) {
$.each(val, function(key, val) {
keyitems.push(key);
valitems.push(val);
});
});
}
$.each(keyitems, function(i, el) {
if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
});
colNamesHeader.push('');
colNamesHeader.push('');
var ColModel1 = [];
ColModel1.push({
name: 'radio',
index: 'radio',
width: 15,
align: 'center',
sortable: false,
search: false,
formatter: function(cellValue, option) {
return '<input type="radio" name="radio_' + option.gid + '" />';
}
});
for (var i = 0; i < uniqueNames.length; i++) {
colNamesHeader.push('<img id="filter' + uniqueNames[i] + '" class="ui-grid-custom-filter" alt="Filter" src="assets/images/no_filter_icon.png"/><span class="ui-grid-custom-header">' + uniqueNames[i] + '</span>');
ColModel1.push({
name: uniqueNames[i],
index: uniqueNames[i],
align: 'center',
width: 30,
search: false
});
}
jQuery("#list2").jqGrid({
//url:'js/grid.json',
datatype: "local",
data: data,
//colNames:['','<img class="ui-grid-custom-filter" alt="Filter" src="assets/images/no_filter_icon.png"/><span class="ui-grid-custom-header">packageNumber</span>','<img class="ui-grid-custom-filter" alt="Filter" src="assets/images/no_filter_icon.png"/><span class="ui-grid-custom-header">packageName</span>', '<img class="ui-grid-custom-filter" alt="Filter" src="assets/images/no_filter_icon.png"/><span class="ui-grid-custom-header">packageData</span>', '<img class="ui-grid-custom-filter" alt="Filter" src="assets/images/no_filter_icon.png"/><span class="ui-grid-custom-header">event</span>','<img class="ui-grid-custom-filter" alt="Filter" src="assets/images/no_filter_icon.png"/><span class="ui-grid-custom-header">currentdate</span>','<img class="ui-grid-custom-filter" alt="Filter" src="assets/images/no_filter_icon.png"/><span class="ui-grid-custom-header">colorcode</span>','<img class="ui-grid-custom-filter" alt="Filter" src="assets/images/no_filter_icon.png"/><span class="ui-grid-custom-header">initiator</span>'],
colNames: colNamesHeader,
// colModel:ColModel1,
colModel: [{
name: 'radio',
index: 'radio',
width: 50,
sortable: false,
search: false,
resizable: false,
formatter: function(cellValue, option) {
return '<input type="radio" name="radio_' + option.gid + '" />';
}
}, {
name: 'text',
index: 'text',
width: 100,
sortable: false,
search: false,
resizable: false,
formatter: function(cellValue, option) {
return '<input type="text" class="myText" name="text_' + option.gid + '" />';
}
}, {
name: 'packageNumber',
index: 'packageNumber',
width: 150,
"sorttype": "int",
formatter: 'showlink',
formatoptions: {
baseLinkUrl: 'Combobox.jsp',
addParam: '&menuindex=1',
idName: 'packageNumber'
}
}, {
name: 'packageName',
index: 'packageName',
width: 120,
"sorttype": "string"
}, {
name: 'packageData',
index: 'packageData',
width: 150,
"sorttype": "string"
}, {
name: 'event',
index: 'event',
width: 80,
align: "right",
"sorttype": "string"
}, {
name: 'currentdate',
index: 'currentdate',
width: 150,
align: "center",
sorttype: 'date',
formatter: 'date',
formatoptions: {
newformat: 'd-M-Y H:i',
srcformat: 'd-M-Y H:i'
},
datefmt: 'd-M-Y H:i',
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: initDateSearch
}
}, {
name: 'colorcode',
index: 'colorcode',
width: 120,
align: "right",
formatter: 'select',
edittype: 'select',
editoptions: {
value: '3:3;5:5',
defaultValue: 'Intime'
},
stype: 'select',
searchoptions: {
sopt: ['eq', 'ne'],
value: valArr
}
}, {
name: 'initiator',
index: 'initiator',
width: 150,
"sorttype": "string"
}, {
name: 'owner',
index: 'owner',
width: 150,
"sorttype": "string"
}, {
name: 'assignee',
index: 'assignee',
width: 150,
"sorttype": "string"
}],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'packageNumber',
viewrecords: true,
autowidth: true,
loadonce: true, // to enable client side sorting
sortorder: "asc",
"width": "1320",
"height": "150",
sortable: {
options: {
items: ">th:not(:has(#jqgh_list2_cb,#jqgh_list2_radio,#jqgh_list2_rn,#jqgh_list2_text),:hidden)"
}
},
multiSort: true,
rownumbers: true,
multiselect: true,
multiboxonly: true,
// multiGroup:true,
viewsortcols: [true, "vertical", true],
height: '150',
caption: "Item Record",
// altRows:true,
loadComplete: function() {
var filter = grid[0].p.postData.filters,
f, rules, rule;
if (typeof filter !== "undefined") {
f = JSON.parse(filter);
rules = f.rules;
for (i = 0, l = rules.length; i < l; i++) {
rule = rules[i];
if (rule.op === "eq") { //rule.data:"1"
if (rule.data === "1") {
$("#cb_" + rule.field).attr("checked", "checked");
} else {
$("#cb_" + rule.field).removeAttr("checked");
}
}
}
}
},
});
jQuery("#list2").jqGrid('navGrid', '#pager2', {
edit: false,
add: false,
del: false,
search: false
}, {}, {}, {}, {
multipleSearch: true,
multipleGroup: true,
showQuery: true
});
grid.setCaption('Item Records ' + '<input type="button" id="btn_test" onclick="alert(11);" value="Open" />');
//$('#list2').jqGrid('filterToolbar', { searchOnEnter: true, enableClear: true});
//$(".ui-search-toolbar").hide()
$(".ui-jqgrid img").click(function(e) {
e.preventDefault();
var colorli = '',
eventli = '';
if (this.parentElement.textContent == 'colorcode' || this.parentElement.textContent == 'event') {
if (this.parentElement.textContent == 'colorcode') {
var colorcodedata = grid.jqGrid("getGridParam", "data");
colorcodeUnique = $.map(colorcodedata, function(item) {
return item.colorcode;
});
colorcodeUnique = colorcodeUnique.filter(function(itm, i, colorcodeUnique) {
return i == colorcodeUnique.indexOf(itm);
});
for (var i = 0; i < colorcodeUnique.length; i++) {
colorli = colorli + "<li><input type='checkbox'/>" + colorcodeUnique[i] + "</li>";
}
$('#listPrep').html("");
$('#listPrep').html(colorli);
} else {
var eventdata = grid.jqGrid("getGridParam", "data");
eventUnique = $.map(eventdata, function(item) {
return item.event;
});
eventUnique = eventUnique.filter(function(itm, i, eventUnique) {
return i == eventUnique.indexOf(itm);
});
for (var i = 0; i < eventUnique.length; i++) {
eventli = eventli + "<li><input type='checkbox'/>" + eventUnique[i] + "</li>";
}
$('#listPrep').html("");
$('#listPrep').html(eventli);
}
$("#dialogCheck").data("id", this.parentElement.textContent);
$("#dialogCheck").dialog("open");
$("#dialogCheck").dialog("option", "position", {
my: "left top",
at: "left bottom",
of: this.parentNode
});
} else if (this.parentElement.textContent == 'currentdate') {
$("#dialogDate").data("id", this.parentElement.textContent);
$("#dialogDate").dialog("open");
} else {
$("#dialogInp").data("id", this.parentElement.textContent);
$("#dialogInp").dialog("open");
$("#dialogInp").dialog("option", "position", {
my: "left top",
at: "left bottom",
of: this.parentNode
});
}
event.stopImmediatePropagation();
});
},
error: function() {
alert(1);
}
});
initDateSearch = function(elem) {
setTimeout(function() {
$(elem).datetimepicker({
controlType: myControl,
showDropPanel: true,
showButtonPanel: true,
changeYear: true,
showTime: false,
showMin: false,
showHour: true,
hourText: "Time",
minuteText: "",
dateFormat: "dd-M-yy",
timeFormat: "hh:mm",
closeText: "Cancel",
buttonText: "Select date",
currentText: "Today",
showOn: "button",
buttonImage: "assets/images/cal.png",
buttonImageOnly: true,
onClose: function() {
if (this.id.substr(0, 3) === "gs_") {
setTimeout(function() {
jQuery("#list2")[0].triggerToolbar();
}, 50);
} else {
// to refresh the filter
$(this).trigger('change');
}
},
});
$(".ui-datepicker").draggable({
containment: "window"
})
}, 100);
}
// Prepare to pass a new search filter to our jqGrid
var fi = {
groupOp: "AND",
rules: []
};
function filterGrid(str, colId) {
// Prepare to pass a new search filter to our jqGrid
var f = {
groupOp: "AND",
rules: []
};
// Remember to change the following line to reflect the jqGrid column you want to search for your string in
if (str !== '') {
f.rules.push({
field: colId,
op: "cn",
data: str
});
fi.rules.push({
field: colId,
op: "cn",
data: str
});
$('#filter' + colId)[0].src = 'assets/images/filter_icon.png';
} else {
// str=str.trim();
// fi.rules.push({ field: colId, op: "cn", data: str });
fi.rules = fi.rules
.filter(function(el) {
return el.field !== colId;
});
$('#filter' + colId)[0].src = 'assets/images/no_filter_icon.png';
}
grid[0].p.search = f.rules.length > 0;
$.extend(grid[0].p.postData, {
filters: JSON.stringify(f)
});
grid.trigger("reloadGrid", [{
page: 1
}]);
}
function filterGridCheck(strArr, colId) {
// Prepare to pass a new search filter to our jqGrid
var f = {
groupOp: "OR",
rules: []
};
for (var i = 0; i < strArr.length; i++) {
// Remember to change the following line to reflect the jqGrid column you want to search for your string in
f.rules.push({
field: colId,
op: "eq",
data: strArr[i]
});
fi.rules.push({
field: colId,
op: "eq",
data: strArr[i]
});
}
if (strArr.length == 0) {
fi.rules = fi.rules
.filter(function(el) {
return el.field !== colId;
});
}
grid[0].p.search = f.rules.length > 0;
$.extend(grid[0].p.postData, {
filters: JSON.stringify(f)
});
grid.trigger("reloadGrid", [{
page: 1
}]);
if (strArr.length > 0) {
$('#filter' + colId)[0].src = 'assets/images/filter_icon.png';
} else {
$('#filter' + colId)[0].src = 'assets/images/no_filter_icon.png';
}
}
function filterGridDate(from, to, colId) {
// Prepare to pass a new search filter to our jqGrid
var f = {
groupOp: "AND",
rules: []
};
f.rules.push({
field: colId,
op: "ge",
data: from
}, {
field: colId,
op: "le",
data: to
});
fi.rules.push({
field: colId,
op: "ge",
data: from
}, {
field: colId,
op: "le",
data: to
});
grid[0].p.search = f.rules.length > 0;
$.extend(grid[0].p.postData, {
filters: JSON.stringify(f)
});
grid.trigger("reloadGrid", [{
page: 1
}]);
} <!DOCTYPE html >
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="js/jquery.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="js/jquery.jqGrid.js"></script>
<script type="text/ecmascript" src="js/jquery.treegrid.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="js/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jqgrid-init.js"></script>
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/dateTimePicker.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/jquery-ui-1.8.21.custom.css" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/jquery.treegrid.css" />
<!-- Our javascript -->
<meta charset="utf-8" />
<title>jqTreeGrid - Load On Demand - Load all Rows at once collapsed</title>
</head>
<body>
<table id="tree"></table>
<table id="tree1"></table>
<div id="pager"></div>
<!-- pager is not enacled for treegrid in jqgrid -->
<table id="list2"></table>
<div id="pager2"></div>
<button id='mySearch'>Click me to Search</button>
<div id='dialogInp' title="Dialog Title">
<div>
<input type='text' />
<img src='assets/images/search.png' class='searchRem' />
<img src='assets/images/remove.png' class='searchRem' />
</div>
</div>
<div id='dialogCheck' title="Dialog Title">
<div>
<input type='text' />
<img src='assets/images/search.png' class='searchRem' />
<img src='assets/images/remove.png' class='searchRem' />
<ul id='listPrep'>
</ul>
</div>
</div>
<div id='dialogDate' title="Dialog Title">
<div style="float: left; width: 80%">
<table>
<tbody>
<tr>
<td>
<label>From</label>
</td>
<td>
<input id='from' type="text" />
</td>
</tr>
<tr>
<td>
<label>To</label>
</td>
<td>
<input id='to' type="text" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<label>Blank Records</label>
</td>
</tr>
</tbody>
</table>
</div>
<div style="float: right; width: 20%">
<img src='assets/images/search.png' class='searchRem' />
<img src='assets/images/remove.png' class='searchRem' />
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
我想过滤网格中的日期字段，我可以在该日期字段中提供日期和日期，并将该数据发布到网格以进行重新加载。所以我会得到他们之间的数据...这里serchrem是我将执行搜索的按钮..就像搜索按钮...我的日期过滤器的外观和感觉附加在图像中。看看吧。