如何显示列 Grid.Mvc 列表的总和

Question

我是 asp.net 的新手，正在尝试了解 mvc 原理。我有一个基于 Grid.MVC 的列表，它允许我创建一个可排序、可过滤、分页的列表。

我的问题是，我想为列添加页脚以显示列值的总和。我检查了 Grid.Mvc 的文档，但无论如何我都找不到。

model IEnumerable<Finalizor.Models.Server>


@using GridMvc.Html
@{
    ViewBag.Title = "Index";
}
@{
    Layout = null;
}

<h2>Index</h2>

<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>

<div class="code-cut">
    @Html.Grid(Model).Columns(columns =>
                    {
                        columns.Add(c => c.Name).Titled("Name").Filterable(true);
                        columns.Add(c => c.Surname).Titled("Surname").Filterable(true);
                        columns.Add(c => c.Job).Titled("Job").Filterable(true);
                        columns.Add(c => c.Salary).Titled("Salary").Filterable(true);
                        columns.Add(c => c.Department).Titled("Department").Filterable(true);
                        columns.Add()
                        .Encoded(false)
                        .Sanitized(false)
                        .SetWidth(30)
                        .RenderValueAs(o => Html.ActionLink("Edit", "Edit", new { id = o.PersonalID }));

                    }).WithPaging(10).Sortable(true).WithGridItemsCount("Total Personal")
</div>

这是我的看法，我觉得很简单。例如，我需要根据他们的部门和工作过滤员工，我可以做到这一点，但我还必须在工资列的末尾看到他们的工资总和。但不是所有的个人，只有我过滤的员工，所以我是指过滤后名单上的员工。

Grid.MVC 有一个示例项目，非常像 here

我认为他们可能已经在他们的代码中指定了一种方法，但我不知道在哪里。

https://github.com/leniel/Grid.Mvc/blob/master/GridMvc

感谢您的帮助！

Answer 1

Grid.MVC 表中的每个表行（<tr> 元素）都附加了一个名为 grid-row 的类。

您可以编写一个 jQuery 函数来遍历页面上的每个 <tr class="grid-row"> -> 找到薪水列并将值相加。

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var s1 = new Server { PersonalID = 1, Name = "Name 1", Surname = "Surname 1", Department = "IT", Job = "Dev", Salary = 10.00M };
        var s2 = new Server { PersonalID = 1, Name = "Name 2", Surname = "Surname 2", Department = "IT", Job = "Dev", Salary = 10.00M };
        var s3 = new Server { PersonalID = 1, Name = "Name 3", Surname = "Surname 3", Department = "IT", Job = "Dev", Salary = 10.00M };
        var s4 = new Server { PersonalID = 1, Name = "Name 4", Surname = "Surname 4", Department = "IT", Job = "Dev", Salary = 2.10M };
        var s5 = new Server { PersonalID = 1, Name = "Name 5", Surname = "Surname 5", Department = "IT", Job = "Dev", Salary = 2.20M };
        var s6 = new Server { PersonalID = 1, Name = "Name 6", Surname = "Surname 6", Department = "IT", Job = "Dev", Salary = 2.33M };
        return View(new List<Server> { s1, s2, s3, s4, s5, s6 });
    }
}

查看：

@using GridMvc.Html
@model IEnumerable<MVC_WebGrid_example.Models.Server>

@{
    Layout = null;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        var salary = 0.00;

        $("tr.grid-row").each(function () {
            var tr = $(this);
            var rows = $(tr).children();
            var amount = rows[3].innerHTML;
            amount = amount.replace(",", ".");
            amount = parseFloat(amount);

            salary += amount;
        });

        salary = salary.toFixed(2);
        var trTotals = "<tr><td></td><td></td><td></td><td style='color:red;font-weight:bold;'>" + salary + "</td><td></td><td></td></tr>"
        $("tr.grid-row:last").after(trTotals);

        $("#salaryTotal").text("Salary total is - " + salary);

    });
</script>
<div class="code-cut">
    @Html.Grid(Model).Columns(columns =>
                    {
                        columns.Add(c => c.Name).Titled("Name").Filterable(true);
                        columns.Add(c => c.Surname).Titled("Surname").Filterable(true);
                        columns.Add(c => c.Job).Titled("Job").Filterable(true);
                        columns.Add(c => c.Salary).Titled("Salary").Filterable(true);
                        columns.Add(c => c.Department).Titled("Department").Filterable(true);
                        columns.Add()
                        .Encoded(false)
                        .Sanitized(false)
                        .SetWidth(30)
                        .RenderValueAs(o => Html.ActionLink("Edit", "Edit", new { id = o.PersonalID }));
                    }).WithPaging(3).Sortable(true).WithGridItemsCount("Total Personal")
</div>
<h1 id="salaryTotal" style="color:red;"></h1>

输出：