如何显示列的和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有一个非常类似于这里的示例项目

我认为有一种方式，也许他们已经指定了他们的代码，但我不知道在哪里。

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

谢谢你的帮助！

Answer 1

<tr>表中的每个表行( Grid.MVC元素)都附加了一个名为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>

输出：

​

​