Jquery 在表格顶部添加按钮的干净方法-Bootgrid

我正在使用jquerybootgrid

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

我希望这个可以重复使用。因此，我创建了一个方法：

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>

$（函数（）{
var dt=新数据表（）；
dt.InitilizeAjaxTable（“sitesList”，“Sites”），@Url.Action（“sitesList”，“Sites”）；
});

HTML:

站点Id
站点名称
笔记
地址
城市

我知道我可以将

行选择

和

选择

设置为

true

---

我可以将单击事件绑定到按钮上，我需要知道的是，如何在此表的开头添加一个带有数据属性的按钮？

加载表后使用jQuery prepend函数：

$('#sitesList tr').prepend(
     '<th>' +
         '<button type="button" testDate="' + yourData + '">' +
              'click me' +
          '</button>' +
     '</th>'
);

$（'sitesList tr'）。前置(
'' +
'' +
“点击我”+
'' +
''
);

将按钮添加到表格顶部。

此按钮适用于我：

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

$（“#网格头”）.find（'.actions.btn group'）.append（'Edit'）；

好的，所以我扩展了

jquery bootgrid

对象，并创建了一个

customDataTable

对象

您所要做的就是将以下代码复制/粘贴到JS文件中，并在链接jquery bootgrid JS文件后将其链接到您的网站

注意：我已经添加了一个自定义的

requestHandler

和

responseHandler

，但是如果您不需要它，您可以编辑它或将其删除，就像这样 我在应用程序中使用的内容

您可以根据需要传递任意多个按钮，还可以定义它们执行的功能

对于Ajax表，只需传入正确的URL并将Ajax设置为true：

var assetsList = $("#grid-data").customDataTable({
  tableListUrl: '/Controller/Action',
  ajax: true,

---

您可以在这里看到一个这样的工作示例：

这就是我如何实现我的按钮，以便与

引导网格

完美匹配：

$("#grid-header").find('.actionBar').prepend('
    <button id="btnAdd" class="btn btn-primary pull-left" type="button">
        <span class="icon glyphicon glyphicon-plus"></span>
        Add
    </button>
');

$（“#网格头”）.find（'.actionBar'）.prepend（'
添加
');

---

它工作得很好，而且很容易在其中自定义按钮。

这会破坏bootgrid表格的样式。试试这里：我觉得很好吗$（#grid basic tr'）。prepend（“”+“”+“”“单击我”+“”+“”）；我将给它一个快照。我的表头id为“grid data header”。因此，我使用$（“#网格数据头”）而不是$（“#网格头”），它工作了。

var assetsList = $("#grid-data").customDataTable({
  ajax: false, // set to true to load data using Ajax
  buttons: {
    dlt: {
      Text: "Delete",
      css: "btn btn-danger",
      enabled: true, // false to hide button
      click: function() {
        alert('Delete clicked')
        var selectedId = assetsList.bootgrid("getSelectedRows")[0];
        if (selectedId == undefined) {
          alert('No Item Selected');
          return;
        }
      }
    },
    update: {
      Text: "Update",
      css: "btn btn-primary",
      enabled: true,
      click: function() {
        alert('update clicked')

      }
    }
  }
});

var assetsList = $("#grid-data").customDataTable({
  tableListUrl: '/Controller/Action',
  ajax: true,

$("#grid-header").find('.actionBar').prepend('
    <button id="btnAdd" class="btn btn-primary pull-left" type="button">
        <span class="icon glyphicon glyphicon-plus"></span>
        Add
    </button>
');