动态传递参数给 Bootgrid

Question

我有一个这样的bootgrid，

 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

您需要更改您的请求处理程序，但无需从头开始重新创建它，只需添加您需要的属性并return它。

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- 使用任何 html

将您的 BootGrid 绑定到 @Html.EditorFor

            @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");

}));

动态传递参数给 Bootgrid

Pass parameter to Bootgrid dynamically

jquery

jquery-bootgrid