3

我应该向 Ajax WebGrid 添加排序顺序图标。以下方法有效：

grid.Column("Name", string.Format("Name {0}", grid.SortColumn == "Name" ? grid.SortDirection == SortDirection.Ascending ? "▼" : "▲" : "")

但应该适用于每一列。

是否有任何其他方法可以将排序指标仅添加到一个位置的排序列？比如在grid.GetHtml()之后修改网格。

4

2 回答 2

1

您已经找到了使用 WebGrid API 的唯一方法。但是，您可以在事后使用 jQuery 应用排序箭头。您可以使用隐藏字段来存储WebGrid.SortDirection和WebGrid.SortColumn值。然后，您可以使用该ajaxUpdateCallback参数指定在异步更新网格后调用的函数，并在该方法中，根据隐藏字段值设置箭头：

function setArrows() {
    var dir = $('#dir').val(); //hidden field value
    var col = $('#col').val(); //hidden field value
    var header = $('th a[href*=' + col + ']');
    if (dir == 'Ascending') {
        header.text(header.text() + ' ▲');
    }
    if (dir == 'Descending') {
        header.text(header.text() + ' ▼');
    }
};

我刚刚写了一篇关于这个的文章。

于 2012-12-17T11:10:08.280 回答
0

我发现这段代码很方便。您只需将其放在 grid.GetHtml 之后：

@{
   if(!string.IsNullOrWhiteSpace(grid.SortColumn))
   {
    <script type="text/javascript">
     $('thead > tr > th > a[href*="sort=@grid.SortColumn"]').parent().append('@(grid.SortDirection == SortDirection.Ascending ? "▲" : "▼")');
     </script>
   }
}

http://shahvaibhav.com/how-to-add-up-down-arrows-to-webgrid-header-in-razor-mvc-or-sort-indicator-in-webgrid-razor/

于 2017-03-23T04:31:51.160 回答