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

Question

假设我从 api 获取数据并在排序过程中，不想访问 api，如果可以在像数据表这样的 bootgrid 中使用，请提供帮助。

我有这个用于 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);
}

I used C# Web.API as example, but you may use any backend as you wish.

...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)。