Slickgrid : Checkbox Row Manipulation
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="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>
<div id="myGrid" style="width:600px;height:500px;"></div>
JavaScript
var grid;
var data = [];
var options = {
editable: false,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: false,
forceFitColumns: true
};
var columns = [];
var dataContainer = {}
$(function () {
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
});
}
(function generateData() {
for (var i = 0; i < 100; i++) {
dataContainer[i] = {}
var d = (data[i] = {});
for (x in columns) {
dataContainer[i][x] = Math.floor((Math.random() * 100) + 1);
}
d[0] = "Row " + i;
}
})();
grid = new Slick.Grid("#myGrid", data, columns, options);
/* grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false})); */
grid.registerPlugin(checkboxSelector);
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
var context = {};
})