Question

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

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

我当前的colModel对我的'boolean'字段有一个类似的条目：

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

仅在用户输入'false'或'true'时才有效 - 再次，笨重。

对于其他一些专栏，我想使用下拉列表进行枚举，例如，我有一个'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，这可能是另外有趣的，因为它描述了如何使用外部复选框面板实现数据的快速过滤。

现在关于构建'Cones'列的选择。如果您有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' }
}

希望有所帮助！

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

2 个答案: