Gijgo 网格不刷新更改事件答案

【问题标题】：Gijgo grid not refreshing on change eventGijgo 网格不刷新更改事件
【发布时间】：2019-10-02 17:44:37
【问题描述】：

我正在开发 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);
        }

网格数据应根据新选择的下拉菜单刷新。

【问题讨论】：

标签： javascript json asp.net-mvc-5 grid asp.net-ajax

【解决方案1】：

从下拉列表中分离网格数据请求

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

【讨论】：

【解决方案2】：

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

https://gijgo.com/grid/methods

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

<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

这里渲染执行此操作：在网格中渲染数据（来自您的响应）。

所以在你的成功中，你可以这样做：

<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 - 一个对象，其中包含将要发送到服务器的参数列表。

【讨论】：