如何在jqgrid標題中包含組合框

Question

我在我的站點中使用jqgrid，我需要一個組合框，它從服務器動態保存值。

我試過但徒勞無功。我能夠獲得硬編碼值的下拉菜單。這個特定列的數據也是一個帶有動態值的組合框。我已經看到filtertoolbar幫助我，但應該只啓用此列，其中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

我想出解決我的問題

在loadComplete事件打算進軍初始化烏爾組合框plugin.This工作就像魅力

loadComplete：函數（）{

$（select）.combobox（）; }

Answer 2

添加到您的colmodel

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

，並添加一個字符串 colNames:[...,'myDropdown']