列jqGrid布爾值或枚舉下拉列表篩選

Question

我使用jqGrid在我的第一個ASP.NET MVC 3上顯示錶格數據，並發現它真的很有用，特別是篩選數據。對於字符串類型，我使用帶有「contains」的列過濾功能，並且非常適合剔除字符串。對於日期數據，我使用日期選擇器。大。

現在我有幾列（例如「包含堅果」），它們本質上是布爾值。我想提供一種方法來過濾這些。現在他們顯示爲「true」和「false」，並使用我的字符串類型列使用的相同的基於字符串的過濾。這有點笨重。我認爲我想要做的就是通過下拉機制選擇三個值之一（true/false/both）。

我現在colModel有像這樣爲我的「布爾」字段中輸入：

{ name: 'ContainsNuts', 
    index: 'ContainsNuts', 
    align: 'left', 
    searchoptions: { sopt: ['eq, 'ne']} 
} 

這隻能當用戶鍵入「假」或「真」 - 再次，笨重。

對於其他一些列，我想用枚舉的下拉列表，例如，我有一個'Cones'列，因爲有很多行並且頁面結果 - 使用自動完成文本過濾有點命中或者未命中以供用戶找到所有可能的值。希望這是有道理的。

所以我已經試過是這樣的 - 我創建了一個控制器動作，看起來像這樣：

public JsonResult AvailableCones() 
{ 
    var context = new IceCreamEntities(); 
    var query = context.Cones.AsQueryable().Distinct(); 
    List<string> all = query.Select(m => m.Name).ToList(); 
    return Json(all, JsonRequestBehavior.AllowGet); 
} 

而且我做了這樣的事[也許令人費解的做法]創建在過濾對話框中下拉選擇我的文檔中的錐準備：

... 

createSearchSelection = function (someValues) { 
    var outputValues = ""; 
    if (someValues && someValues.length) { 
     for (var i = 0, j = someValues.length; i < j; ++i) { 
     var entry = someValues[i]; 
     if (outputValues.length > 0) { 
      outputValues += ";"; 
     } 
     outputValues += entry + ":" + entry; 
     } 
    } 
    return outputValues; 
} 

setTheSearchSelections = function (colName, url){ 
    $('#icecreamgrid').jqGrid('setColProp', colName, 
     { 
     stype: 'select', 
     searchoptions: { 
      value: createSearchSelection(url), 
      sopt: ['eq'] 
     } 
     }); 
} 

gotData = function(data) { 
    setTheSearchSelections('ConeType', data); 
} 

var url = "/IceCream/AvailableConeTypes"; 
$.get(url, null, gotData); 

的結果是，我獲得在搜索對話框中ConeType列下拉和正確的行列顯示出來。大。這很酷，它的工作。

然而，我不知道該怎麼做，就是讓下拉列表顯示在我的列標題過濾器中，就像現在在過濾器對話框中顯示的那樣。我怎樣才能增加我必須做的事情？其次，我怎樣才能讓我有工作的布爾值？

Answer 1

你的問題的第一部分是顯示和過濾布爾值。我使用複選框來顯示這些值。在你的情況不同，我通常有很多這樣的列。爲了減少JSON數據的大小，我使用「1」和「0」而不是"true"和"false"。接下來我使用以下列設置

formatter: 'checkbox', align: 'center', width: 20, 
edittype: 'checkbox', editoptions: { value: "1:0" }, 
stype: "select", searchoptions: { sopt: ['eq', 'ne'], value: "1:Yes;0:No" 

因此對於搜索用戶必須在選擇框中選擇「是」或「否」。因爲我有很多這樣的列我一個，我包括在項目的每個頁面上的JavaScript文件中定義templateCeckbox對象：

my.templateCeckbox = { 
    formatter: 'checkbox', align: 'center', width: 20, 
    edittype: 'checkbox', editoptions: { value: "1:0" }, 
    stype: "select", searchoptions: { sopt: ['eq', 'ne'], value: "1:Ja;0:Nein" } 
}; 

然後典型列定義是

{ 
    name: 'IsInBasis', index: 'InBasis', template: my.templateCeckbox, 
    cellattr: function() { return ' title="TS-Basis"'; } 
}, 

（見the answer詳細信息關於列模板）。如果顯示的工具提示是懸停在複選框將是靠近列標題的文本時，我發現也很實用。所以我使用cellattr屬性。如果複選框有很多列，它會提高可用性。

爲了能夠顯示許多與chechboxes列我使用個人垂直列標題。我建議您閱讀the old answer，這可能會讓人感興趣，因爲它描述瞭如何實現對外部複選框面板快速過濾數據。

現在關於'錐'列的選擇的建設。如果您有AvailableCones操作，它提供可能的選項列表（如字符串數組（列表）），則應使用dataUrl:'/IceCream/AvailableConeTypes'而不是value: createSearchSelection(url)作爲searchoptions。您只需添加我在the answer的「更新」部分中描述的buildSelect函數。

{ 
    name: 'ConeType', width: 117, index: 'ConeType', editable: true, align: 'center', 
    edittype: 'select', stype: 'select', 
    editoptions: { 
     dataUrl: urlBase + '/AvailableConeTypes', 
     buildSelect: my.buildSelect 
    }, 
    searchoptions: { 
     dataUrl: urlBase + '/AvailableConeTypes', 
     buildSelect: my.buildSelect 
    } 
} 

其中

my.buildSelect = function(data) { 
    var response = jQuery.parseJSON(data.responseText), 
     s = '<select>', i, l, ri; 

    if (response && response.length) { 
     for (i=0, l=response.length; i<l; i += 1) { 
      ri = response[i]; 
      s += '<option value="' + ri + '">' + ri + '</option>'; 
     } 
    } 
    return s + '</select>'; 
}; 

Answer 2

這行代碼顯示了列真，假下拉列表有真，假值：

{ 
name: 'SReqdFlag', index: 'SReqdFlag', editable: true, edittype: 'select', editoptions: { value: '"":Select;true:True;false:False' } 
} 

希望幫助！