So zeigen Sie die Summe der Spalten an Grid.Mvc Liste

Question

Ich bin neu auf asp.net und versuche, die Prinzipien von mvc zu verstehen. Ich habe eine Grid.MVC basierte Liste, die es mir erlaubt, eine sortierbare, filterbare, seitenweise Liste zu erstellen.

Mein Problem ist, ich möchte Fußzeile für meine Spalten hinzufügen, um die Summe der Werte in der Spalte anzuzeigen. Ich habe die Dokumentation von Grid.Mvc untersucht, konnte aber trotzdem nichts finden.

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> 

Dies ist meine Ansicht, sehr einfach, denke ich. Zum Beispiel muss ich die Mitarbeiter nach ihren Abteilungen und Jobs filtern, ich kann das bis zu diesem Punkt machen, aber ich muss auch die Summe ihrer Gehälter am Ende der Gehaltsspalte sehen. Aber nicht alle persönlichen, nur die Mitarbeiter, die ich gefiltert habe, also meine ich Mitarbeiter auf der Liste nach dem Filtern.

Grid.MVC hat ein Beispielprojekt sehr ähnlich wie diese here

Ich denke, es ist ein Weg, vielleicht haben sie in ihrem Code angegeben haben, aber ich weiß nicht, wo.

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

Vielen Dank für jede Hilfe!

Answer 1

Jede Tabellenzeile (<tr> Element) in einer Grid.MVC Tabelle hat eine Klasse namens grid-row.

Sie können eine jQuery-Funktion schreiben, um alle <tr class="grid-row"> auf der Seite durchlaufen -> finden Sie die Gehaltsspalte und fügen Sie die Werte zusammen.

Controller:

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 }); 
    } 
} 

Ausblick:

@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> 

Ausgang: