Question

我正在研究MVC 5应用程序。我停留在其中有一个下拉列表和一个网格（Gijgo-grid）的视图上。根据下拉菜单的选定值填充网格。当我第一次从下拉列表中选择一个选项时，将填充网格。但是，当我在下拉菜单中更改选择时，网格数据不会更改。

在下拉列表的更改事件中，我正在使用ajax来调用控制器中的函数以获取网格数据。

cshtml页面

<div>
      <table id="gridmvc"></table>
</div>

<script>
$(document).ready(function(){
  $("#DropDownID").change(function(){
      $.ajax({
         type: 'POST',
         url : '/Test/GetGrid',
         data: {selectedID: this.value},
         success: function(data){
            grid = $('#gridmvc').grid({
                 primaryKey: 'DeliveryID',
                 dataSource: data,
                 columns: [
                      {field: 'DeliveryID'},
                      {field: 'ProductName', sortable: true},
                      {field: 'Amount', sortable: true}
                 ],
                 pager:{limit: 5}
            });
         },
         error: function(){alert('error');}
      });
  });
});
</script>

测试控制器功能

public JsonResult GetGrid(int? page, int? limit, string sortBy, string direction, int selectedID)
        {
            List<ViewModel> records;
            int total;

                var query = Lync query to fetch data from Database using selectedID;

                if (!string.IsNullOrEmpty(sortBy) && !string.IsNullOrEmpty(direction))
                {
                    //code for sorting
                }
                else
                {
                    query = query.OrderBy(q => q.DeliveryID);
                }

                if (page.HasValue && limit.HasValue)
                {
                    //code for paging
                }
                else
                {
                    records = query.ToList();
                }

            return this.Json(records, JsonRequestBehavior.AllowGet);
        }

网格数据应根据新的下拉列表刷新。

Answer 1

根据此处找到的文档，您具有重新加载功能。

https://gijgo.com/grid/methods

此处重新加载执行此操作：从数据源重新加载网格中的数据。这意味着您可以更改数据源并根据如下参数进行重新加载：

<script>
    //RAZOR view    
    function reloadGrid(){  
            grid.clear();
            grid.reload();
    }

    $(document).ready(function(){
      $("#DropDownID").change(function(){
                grid = $('#gridmvc').grid({
                     dataSource: '/Test/GetGrid'
                     params: { selectedID: this.value },
                     primaryKey: 'DeliveryID',
                     columns: [
                          {field: 'DeliveryID'},
                          {field: 'ProductName', sortable: true},
                          {field: 'Amount', sortable: true}
                     ],
                     pager:{limit: 5}
                });
                reloadGrid();      
      });
    });
</script>

但是，如果您要更改Ajax调用中的数据，则可以使用render。

https://gijgo.com/grid/methods/render

此处“渲染”执行以下操作：渲染网格中的数据（根据您的响应）。

因此，您可以在成功中做到这一点：

<script>
$(document).ready(function(){
  $("#DropDownID").change(function(){
      $.ajax({
         type: 'POST',
         url : '/Test/GetGrid',
         data: {selectedID: this.value},
         success: function(data){
            grid = $('#gridmvc').grid({
                 primaryKey: 'DeliveryID',
                 columns: [
                      {field: 'DeliveryID'},
                      {field: 'ProductName', sortable: true},
                      {field: 'Amount', sortable: true}
                 ],
                 pager:{limit: 5}
            });

            grid.render(data);
         },
         error: function(){alert('error');}
      });
  });
});
</script>

此外，如果您阅读gijgo.js，则可以找到以下内容：

https://cdn.jsdelivr.net/npm/gijgo@1.9.13/js/gijgo.js

第4554行：

@param {object} params-一个对象，其中包含要发送到服务器的参数列表。

Answer 2

将网格数据请求与下拉列表分开

<script>

var grid;
var url = '/Test/GetGrid';

$(document).ready(function(){

grid = $('#gridmvc').grid({
       primaryKey: 'DeliveryID',
       dataSource: url,
       params: { selectedID: $("#DropDownID").val() },
       columns: [
           {field: 'DeliveryID'},
           {field: 'ProductName', sortable: true},
           {field: 'Amount', sortable: true}
        ],
        pager:{limit: 5}
});


$("#DropDownID").change(function() {
   grid.reLoad( { selectedID: $(this).val() } );
});

</script>

Test Controller 
.
.
public JsonResult(int? page, int? limit, int? selectedIDpersonId)
{  
   long total = ....
   .......
   return this.Json(new { records, total }, JsonRequestBehavior.AllowGet);
}

Gijgo网格在更改事件时未刷新

2 个答案: