从gridmvc获取所有数据，包括javascript中的所有分页？

Question

我正在尝试从gridmvc 获取数据并使用chart.js 显示图表，它工作正常，但问题是它只显示页面。因为我已经在网格中启用了分页，当我点击下一页时，下一个网格数据页面图表会显示，但我想显示完整网格数据的图表包括所有页面。

     <div class="panel-body">

            @await Html.Grid(Model).Columns(columns =>

       {

           columns.Add(c => c.ID).Titled("StudentID").Filterable(true);

           columns.Add(c => c.Name).Titled("Name").Filterable(true);

           columns.Add(c => c.Major).Titled("Major").Filterable(true);

           columns.Add(c => c.Minor).Titled("Minor").Filterable(true);
           columns.Add(c => c.Email).Titled("Email").Filterable(true);

           columns.Add(c => c.Address).Titled("Address").Filterable(true);
           columns.Add(c => c.GPA).Titled("GPA").Filterable(true);


       }).Searchable(true, false, true).WithPaging(10).ChangePageSize(true).Sortable(true).EmptyText("No data found").Named("GridSearch").RenderAsync()

        </div>

Javascript

               function LoadChart() {
              debugger;
              var chartType = parseInt($("#rblChartType input:checked").val());
              var items = $(".grid-mvc").find(".grid-table > tbody").children();
              var json = [];
              $.each(items, function (i, row) {

                  $col1=$(row).children()[0].innerText;
                  $col2 = $(row).children()[1].innerText;

                  $col3 =$(row).children()[2].innerText;

                  $col4 =$(row).children()[3].innerText;
                  $col5 =$(row).children()[4].innerText;

                  $col6 =$(row).children()[5].innerText;
                  $col7 =$(row).children()[6].innerText;

                  json.push({ 'StudentID': $col1, 'Name': $col2, 'Major': $col3, 'Minor': $col4, 'Email': $col5, 'Address': $col6, 'GPA': $col7      
              })     
     // Map JSON values back to label array
              var labels = json.map(function (e) {
                  return e.Name;
              });
              console.log(labels); // ["2016", "2017", "2018", "2019"]

              // Map JSON values back to values array
              var values = json.map(function (e) {
                  return e.GPA;
              });
              var chart=BuildChart(labels, values, "Students Name by GPA");

我想在gridmvc 中显示包含完整数据的图表，而不仅仅是在当前页面上。

Answer 1

但问题是它只显示页面。因为我启用了 在网格中分页，当我单击下一页时，然后单击下一个网格数据页 图表显示，但我想显示完整网格数据的图表包括 所有页面。

   var items = $(".grid-mvc").find(".grid-table > tbody").children();
              var json = [];
              $.each(items, function (i, row) {

                  $col1=$(row).children()[0].innerText;
                  $col2 = $(row).children()[1].innerText;

                  $col3 =$(row).children()[2].innerText;

                  $col4 =$(row).children()[3].innerText;
                  $col5 =$(row).children()[4].innerText;

                  $col6 =$(row).children()[5].innerText;
                  $col7 =$(row).children()[6].innerText;

                  json.push({ 'StudentID': $col1, 'Name': $col2, 'Major': $col3, 'Minor': $col4, 'Email': $col5, 'Address': $col6, 'GPA': $col7      
              })     

问题与上述脚本有关，由于你实现了分页，所以在使用上述代码获取表资源时，它只获取当前页面记录，然后显示页面图。

为了解决这个问题，你可以从页面模型（Model）中获取记录，或者创建一个action方法来获取所有记录，然后使用JQuery Ajax方法调用该方法获取网格数据。

要从页面模型中获取记录，在您的 Asp.net Core MVC 应用程序中，您可以先使用 Json.Serialize() 方法将模型转换为 JSON 字符串，然后使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象，然后循环遍历 Object 并获取所有数据。

这样的代码（Index.cshtml）

@model List<StudentViewModel>
@section Scripts{
    <script>
        $(function () {
            LoadChart();
        });

        function LoadChart() {
            debugger;
            //var chartType = parseInt($("#rblChartType input:checked").val());
            //var items = $(".grid-mvc").find(".grid-table > tbody").children();
            var json = [];
            var items = JSON.parse('@Json.Serialize(Model)');
            $.each(items, function (index, item) {
                json.push({ 'StudentID': item.id, 'Name': item.name, 'Major': item.major, 'Major': item.major, 'Email': item.email, 'Address': item.address, 'GPA': item.gpa });
            });

            //show graphs based on the json array.

截图如下：