获取Javascript中的Devexpress Gridview排序方式和排序顺序

Get Devexpress Gridview Sort By and Sort Order in Javascript

本文关键字：排序 方式 顺序 Gridview Javascript 中的 Devexpress 获取      更新时间：2023-09-26

我正在MVC中实现Devexpress网格控制。我遇到了一个问题，需要当前的SortedBy列和javascript中的排序顺序（asc/desc）。我还尝试了客户端事件OnColumnSortingChanged（s，e），它只是在单击事件时提供列的名称，而不是来自gridview javascript对象。

经过研究得到了答案。。。

必须将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();
   });

我最近需要类似的东西，我想保存列顺序、排序顺序和筛选信息；使得用户可以创建网格的保存视图，而不必不断地重新输入所有这些偏好。

我发现在CustomJSProperties事件中，我可以与作为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

自定义JSP属性：

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

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

相关文章：