如何刪除「select-all」和「select-row」在backgrid.js中？

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(); 
}); 

您可以創建一個按鈕元素som在頁面上的某個地方綁定一個點擊事件處理程序並調用上面的代碼。粗糙的jQuery代碼如下：

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