列的 jqGrid 布尔或枚举下拉过滤

Question

我正在使用 jqGrid 在我的第一个 ASP.NET MVC 3 上显示表格数据，发现它非常有用，尤其是过滤数据。对于字符串类型，我使用带有“包含”的列过滤，这对于剔除字符串非常有效。对于日期数据，我使用日期选择器。太好了。

现在我有几列（例如，“包含坚果”），它们本质上是布尔值。我想提供一种过滤这些的方法。现在它们显示为“true”和“false”，并使用与我的字符串类型列相同的基于字符串的过滤。这有点笨拙。我想我想做的是有一种方法可以通过下拉机制选择三个值（真/假/两者）之一。

我当前的 colModel 对我的“布尔”字段有一个类似的条目：

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

仅当用户输入“false”或“true”时才有效——同样，很笨重。

对于其他一些列，我想使用下拉列表进行枚举，例如，我有一个“锥体”列，因为有很多行并且我对结果进行分页 - 使用自动完整文本过滤有点成功-or-miss 让用户找到所有可能的值。希望这是有道理的。

所以我尝试过的是 - 我创建了一个如下所示的控制器操作：

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

这行代码显示了一个 True,False 下拉列表，用于显示具有 true、false 值的列：

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

希望有帮助！