如何将我选择的GridView行放入Javascript变量中？

Question

我使用ASP.NET C# MVC3和Razor模板，以下是我想了解的内容:

我有一个DevExpress的GridView, 我可以在其中选择行。当选择时，我希望将它们传递到JavaScript变量中。如何实现这个功能？如果我同时选择了多行，我能否将它们放入数组或其他形式的数据结构中？

编辑: 感谢评论，我现在有了以下“JQuery”函数：

$(function () { // Verwijder functie
    $('#select').click(function () {
        var Delete = confirm("Weet u zeker dat u de geselecteerde records wilt verwijderen?");
        if (Delete) {
            //Verwijder Funtie
            var test = ;
            alert(test);
        } else {
            //Niks
        }
    });
});

我需要将选定行的Id存入变量“test”中，我尝试使用GetSelectedFieldValuesCallback和GetSelectedFieldValues，但这并不符合我的预期。 如果有人能提供一些示例，我会非常感激。

- MrSlippyFist

Answer 1

在网格的一项最基本操作上，缺乏惊人的示例。尤其是如果你想将行发送回服务器进行进一步处理。

grid.GetSelectedFieldValues() 的问题在于它会生成一个 postback。这意味着你需要第二个 postback 才能真正将数据发送回服务器。

我能够实现的最优雅的解决方案是使用 grid.GetSelectedKeysOnPage()。这将返回通过 settings.KeyFieldName = "Id" 定义的选定键字段。

即将显示网格的视图。

<script type="text/javascript">
    $(function () {
        $('#btn1').click(function () {
            simpleGrid.PerformCallback();
        });
    });
    function OnBeginCallback(s, e) {
        var selectedValues = s.GetSelectedKeysOnPage();
        e.customArgs["Id"] = "";
        for (var i = 0; i < selectedValues.length; i++) {
            e.customArgs["Id"] += selectedValues[i] + ',';
        }
    }
</script>
@Html.Partial("ProductsPartial", Model.Data)
<div id="btn1">
    btn
</div>

很重要的一点是在单独的部分视图中创建网格（不知道为什么，但这是devexpress页面上说的）。

"ProductsPartial" 部分视图：

@Html.DevExpress().GridView(
        settings =>
        {
            settings.Name = "simpleGrid";
            settings.KeyFieldName = "Id";
            settings.CallbackRouteValues = new { Controller = "yourController", Action = "Postback" };
            settings.SettingsText.Title = "simpleGridWithPostback";
            settings.Settings.ShowTitlePanel = true;
            settings.Settings.ShowStatusBar = GridViewStatusBarMode.Visible;
            settings.SettingsPager.Mode = GridViewPagerMode.ShowAllRecords;
            settings.SettingsPager.AllButton.Text = "All";
            settings.SettingsPager.NextPageButton.Text = "Next >";
            settings.SettingsPager.PrevPageButton.Text = "< Prev";
            settings.Width = new System.Web.UI.WebControls.Unit(200);
            settings.Columns.Add("Id");
            settings.Columns.Add("Name");
            settings.CommandColumn.Visible = true;
            settings.CommandColumn.ShowSelectCheckbox = true;
            settings.ClientSideEvents.BeginCallback = "OnBeginCallback";
        }).Bind(Model).GetHtml()

最后是控制器，你可以在其中处理数据

public ActionResult Postback()
{
    String data = Request["Id"];
}

这样你就可以在服务器端处理所有你想要的数据。

- Draxler

---

我不完全同意你的解决方案。因为根据GetSelectedFieldsOnPage和我的使用经验，该函数仅选择当前页面已选中的行。例如，如果您的网格以pageSize标记显示15页记录，则仅可获取第一页选定的行。如果您需要获取所有页面上的选定行，则需要使用该函数GetSelectedFieldValues。 - Vikram Singh Saini

Answer 2

我找到了解决方案。以下函数提供了我想要的数据：

$(function () {
    $('#select').click(function () {
        Index.GetSelectedFieldValues("Id", OnGetSelectedFieldValues);
    });
});

function OnGetSelectedFieldValues(result) {
    for (var i = 0; i < result.length; i++){
            alert(result[i]);
        }
}

针对与此问题相同的用户。

更改中的"Index"

Index.GetSelectedFieldValues("Id", OnGetSelectedFieldValues); 

将下面代码中的"gridview_name"替换为你所命名的GridView，同时将"Id"替换为你想要获取的列。

如果你想从单行中获取多个数据，可以在function OnGetSelectedFieldValues(result)中添加另一个for循环，如下所示：

function OnGetSelectedFieldValues(result) {
    for (var i = 0; i < result.length; i++)
        for (var j = 0; j < result[i].length; j++) 
            alert(result[i][j]);
        }
}

你还需要更改getter，如下所示：Index.GetSelectedFieldValues("Id;其他列名", OnGetSelectedFieldValues);希望这能对其他用户在将来有所帮助。

- MrSlippyFist