从 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(Model)页面获取记录，或者创建一个action方法来获取所有记录，然后，使用JQuery Ajax方法调用该方法，获取网格数据。

To get records from the page model, in your Asp.net Core MVC application, you could use the Json.Serialize() method to convent the Model to JSON string first, then use JSON.parse() method convent the JSON string to JavaScript Object,然后循环通过 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.

截图如下：