0
Ich benutze jqgrid in meiner Website und ich brauche eine Combobox in der Kopfzeile, die Werte dynamisch vom Server hält.Wie man Combobox in jqgrid Header
Ich versuchte es aber vergebens. Ich kann ein Dropdown mit fest codierten Werten abrufen. Die Daten für diese spezielle Spalte sind ebenfalls eine Combobox mit dynamischen Werten. Ich habe filtertoolbar gesehen help mir aber das sollte nur diese Spalte aktiviert werden, wo wie FilterToolBar Suche nach allen vorhandenen Spalten aktivieren wird. Ich wollte diese Funktion nicht haben.
Folgendes habe ich bisher versucht (https://jsfiddle.net/adgptkvj/33/).
HTML:
<table id="grid"></table>
<div id="pager"></div>
<p>
<button id="searchEmpty">Search Empty Status</button>
</p>
<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" alt='from' />
</td>
</tr>
<tr>
<td>
<label>To</label>
</td>
<td>
<input id='to' type="text" alt='to' />
</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' alt='sea' />
</div>
</div>
javascript:
var mydata = [{
"packageNumber": 201506020001,
"packageName": "hello",
"packageData": [
"String 1",
"String 2",
"String 3"
],
"event": "Assigned",
"currentdate": "06-Mar-2015 05:06",
"colorcode": 5,
"initiator": "NS",
"owner": "BPS",
"assignee": "DCB"
}, {
"packageNumber": 201506020002,
"packageName": "",
"packageData": [
"String 1",
"String 2",
"String 3"
],
"event": "Assigned",
"currentdate": "06-Jun-2015 05:06",
"colorcode": 3,
"initiator": "",
"owner": "BPS",
"assignee": "DCB"
}, {
"packageNumber": 201506020003,
"packageName": "",
"packageData": [
"String 1",
"String 2",
"String 3"
],
"event": "Assigned",
"currentdate": "06-Apr-2015 05:06",
"colorcode": 5,
"initiator": "NS",
"owner": "BPS",
"assignee": "DCB"
}, {
"packageNumber": 201506020004,
"packageName": "hello",
"packageData": [
"String 1",
"String 2",
"String 3"
],
"event": "Assigned",
"currentdate": "06-Apr-2015 05:06",
"colorcode": 3,
"initiator": "",
"owner": "BPS",
"assignee": "DCB"
}, {
"packageNumber": 201506020005,
"packageName": "hello",
"packageData": [
"String 1",
"String 2",
"String 3"
],
"event": "Assigned",
"currentdate": "06-Apr-2015 05:06",
"colorcode": 3,
"initiator": "NS",
"owner": "BPS",
"assignee": "DCB"
}];
$("#dialogDate").dialog({
height: 'auto',
autoOpen: false,
resizable: false,
});
var grid = $("#grid");
$("#grid").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames: ['Inv No', '<img alt="search"/>currentdate', '<select><option>100</option></select>Number', 'Status'],
colModel: [{
name: 'packageNumber',
key: true,
width: 150,
formatter: 'showlink',
formatoptions: {
baseLinkUrl: 'Combobox.jsp',
addParam: '&menuindex=1',
idName: 'packageNumber'
}
}, {
name: 'currentdate',
width: 150,
align: "center",
sorttype: 'date',
formatter: 'date',
formatoptions: {
newformat: 'd-M-Y H:i',
srcformat: 'd-M-Y H:i'
}
}, {
name: 'colorcode',
index: 'colorcode',
width: 120,
align: "right",
formatter: 'select',
edittype: 'select',
editoptions: {
value: '3:3;5:5',
defaultValue: '3'
},
width: 80
}, {
name: 'initiator',
width: 80
}],
caption: "Stack Overflow Example",
rowNum: 10,
pager: "#pager",
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() {
$(".s-ico").addClass("wrapSortIcons");
},
}).jqGrid("navGrid", "#pager", {
edit: false,
add: false,
del: false
});
$(".ui-jqgrid img").click(function(e) {
e.preventDefault();
$("#dialogDate").data("id", this.parentElement.textContent);
$("#dialogDate").dialog("open");
event.stopImmediatePropagation();
});
$("#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: "From",
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: "To",
currentText: "Today",
showOn: "button",
pick12HourFormat: false,
buttonImage: "assets/images/cal.png",
buttonImageOnly: true,
onSelect: function(time, inst) {}
});
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');
}
};
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: "from",
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);
}
$('.searchRem').click(function(e) {
var colIdDate = $("#dialogDate").data("id");
var isDateOpen = $("#dialogDate").dialog("isOpen");
if (isDateOpen) {
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;
alert(fromSearch + "jfhsjkdh" + toSearch + "i am here" + colIdDate);
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
}]);
$("#dialogDate").dialog("close");
});
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
});
grid[0].p.search = f.rules.length > 0;
$.extend(grid[0].p.postData, {
filters: JSON.stringify(f)
});
grid.trigger("reloadGrid", [{
page: 1
}]);
}
$("#searchEmpty").click(function() {
var p = grid.jqGrid("getGridParam"); // grid[0].p
p.search = true;
p.postData.filters = {
groupOp: "AND",
rules: [{
field: "initiator",
op: "eq",
data: ""
}]
};
grid.trigger("reloadGrid", {
page: 1
});
});
$("#grid").on("jqGridSortCol", function(e, sortName, iCol, sortOrder) {
$("table.ui-jqgrid-htable thead").remove("table#list2");
alert("sortName=" + sortName + "\niCol=" + iCol + "\nsortOrder=" + sortOrder);
if (sortName === "name") {
alert(sortOrder);
var ord = sortOrder;
alert(ord);
}
});
$('.wrapSortIcons').click(function(e) {
// alert(111)
$.extend(grid[0].p.multiSort, true);
var sortgridParams = [];
colId = this.parentElement.textContent;
var sortOrd = "asc";
for (var child = 0; child < this.children.length; child++) {
if (this.children[child].className.indexOf('disabled') == -1) {
sortOrd = $(this.children[child]).attr('sort');
}
}
var colObj = {
"columnId": "",
"sortOrder": "asc"
};
colObj.columnId = colId;
colObj.sortOrder = sortOrd;
disableSorting(colId);
multiCols.push(colObj);
for (var i = 0; i < multiCols.length; i++) {
sortgridParams.push({
sortname: multiCols[i].columnId,
sortorder: multiCols[i].sortOrder
});
}
grid.jqGrid('sortGrid', sortgridParams).trigger('reloadGrid', [{
page: 1
}]);
enableSorting(colId);
e.preventDefault();
e.stopImmediatePropagation();
});
CSS:
@CHARSET "ISO-8859-1";
/*
DATE PICKER time CSS
*/
.ui-timepicker-div .ui-widget-header {
margin-bottom: 8px;
}
.ui-timepicker-div dl {
text-align: left;
}
.ui-timepicker-div dl dt {
float: left;
clear: left;
padding: 0 0 0 5px;
}
.ui-timepicker-div dl dd {
margin: 0 10px 10px 40%;
}
.ui-timepicker-div td {
font-size: 90%;
}
.ui-tpicker-grid-label {
background: none;
border: none;
margin: 0;
padding: 0;
}
.ui-timepicker-div .ui_tpicker_unit_hide {
display: none;
}
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
background: none;
color: inherit;
border: none;
outline: none;
border-bottom: solid 1px #555;
width: 95%;
}
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus {
border-bottom-color: #aaa;
}
.ui-timepicker-rtl {
direction: rtl;
}
.ui-timepicker-rtl dl {
text-align: right;
padding: 0 5px 0 0;
}
.ui-timepicker-rtl dl dt {
float: right;
clear: right;
}
.ui-timepicker-rtl dl dd {
margin: 0 40% 10px 10px;
}
/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine {
padding-right: 2px;
}
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
.ui-timepicker-div.ui-timepicker-oneLine dt {
display: none;
}
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
display: block;
padding-top: 2px;
}
.ui-timepicker-div.ui-timepicker-oneLine dl {
text-align: center;
margin-bottom: 0;
}
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div {
display: inline-block;
margin: 0;
}
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before {
content: ':';
display: inline-block;
}
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before {
content: '.';
display: inline-block;
}
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before {
display: none;
}
#ui-datepicker-div {
width: 185px;
}
.ui-spinner a.ui-spinner-button {
display: inline-block;
top: -18px;
left: 12px;
padding: 2px 0px 2px 2px;
}
a.ui-spinner-button.ui-spinner-down.ui-corner-br.ui-button.ui-widget.ui-state-default.ui-button-text-only {
top: -18px;
left: 13px;
}
.ui-datepicker-header {
margin-top: 5px;
background: rgb(234, 234, 234);
height: 32px;
border-bottom: 1px solid black;
border-radius: 0;
}
.ui-datepicker-calendar .ui-state-default {
background: none;
border: none;
}
.ui-datepicker {
border-radius: 2mm;
}
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
top: 7px;
}
.ui-datepicker .ui-datepicker-title {
margin-top: 5px;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
background: linear-gradient(to bottom, rgba(155, 195, 255, 1) 0%, rgba(155, 195, 255, 1) 100%);
color: #000000;
}
.ui_tpicker_hour_slider>span,
.ui_tpicker_minute_slider>span {
height: 20px;
width: 30px;
}
.ui-timepicker-div dt,
.ui-timepicker-div dd {
display: inline-block;
}
.ui-timepicker-div>dl {
margin: 0;
}
.ui-timepicker-div dl dt {
float: inherit;
vertical-align: middle;
}
.ui-timepicker-div dl dd {
margin: 0;
}
.ui-timepicker-div {
margin-left: 17px;
margin-top: 7px;
}
Können Sie die Fidel Post ändern .. Es wäre einfach für mich. –
https://jsfiddle.net/adgptkvj/37/ – HelloWorld
Es werden Strings angezeigt, Sie können es mit '$ .each' durchlaufen und es in HTML-Tags einfügen. – HelloWorld