在.jqGrid中的过滤器栏旁边设置图像

Question

我想在特定列上设置图像，但是当我使用formatter设置它时，我没有得到预期的结果。图像覆盖数据。

＆＃13;

＆＃13;

$(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",
     	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");
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

预期结果：想要x旁边的日历图标。

我在这里缺少什么？这里有.jqGrid限制吗？

Answer 1

我不确定我是否正确理解了你想要的东西。您可以在下面找到colModel StartRunDate $(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) + "&nbsp;<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", 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"); }); });中的一些更改以及其他小规则

的代码修改

＆＃13;

＆＃13;

.ui-search-input img.ui-datepicker-trigger {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 1px;
}

＆＃13;

<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>

＆＃13;

+----+--------+----------+--------+--------------+
| id | name   | pet      | city   | date_adopted |
+----+--------+----------+--------+--------------+
|  1 | jane   | cat      | Boston | 2017-07-11   |
|  2 | jane   | dog      | Boston | 2017-07-11   |
|  3 | jane   | cat      | Boston | 2017-06-11   |
|  4 | jack   | cat      | Boston | 2016-07-11   |
|  5 | jim    | snake    | Boston | 2017-07-11   |
|  6 | jim    | goldfish | Boston | 2017-07-11   |
|  7 | joseph | cat      | NYC    | 2016-07-11   |
|  8 | sam    | cat      | NYC    | 2017-07-11   |
|  9 | drew   | dog      | NYC    | 2016-07-11   |
+----+--------+----------+--------+--------------+

＆＃13;

＆＃13;

＆＃13;