如何在jqgrid头文件中包含combobox

Question

我在我的网站中使用jqgrid，我需要在标题中使用一个组合框，它可以从服务器动态保存值。

我试过但是徒劳无功。我能够获得硬编码值的下拉列表。此特定列的数据也是具有动态值的组合框。我见过filtertoolbar帮助我，但是这应该仅启用此列，其中filterToolBar将启用搜索所有现有列。我不想要这个功能。

这是我到目前为止所尝试的内容（https://jsfiddle.net/adgptkvj/33/）。

HTML：

  NSString *string = [[NSString alloc]initWithData:data encoding:NSUTF8StringEncoding];

//pass data which you got from swipe as parameter

的javascript：

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

CSS：

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();

});

Answer 1

将此添加到您的colmodel

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

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

Answer 2

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

在loadComplete事件中尝试初始化你的组合框插件。这就像魅力一样

loadComplete：function（）{

$（选择）.combobox（）; }