jquery - 在表格顶部添加按钮的简洁方法 - Bootgrid

Question

我正在使用 Jquery-Bootgrid。 http://www.jquery-bootgrid.com/

我需要一种情况，用户可以选择一行，然后用户单击编辑/删除按钮。

我希望它可以重复使用。所以我创建了一个方法:

function dataTable() {

    var self = this;

    self.tableListUrl = "";
    self.gridObject = null;

    self.InitilizeAjaxTable = function (tableDiv, tableListUrl) {

        parameters = parameters || "";
        self.tableListUrl = tableListUrl;

        self.gridObject = $("#" + tableDiv).bootgrid({
            formatters: {
                "actions": function (column, row) {
                    return "";
                }
            },
            rowCount: [5, 10, 25, 50, -1],
            requestHandler: function (request) {

                var model = fleetMaintenance.filterModel.GetModel();
                model.Current = request.current;
                model.RowCount = request.rowCount;
                model.Search = request.searchPhrase;
                return JSON.stringify(model);
            },
            ajaxSettings: {
                method: "POST",
                contentType: "application/json"
            },
            ajax: true,
            url: self.tableListUrl,
        }).on("loaded.rs.jquery.bootgrid", function (e) {
            alert('Loaded');
        });
    }).on("click.rs.jquery.bootgrid", function (e, columns, row) {

});
},

self.RefreshTable = function () {
    self.gridObject.bootgrid("reload");
},

}

然后我可以使用以下方法初始化我的表:

<script type="text/javascript">
    $(function() {
        var dt = new dataTable();

        dt.InitilizeAjaxTable("sitesList", '@Url.Action("SitesList","Sites")');
    });
</script>

HTML:

<table id="sitesList" class="table table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="iSiteId" data-visible="false" data-identifier="true" data-type="numeric" data-sortable="false">Site Id</th>
            <th data-column-id="sSiteName" data-order="desc">Site Name</th>
            <th data-column-id="sNotes">Notes</th>
            <th data-column-id="sAddress">Address</th>
            <th data-column-id="sCity">City</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>       

我知道我可以将 rowSelect 和 selection 设置为 true。

我可以在按钮上绑定(bind)点击事件，我需要知道的是如何在这个表格的开头附加一个带有数据属性的按钮？

Answer 1

这个对我有用:

$("#grid-header").find('.actions.btn-group').append('<button class="btn btn-primary" type="button">Edit <span class="icon glyphicon glyphicon-pencil"></span></button>');