如何在 jqgrid 中包含组合框 header

Question

我在我的站点中使用 jqgrid，我需要 header 中的组合框，它从服务器动态保存值。

我试过了，但没有成功。我能够获得带有硬编码值的下拉菜单。此特定列的数据也是一个具有动态值的组合框。我看到 filttertoolbar 对我有帮助，但这应该只启用到这个列，因为 filterToolBar 将启用对所有现有列的搜索。我不想要这个功能。

这是我到目前为止尝试过的方法 (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;
}

Answer 1

将此添加到您的 colmodel

   ,{
  name:'Dropdown',
  formatter:function(value,options,rData){
    return rData.packageData;
  }

并添加一个字符串到 colNames:[...,'myDropdown']

Answer 2

我想出了我的问题的解决方案

在 loadComplete 事件中尝试初始化您的组合框 plugin.This 工作得很好

加载完成：函数（）{

$(select).combobox(); }

如何在 jqgrid 中包含组合框 header

How to include combobox in jqgrid header

jquery

combobox

header

jqgrid

free-jqgrid