在 Javascript 中获取 Devexpress Gridview 排序依据和排序顺序答案

【问题标题】：Get Devexpress Gridview Sort By and Sort Order in Javascript在 Javascript 中获取 Devexpress Gridview 排序依据和排序顺序
【发布时间】：2014-10-29 10:04:05
【问题描述】：

我正在 MVC 中实现 Devexpress 网格控制。我被困在我需要当前 Sorted By 列和 Sort Order (asc/desc) 的点上。我还尝试了客户端事件 OnColumnSortingChanged(s , e) ，它仅在单击事件时提供列的名称，而不是来自 gridview javascript 对象。

【问题讨论】：

标签： javascript jquery gridview devexpress-mvc

【解决方案1】：

经过研究得到答案...

必须将 CustomJsProperty 添加到部分视图中的控件，如下所示

settings.CustomJSProperties = (s, e) =>
    {
        var Grid = s as MVCxGridView;
        var result = new System.Collections.Hashtable();
        foreach (var col in Grid.AllColumns)
        {
            var dataCol = col as GridViewDataColumn;
            if (dataCol != null)
            {
                if (dataCol.SortIndex == 0)
                {
                    e.Properties["cpColumnsProp"] = new Dictionary<string, object>()
                    {
                        { "sortcolumn", dataCol.FieldName },
                        { "sortorder", ((Convert.ToString(dataCol.SortOrder).Equals("Ascending")) ? "asc" : "desc")}
                    };
                }
            }
        }
    };

如下处理 ColumnSortingChange 事件

function gvChartList_OnColumnSortingChanged(s, e) {
        $("#hdsortname").val(e.column.fieldName); // contains the sort column name
        $("#hdsortorder").val(((s.cpColumnsProp.sortcolumn == e.column.fieldName) ? "desc" : "asc")); // contains the sort column order
    }

最后但并非最不重要的一点是，必须为列定义默认排序索引和排序顺序

settings.Columns.Add(col =>
    {
    // column details
        col.SortIndex = 0;
        col.SortAscending();

   });

【讨论】：

【解决方案2】：

我最近需要类似的，我想保存列顺序、排序顺序和过滤器信息；这样用户就可以创建已保存的网格视图，而不必不断重新输入所有这些首选项。

我发现在 CustomJSPropeties 事件中，我可以与作为 ASPxGridView 的发送者进行交互，这样我就可以从 ASPxGridView.SaveClientLayout() 中获取所需的值。此处也有用的是 FilterExpression 和 VisibileRowCount - 如果您想使用过滤器表达式进行导出，但前提是 VisibleRowCount 小于某个阈值（这是显示在页面底部区域中的行数）

    settings.CustomJSProperties = (s, e) =>
    {
        ASPxGridView gridView = (ASPxGridView)s;
        e.Properties["cpGridFilterExpression"] = gridView.FilterExpression; //Make Filter Expressions Availabe to JavaScript
        e.Properties["cpVisibleRowCount"] = gridView.VisibleRowCount; //Make Visible Row Count Availabe to JavaScript
        e.Properties["cpLayout"] = gridView.SaveClientLayout(); //Get Layout String and make it available to JavaScript
    };

那么这有什么作用呢？此事件中定义的属性可用作 javascript 网格视图对象的属性。所以在这里我们尽可能地获取这些值，并将它们放在我们通常无法访问它们的地方。

然后，我们现在可以直接从 JavaScript 访问 GridView.cpLayout（其中 GridView 是提供给您的网格的名称/ID。）

<script type="text/javascript">
    $(document).ready(function () {
        $('#saveButton').click(
            function () {
                var layout = GridView.cpLayout;
                //Perform Save...
            }
        );
    });
</script>

需要明确的是，这个“布局”包含排序顺序、可见列信息和过滤器信息。

布局：

https://documentation.devexpress.com/#AspNet/CustomDocument4342

https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_SaveClientLayouttopic

CustomJSProperties：

https://documentation.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_CustomJSPropertiestopic

注意：我在此处添加此解决方案，因为这是我在搜索问题时发现的。可以看出，这些是在 CustomJSProperties 事件处理程序中访问 AspxGridView（基础）或 MVCGridView 的类似主题。

【讨论】：