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

Question

我正在处理 MVC 5 应用程序。我被困在一个有下拉菜单和网格（Gijgo-grid）的视图上。网格根据下拉列表的 selected 值填充。当我 select 第一次从下拉列表中选择一个选项时，网格会被填充。但是当我在下拉列表中更改 selection 时，网格数据不会更改。

在下拉列表的更改事件中，我使用 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);
        }

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

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 调用中的数据，则可以使用渲染。

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

此处 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 网格在更改事件时不刷新

Gijgo grid not refreshing on change event

javascript

grid

json

asp.net-ajax

asp.net-mvc-5