排序/过滤属性在 Grid.Mvc 中不起作用

Posted 2023-03-27

【中文标题】排序/过滤属性在 Grid.Mvc 中不起作用

【英文标题】：Sorting/ Filtering attributes not working in Grid.Mvc

【发布时间】：2014-11-11 17:52:27

【问题描述】：

我的 Mvc Grid 的代码如下所示，但由于某种原因，可排序和可过滤属性无法按照 codePlex 文档中的说明工作。我正在使用 html5 和 bootstrap.css 在 .NET 4.5 中开发：

@Html.Grid(Model.Item2).Named("ViewEntries").Columns(columns =>
                    
                        columns.Add(c => c.entryName).Titled("Entry Name").Sortable(true).Filterable(true);
                        columns.Add(c => c.entryDate).Titled("Date").Sortable(true);
                        columns.Add(c => c.entryDetails).Titled("Details").Sortable(true);
                        columns.Add().Titled("Name1").RenderValueAs(c => Name1((int)c.name1)).Sortable(true).Filterable(true);
                        columns.Add().Titled("Name2").RenderValueAs(c => Name2((int)c.name2)).Sortable(true).Filterable(true);
                        columns.Add().Titled("Name3").RenderValueAs(c => Name3((int)c.name3)).Sortable(true).Filterable(true);
                    ).WithPaging(10)

任何帮助将不胜感激，谢谢。

【参考方案1】：

所以这不起作用的原因是 gridmvc.css 实际上并没有在布局文件中首先被引用。一旦我添加它，过滤就会在正常呈现的列上按预期工作。

现在我遇到的问题是让过滤器在通过 html 帮助程序呈现的列上工作，但这只需要对创建自定义可过滤小部件进行一些研究。谢谢大家的帮助=]

【讨论】：

嗨，我做到了，但为了做到这一点，我最终使用 html 助手报废了。相反，我只是稍微重新设计了我的数据库，并编写了更多查询来准确地将我想要的内容提取到每个模型中。这消除了使用 html 帮助程序的需要，因此我能够只使用 mvcgrid 提供的标准过滤器。希望这会有所帮助:)

感谢您的回复。我自己也得出了同样的结论并修改了我的视图模型。

【参考方案2】：

如下修改你的代码

@Html.Grid(Model.Item2).Named("ViewEntries").Columns(columns =>
                    
                        columns.Add(c => c.entryName).Titled("Entry Name").Sortable(true).Filterable(true);
                        columns.Add(c => c.entryDate).Titled("Date").Sortable(true);
                        columns.Add(c => c.entryDetails).Titled("Details").Sortable(true);
                        columns.Add().Titled("Name1").RenderValueAs(c => Name1((int)c.name1)).Sortable(true).Filterable(true);
                        columns.Add().Titled("Name2").RenderValueAs(c => Name2((int)c.name2)).Sortable(true).Filterable(true);
                        columns.Add().Titled("Name3").RenderValueAs(c => Name3((int)c.name3)).Sortable(true).Filterable(true);
                    ).WithPaging(10).Sortable(true).Filterable(true).WithMultipleFilters()

---

在谷歌浏览器中使用检查元素（选择网格标题栏并单击右键并使用检查元素）。如果它显示下图中的类，那么问题是由于css或js造成的。这意味着类名以“grid-”开头，检查是否在DOM中渲染了grid-filter-btn

【讨论】：

不幸的是，这仍然没有解决问题。所有列都不可过滤，使用 .RenderValueAs 的列也不可排序。还有其他建议吗？

你添加了gridmvc.css和gridmvc.js文件吗

是的，我已将这些添加到项目中

是否显示过滤按钮？请详细解释您的问题，（在谷歌浏览器中使用检查元素）

好的，所以过滤器按钮在网格上根本不可见。我已经尝试检查元素并且 grid-filter-btn 在 DOM 中呈现。我还尝试在检查元素时从网格中删除所有样式，但我也看不到任何样式下方的过滤器按钮或类似的东西。

【参考方案3】：

我的解决方案是添加：

<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />

到head部分

和

@Scripts.Render("~/Scripts/gridmvc.min.js") 

到正文部分

希望这对某人有所帮助

【参考方案4】：

过滤器未显示，因为您的项目中有 2 个 .css 文件

1) 网站.css

2) Gridmvc.css

在 site.css 中，这是 a:link 的样式，当您单击 Grid.MVC 的过滤器图标时会执行该样式。

您可以删除或注释此行，然后您可以看到过滤器正在工作

   th a
           
    display: block;
    position: relative;
    

    th a:link, th a:visited, th a:active, th a:hover
    
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    

    th a:hover
    
        color: #000;
    

【参考方案5】：

过滤器弹出窗口未显示，排序正常。当我在 _layout.cshtml "@RenderSection("scripts", required: false)" 中注释掉这一部分时，过滤起作用了。

【参考方案6】：

在我的情况下，过滤不起作用，因为我有样式冲突。当我删除@section 并仅使用@Styles（见下文）时，过滤开始起作用。

@* commented because of styles conflict
    @section styles
        @Styles.Render("~/Content/Gridmvc")
    *@

@Styles.Render("~/Content/Gridmvc")

@section scripts
    @Scripts.Render("~/bundles/Gridmvc")

我在 github 上附加了简化解决方案的链接： https://github.com/sam-klok/WebAppGrid