Question

假设我从api中获取数据并在排序期间，如果可以在bootgrid中像datatable一样，请不要点击api请帮忙。

我有这个功能用于bootgrid加载可以请帮忙。

function generateBootGrid(pd) {
$(pd.gridId).bootgrid({
    ajax: true,
    rowSelect: true,
    navigation: 0,
    sort: true,
    search: false,
    post: function ()
    {
        /* To accumulate custom parameter with the request object */
        return getCustomPramas();
    },
    url: baseUrl + pd.fireUrl+'?get_of_year='+$('#get_of_year').val(),
    templates: {
        search: ""
    },
    responseHandler: function (data) {
        console.log(data);
        $(pd.totalPriceId).html(data.totalCost);
        return data;
    },
    formatters: {
        "commands": function (column, row)
        {
            return "<button type=\"button\" class=\"btn btn-xs btn-default " + pd.editButtonClass + "\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> ";
        }
    }
})

requiredBootGridParms = {
    gridId: "#educational-expenses",
    fireUrl: "/pedagogical-action/get-educational-expenses/",
    totalPriceId: "#totalEduCost",
    editButtonClass: "command-edit",
};

generateBootGrid(requiredBootGridParms);

这是此网格的html

 <table id="educational-expenses" class="table table-condensed table-hover table-striped" width="60%" cellspacing="0" >
        <thead>
            <tr>
                <th data-column-id="account_number" data-type="numeric" data-identifier="true">Account Number</th>
                <th data-column-id="account_name"  data-order="desc">Account Name</th>
                <th data-column-id="amount">Amount</th>
            </tr>
        </thead>
    </table>
    <button type="button" class="btn btn-xs btn-primary" id="command-add" data-row-id="0">
        <span class="glyphicon glyphicon-plus"></span></button>
    <span class="text-danger float-right">Total educational costs - A:  <span class="text-danger" id="totalEduCost">00.00</span></span>

由于

Answer 1

这是可能的。您需要自己执行ajax请求，然后手动填充bootgrid。您还需要配置bootgrid以不使用ajax。

function generateBootGrid(pd) {

    var grid = $(pd.gridId).bootgrid({
        ajax: false,
        rowSelect: true,
        navigation: 0,
        sort: true,
        search: false,
        templates: {
            search: ""
        },
        formatters: {
            "commands": function (column, row)
            {
                return "<button type=\"button\" class=\"btn btn-xs btn-default " + pd.editButtonClass + "\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> ";
            }
        }
    });

    return grid;

}

function loadData(pd, grid) {
    var url = baseUrl + pd.fireUrl+'?get_of_year='+$('#get_of_year').val();
    var data = getCustomPramas();
    $.post(url, data)
    .done(function (data) {
        console.log(data);
        data = JSON.parse(data);
        $(pd.totalPriceId).html(data.totalCost);

        grid.bootgrid('clear');
        grid.bootgrid('append', data.rows);
    });
}

requiredBootGridParms = {
    gridId: "#educational-expenses",
    fireUrl: "/pedagogical-action/get-educational-expenses/",
    totalPriceId: "#totalEduCost",
    editButtonClass: "command-edit",
};

var grid = generateBootGrid(requiredBootGridParms);
loadData(requiredBootGridParms, grid);

API方法应返回如下内容：

public IHttpActionResult Get()
{
    var model = new ExpensesViewModel();
    model.totalCost = 1000.53;
    model.rows = new List<ItemViewModel>();
    model.rows.Add(new User("John"));
    model.rows.Add(new User("Darin"));
    model.rows.Add(new User("BalusC"));
    return Ok(model);
}

我以C＃Web.API为例，但您可以根据需要使用任何后端。

...您的API返回的data应该是这样的json：

{
    totalCost: 1000.53,
    rows: [
        { id: 1, cost: 50 },
        { id: 2, cost: 130 },
        { id: 13 cost: 25 }
    ]
}

使用这种方法，bootgrid将在客户端上进行排序，分页和搜索，而不会自动向API发送请求。

但是，请注意，只有当API返回网格中所需的所有数据时，此方法才有效。因此，如果您有100行，那么您的API应该返回100行（同样适用于DataTable）。

如何在bootgrid中进行离线排序？

1 个答案: