jquery - 如何删除backgrid.js中的 "select-all"和 "select-row"？

Question

js，我是新手，我已经完成了在网格中显示数据，现在我添加全选标题单元格和单元格作为选择行现在我不知道如何从服务器删除选中的行以及如何制作html del 按钮。哪个将连接到它？

这是我正在使用的java脚本:--

<%= stylesheet_link_tag    "bootstrap.min" %>
        <%= stylesheet_link_tag    "backgrid" %>
        <%= stylesheet_link_tag    "backgrid-filter" %>
        <%= stylesheet_link_tag    "backgrid-paginator" %>
        <%= stylesheet_link_tag    "backgrid-select-all.min" %>
<%= javascript_include_tag "jquery-1.4.2.min.js"%>
    <%= javascript_include_tag "underscore.js"%>
    <%= javascript_include_tag "backbone.js"%>
    <%= javascript_include_tag "lunr.js"%>
    <%= javascript_include_tag "backgrid.js"%>
    <%= javascript_include_tag "backbone-pageable.js"%>
    <%= javascript_include_tag "backgrid-filter.js"%>
    <%= javascript_include_tag "backgrid-paginator.js"%>        
    <%= javascript_include_tag "backgrid-select-all.min.js"%>

和 backgrid 模态和网格代码:-

var Territory = Backbone.Model.extend({});

var PageableTerritories = Backbone.PageableCollection.extend({
  model: Territory,
  url: urlvariable,
  state: {
    pageSize: 15
  },
  mode: "client" // page entirely on the client side
});




var pageableTerritories = new PageableTerritories();
var columns = [{

    // name is a required parameter, but you don't really want one on a select all column
    name: "",

    // Backgrid.Extension.SelectRowCell lets you select individual rows
    cell: "select-row",

    // Backgrid.Extension.SelectAllHeaderCell lets you select all the row on a page
    headerCell: "select-all",

  },{
  name: "FirstName",
  label: "First Name",
  // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
  cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
}, {
  name: "LastName",
  label: "Last Name",
  cell: "string" // An integer cell is a number cell that displays humanized integers
}, {
  name: "PatientId",
  label: "Patient Id",
  cell: "uri" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "RoomNumber",
  label: "Room Number",
  cell: "string" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "AdmissionDate",
  label: "Admission Date",
  cell: "date" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "DischargeDate",
  label: "Discharge Date",
  cell: "date" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "MeasureCategory",
  label: "MeasureCategory",
  cell: "string" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}];
// Set up a grid to use the pageable collection
var pageableGrid = new Backgrid.Grid({
  columns: columns,
  collection: pageableTerritories
});

// Render the grid
$("#grid").empty();

var $example2 = $("#grid");

$example2.append(pageableGrid.render().$el)

// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
  collection: pageableTerritories
});

// Render the paginator
$example2.append(paginator.render().$el);

// Initialize a client-side filter to filter on the client
// mode pageable collection's cache.
var filter = new Backgrid.Extension.ClientSideFilter({
  collection: pageableTerritories.fullCollection,
  fields: ['FirstName']
});

// Render the filter
$example2.prepend(filter.render().$el);

// Add some space to the filter and move it to the right
filter.$el.css({float: "right", margin: "20px"});

// Fetch some data
pageableTerritories.fetch({reset: true});
}

Answer 1

要在使用 backgrid.js 和选择列扩展时获取当前选定的单元格，您需要调用以下代码:

var selectedModels = pageableGrid.getSelectedModels();
_.each(selectedModels, function (model) {
  model.destroy();
});

您可以在页面上的某个位置创建一个按钮元素，并将单击事件处理程序绑定(bind)到它并调用上面的代码。粗略的 jQuery 代码如下:

$('#delete-button').click(function () {
  var selectedModels = pageableGrid.getSelectedModels();
  _.each(selectedModels, function (model) {
    model.destroy();
  });
});