Чистый способ добавить кнопку поверх таблицы - 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 ,

Я могу связать событие click на кнопке, что мне нужно знать Как добавить кнопку в начале этой таблицы с атрибутами данных?

Answer 1

Хорошо, так я расширил jquery-bootgrid объект и создал customDataTable объект.

Все, что вам нужно сделать, это скопировать/вставить следующий код в файл JS и связать его с вашим сайтом после связывания JS-файла jQuery bootgrid.

Примечание: Я добавил обычай requestHandler и responseHandler, но вы можете изменить это или удалить его, если вам это не нужно - так как это , что я использую в моем приложении.

(function($) { 

    $.fn.customDataTable = function(options) { 
    var namespace = ".rs.jquery.bootgrid"; 
    var settings = $.extend({ 
     tableListUrl: null, 
     buttons: [], 
     refreshTables: [], 
     updateParameters: '', 
     canSearch: true, 
     rowCount: [10, 25, 50, -1], 
     ajax: true, 
     css: { 
     actions: 'actions btn-group', 
     dropDownMenu: 'dropdown btn-group' 
     }, 
     searchSettings: { 
     characters: 2 
     }, 
     rowSelect: true, 
     templates: { 
     header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"><div class=\"row\"><div class='col-md-12 bootgridMessage'></div><div class=\"col-sm-12 actionBar\"><p class=\"{{css.search}}\"></p><p class=\"{{css.actions}}\"></p></div></div></div>" 
     } 

    }, options); 

    if (!settings.canSearch) { 
     settings.templates.header = "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"><div class=\"row\"><div class='col-md-12 bootgridMessage'></div><div class=\"col-sm-12 actionBar\"><p class=\"{{css.actions}}\"></p></div></div></div>"; 
    } 



    var createButtons = function() { 
     var buttons = settings.buttons; 
     var htmlButtons = []; 

     $.each(buttons, function(name, props) { 
     var css = ""; 
     if (!props.enabled) { 
      css = " hidden"; 
     } 
     var tempBtn = $("<button/>", { 
      text: props.Text, //set text 1 to 10 
      id: "btn_" + props.Text, 
      "class": props.css + " pull-left" + css, 
      click: props.click 
     }).attr({ 
      "style": "margin-right: 5px;" 
     }); 

     htmlButtons.push(tempBtn); 

     }); 
     return htmlButtons; 
    }; 
    var buttons = createButtons(); 
    var parentDiv = $(this).parent().parent(); 
    var dt = $(this).bootgrid({ 
     css: settings.css, 
     rowCount: settings.rowCount, 
     selection: settings.rowSelect, 
     rowSelect: settings.rowSelect, 
     searchSettings: settings.searchSettings, 
     converters: { 
     datetime: { 
      from: function(value) { 
      return moment(value); 
      }, 
      to: function(value) { 
      var customDateTime = moment.utc(value); 
      return customDateTime.format("DD/MM/YYYY HH:mm:ss"); 
      } 
     }, 
     date: { 
      from: function(value) { 
      return moment.utc(value); 
      }, 
      to: function(value) { 
      var customDateTime = moment.utc(value); 
      return customDateTime.format("DD/MM/YYYY"); 
      } 
     } 
     }, 
     requestHandler: function(request) { 
     var model = {}; 

     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); 
     }, 
     responseHandler: function(response) { 
     return response; 
     }, 
     ajaxSettings: { 
     method: "POST", 
     contentType: "application/json" 
     }, 
     ajax: settings.ajax, 
     url: settings.tableListUrl, 
     templates: settings.templates 
    }).on("selected" + namespace, function(e, row) { 

    }).on("load" + namespace, function(e) {}); 

    for (var i = 0; i < buttons.length; i++) { 
     parentDiv.find(".actionBar").prepend(buttons[i]); 
    } 
    return dt; 
    }; 

}(jQuery)); 

И затем я создал таблицу bootgrid, как это:

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') 

     } 
    } 
    } 
}); 

Вы можете пройти столько кнопок, сколько вам нужно, а также может определить функциональные возможности, которые они выполняют.

Для Ajax таблиц, просто передать в правильном URL и установить Аякс истину:

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

Вы можете увидеть рабочий пример этого здесь: https://jsfiddle.net/mdawood1991/m5j722gz/

Answer 2

Используйте функцию JQuery добавьте в начале после загрузки таблицы:

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

Чтобы добавить кнопку в верхней части таблицы.

Answer 3

Это один работает для меня:

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

Answer 4

Это, как я реализовал мой кнопка, чтобы соответствовать красиво с bootgrid:

$("#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> 
'); 

это прекрасно работает, и это довольно легко настроить кнопки там.