Slickgrid : Checkbox Row Delete
HTML
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script src="https://raw.githubusercontent.com/mleibman/SlickGrid/master/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.checkboxselectcolumn.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.editors.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
<script src="http://mleibman.github.io/SlickGrid/controls/slick.columnpicker.js"></script>
<button id='deleteButton'>Delete Selected</button>
<div id="myGrid" style="width:600px;height:500px;"></div>
JavaScript
var grid;
var dataView = new Slick.Data.DataView();
var data = [];
var options = {
editable: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: false
};
var columns = [];
$(function () {
for (var i = 0; i < 10; i++) {
var d = (data[i] = {});
d[0] = "Row " + i;
d.id = i
}
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
columns.push(checkboxSelector.getColumnDefinition());
for (var i = 0; i < 5; i++) {
columns.push({
id: i,
name: String.fromCharCode("A".charCodeAt(0) + i),
field: i,
width: 100,
editor: Slick.Editors.Text
});
}
dataView.setItems(data)
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel({
selectActiveRow: false
}));
grid.registerPlugin(checkboxSelector);
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
})
$('#deleteButton').click(function () {
console.log("Delete")
var selected = grid.getSelectedRows();
grid.setSelectedRows([]);
$.each(selected, function (index, value) {
console.log("Index: " + index)
console.log("Value " + value)
grid.getData().deleteItem(value)
})
grid.invalidate()
});