Сетка Gijgo не обновляется при изменении события - PullRequest
Новая
       28

Сетка Gijgo не обновляется при изменении события

0 голосов
/ 15 мая 2019

Я работаю над приложением MVC 5.Я застрял в представлении, в котором есть выпадающий список и сетка (Gijgo-grid).Сетка заполняется на основе выбранного значения раскрывающегося списка.Когда я в первый раз выбираю опцию из выпадающего списка, заполняется сетка.Но когда я меняю свой выбор в выпадающем списке, данные сетки не меняются.

При изменении события раскрывающегося списка я использую ajax для вызова функции в контроллере, чтобы получить данные для сетки.

cshtml page 

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

Данные сетки должны обновляться на основе нового выбора раскрывающегося списка.

1 Ответ

0 голосов
/ 20 июня 2019

Согласно документации, найденной здесь, у вас есть функция перезагрузки.

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, вы можете использовать render.

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 - объект, который содержит список с параметрами, которые будут отправлены на сервер.

...