在.jqGrid中的过滤条旁边设置图像
问题描述：
我想在特定列上设置图像，但是当我使用formatter设置时，我没有得到预期的结果。图像是压倒一切的数据。在.jqGrid中的过滤条旁边设置图像
$(function() {
"use strict";
$("#myDialogBox").dialog({
autoOpen: false
});
$("#grid").jqGrid({
colModel: [
{ name: "BatchID", label: "Batch ID", align: "center"},
{ name: "Status", label: "Status", align: "center", formatter: "select",
formatoptions: { value: "CAN:Canceled; COM:Completed; PEN:Pending", defaultValue: "PEN" },
stype: "select", searchoptions: { value: ":Pending;CAN:Canceled; COM:Completed"} },
{ name: "StartRunDate", label: "Start Run Date", align: "center", sorttype:"date",
formatter: function() { return "<img src='http://jqueryui.com/resources/demos/datepicker/images/calendar.gif' alt='calendar' />"; },
formatoptions: { newformat: "d-M-Y" } },
{ name: "StartRunTime", label: "Start Run Time", align: "center", sorttype:"time", formatter: "time" },
{ name: "EndRunDate", label: "End Run Date", align: "center", editable:true, sorttype:"date" },
{ name: "EndRunTime", label: "End RunTime", align: "center", editable:true, sorttype:"time" },
{ name: "Action", label: "Action", align: "center", formatter: "showlink"},
{ name: "JobID", label: "Job ID", align: "center" },
{ name: "JobName", label: "Job Name", align: "center"},
{ name: "ConceptName", label: "Concept Name", align: "center" },
{ name: "StartDate", label: "Start Date", align: "center" },
{ name: "EndDate", label: "End Date", align: "center" },
{ name: "Frequency", label: "Frequency", align: "center",
\t formatter: "select",
formatoptions: { value: "ALL:All; DAI:Daily; WEK:Weekly", defaultValue: "ALL" },
stype: "select",
searchoptions: { value: ":All; DAI:Daily; WEK:Weekly" } },
{ name: "QueryLink", label: "Query Link", align: "center",
formatter: function() { return '<button class="popup-trigger">Pop Up</button>' } },
{ name: "Submitter", label: "Submitter", align: "center"}
],
data: [
{ BatchID: "1", Status: "Pending", StartRunDate: "7/12/2017", StartRunTime:"12:00", EndRunDate: "7/12/2017",
EndRunTime:"1:00", Action: "Cancel Delivery", JobID: "123", JobName: "Test", ConceptName: "CPK", StartDate: "7/12/2017", EndDate: "7/12/2017", Frequency: "All", QueryLink: "Link", Submitter: "John Doe"
}],
iconSet: "fontAwesome",
rownumbers: true,
sortname: "invdate",
sortorder: "desc",
caption: ".jqGrid Test"
}).jqGrid('filterToolbar', {autoSearch: true}).on('click', '.popup-trigger', function() {
$("#myDialogBox").dialog("open");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>
<table id="grid"></table>
<div id="myDialogBox" title="Basic dialog"></div>预期的结果：想要日历旁边x图标。
缺少什么我在这里？这里有什么.jqGrid限制？
答
我不确定我是否正确理解您的要求。下面你可以找到你的代码的修改与在StartRunDatecolModel一些变化和小的额外CSS规则
$(function() {
"use strict";
$("#myDialogBox").dialog({
autoOpen: false
});
$("#grid").jqGrid({
colModel: [
{ name: "BatchID", label: "Batch ID", align: "center"},
{ name: "Status", label: "Status", align: "center", formatter: "select",
formatoptions: { value: "CAN:Canceled; COM:Completed; PEN:Pending", defaultValue: "PEN" },
stype: "select", searchoptions: { value: ":Pending;CAN:Canceled; COM:Completed"} },
{ name: "StartRunDate", label: "Start Run Date", align: "center", sorttype:"date",
formatter: function (cellval, opions, rawdata, act) {
return $.fn.fmatter.call(this, "date", cellval, opions, rawdata, act) +
" <img src='https://jqueryui.com/resources/demos/datepicker/images/calendar.gif' alt='calendar' style='display:inline-block;vertical-align: middle;' />"; },
formatoptions: { srcformat: "m/d/Y" },
searchoptions: {
sopt: ["eq", "ne", "lt", "le", "gt", "ge"],
attr: {
placeholder: "m/d/yyyy",
style: "width: 110px; display: inline-block;"
},
dataInit: function (elem, options) {
$(elem).datepicker({
showOn: "button",
buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true
});
}
} },
{ name: "StartRunTime", label: "Start Run Time", align: "center", sorttype:"time", formatter: "time" },
{ name: "EndRunDate", label: "End Run Date", align: "center", editable:true, sorttype:"date" },
{ name: "EndRunTime", label: "End RunTime", align: "center", editable:true, sorttype:"time" },
{ name: "Action", label: "Action", align: "center", formatter: "showlink"},
{ name: "JobID", label: "Job ID", align: "center" },
{ name: "JobName", label: "Job Name", align: "center"},
{ name: "ConceptName", label: "Concept Name", align: "center" },
{ name: "StartDate", label: "Start Date", align: "center" },
{ name: "EndDate", label: "End Date", align: "center" },
{ name: "Frequency", label: "Frequency", align: "center",
\t formatter: "select",
formatoptions: { value: "ALL:All; DAI:Daily; WEK:Weekly", defaultValue: "ALL" },
stype: "select",
searchoptions: { value: ":All; DAI:Daily; WEK:Weekly" } },
{ name: "QueryLink", label: "Query Link", align: "center",
formatter: function() { return '<button class="popup-trigger">Pop Up</button>' } },
{ name: "Submitter", label: "Submitter", align: "center"}
],
data: [
{ BatchID: "1", Status: "Pending", StartRunDate: "7/12/2017", StartRunTime:"12:00", EndRunDate: "7/12/2017",
EndRunTime:"1:00", Action: "Cancel Delivery", JobID: "123", JobName: "Test", ConceptName: "CPK", StartDate: "7/12/2017", EndDate: "7/12/2017", Frequency: "All", QueryLink: "Link", Submitter: "John Doe"
}],
iconSet: "fontAwesome",
rownumbers: true,
sortname: "invdate",
sortorder: "desc",
caption: ".jqGrid Test"
}).jqGrid('filterToolbar', {autoSearch: true}).on('click', '.popup-trigger', function() {
$("#myDialogBox").dialog("open");
});
});.ui-search-input img.ui-datepicker-trigger {
display: inline-block;
vertical-align: middle;
margin-bottom: 1px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>
<table id="grid"></table>
<div id="myDialogBox" title="Basic dialog"></div>
我不知道，我明白你的问题。当前代码格式化输入数据'“7/12/2017”'作为图标。如果您在“StartRunDate”列的过滤器工具栏中输入字符串“7/12/2017”，则会获得按值过滤的数据：一行。如果您在过滤器工具栏中输入任何其他值为'7/12/2017'（例如'8/12/2017'），然后按Enter键，则不会显示任何行。 – Oleg
@ Oleg抱歉的混淆。我希望图标所在的'x'和'7/12/2017'旁边有'日历'图标。搜索很好。我在设置滤镜栏旁边的图标时遇到问题。我现在正在做的是用我不想要的图像取代“2017年7月12日”。 – CSharper