Передать параметр в Bootgrid динамически

Question

У меня есть такая сетка,

 var grid = $("#grid-data").bootgrid({
        ajax: true,
        post: function () {
            /* To accumulate custom parameter with the request object */
            return {
                id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
            };
        },

        url: "Home/GetFacilities",
        ...........

У меня есть кнопка и связанное с ней событие, и я хотел бы, чтобы при нажатии кнопки некоторые параметры передавались bootgrid, который затем перезагружается со своими новыми значениями.

Я просмотрел документацию и обнаружил событие перезагрузки, но не увидел, как передать ему параметр. благодарю вас

Answer 1

Вы должны внести изменения в requestHandlerЯ перезагружаю свои данные используя JSON а также POST

 var dt = $(this).bootgrid({
     selection: true,
     rowSelect: true,
     requestHandler: function (request) {
         var model = {
             param1: 1,
             param2: 2

         }
         model.Current = request.current;
         model.RowCount = request.rowCount;
         model.Search = request.searchPhrase;

         for (var key in request.sort) {
             model.SortBy = key;
             model.SortDirection = request.sort[key];
         }

         return JSON.stringify(model);
     },
     ajaxSettings: {
         method: "POST",
         contentType: "application/json"
     },
     ajax: true,
     url: '/Test/Parameters'
 });

У меня есть такая модель на сервере:

    public class PaginationFilterDTO
    {
        public int RowCount { get; set; }
        public int Current { get; set; }
        public string Search { get; set; }
        public string SortBy { get; set; }
        public string SortDirection { get; set; }
        public int TotalItems { get; set; }
    }


public class MyFilter : PaginationFilterDTO
{
    public int param1 {get;set;}
    public int param2 {get;set;}
}

контроллер:

[HttpPost]
public ActionResult Parameters(MyFilter model)
{
    var response = new ResponseDTO<myDTO>
    {
        current = model.Current,
        rowCount = model.RowCount,
        total = model.TotalItems,
        rows = new List<MyDTO>()
    };

    var items = new List<myDTO>(); // Load Data here
    response.rows = siteUsers;
    response.total = model.TotalItems;

    return Json(response);
}

Так, на всякий случай: ResponseDTO

public class ResponseDTO<T>
{
    public int current { get; set; }

    public int rowCount { get; set; }

    public List<T> rows { get; set; }

    public int total { get; set; }
}

Затем вам придется привязать свою кнопку к перезагрузке сетки, я предлагаю вам использовать атрибуты данных:

<button id="myBtn" data-param1="1" data-param2="2">Click Me</button>


$('#myBtn').click(function (e) {

    $('#mygrid').bootgrid('reload');

});

И изменить requestHandler чтобы:

requestHandler: function (request) {
    var model = {

        param1: $('#myBtn').data('param1'),
        param2: $('#myBtn').data('param2'),
    };
    model.Current = request.current;
    model.RowCount = request.rowCount;
    model.Search = request.searchPhrase;

    for (var key in request.sort) {
        model.SortBy = key;
        model.SortDirection = request.sort[key];
    }

    return JSON.stringify(model);

}

Answer 2

Вам нужно изменить ваш обработчик запросов, но вам не нужно создавать его заново, просто добавьте нужные свойства и верните его.

var grid = $("#grid-data").bootgrid({
    ajax: true,
    requestHandler: function (request) {
                   //Add your id property or anything else
                   request.id = "b0df282a-0d67-40e5-8558-c9e93b7befed";
                   return request;
    },
    url: "Home/GetFacilities",
    ........

Answer 3

Другой способ решения: 1- Свяжите свой BootGrid с @Html.EditorFor с любым html

            @Html.EditorFor(model => model.Status,
            new { htmlAttributes = new { @id = "e1", @style = "display:none;" } })
            <div id="f1" class="col-sm-3"><a class="active select-airport">XC/CAI Corendon Airlines</a></div>

2- Скрыть связанный элемент

$(document).ready(function () {
    $("[name='Status']").css("display", "none");
    $("label[for='Status']").css("display", "none");
});

3- Последний шаг, измените значение привязанного элемента и активируйте его (в моем случае по щелчку div)

$("#f1").bind("click", (function () {
    $(".select-airport").removeClass("active");
    $(this).children('a').addClass('active');
    $('#Status').val(1);
    $("#Status").trigger("change");

}));