SlickGrid single/multiple Row Selection
HTML
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.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/plugins/slick.checkboxselectcolumn.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.autotooltips.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellcopymanager.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellselectionmodel.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>
<script src="http://mleibman.github.io/SlickGrid/slick.formatters.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.editors.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/controls/slick.columnpicker.css">
<link rel="stylesheet" href="https://rawgit.com/mleibman/SlickGrid/master/examples/examples.css">
<div style="position:relative">
<div style="width:600px;">
<div id="myGrid" style="width:180px;height:200px;"></div>
</div>
</div>
<br>
<button id="single">Select Single rows</button>
<button id="multiple">Select multiple rows</button>
<button id="getRows">get selected rows</button><br><br>
<div...
CSS
.slick-cell-checkboxsel {
background: #f0f0f0;
border-right-color: silver;
border-right-style: solid;
}
JavaScript
var grid;
var data = [];
var options = {
editable: false,
enableCellNavigation: true,
autoEdit: false,
};
var columns = [];
var selectedRows = [];
$(function () {
for (var i = 0; i < 20; i++) {
var d = (data[i] = {});
d[0] = "Row " + i;
}
for (var i = 0; i < 3; i++) {
columns.push({
id: i,
name: String.fromCharCode("A".charCodeAt(0) + i),
field: i,
width: 50,
});
}
grid = new Slick.Grid("#myGrid", data, columns, options);
selectActiveRow = false;
grid.setSelectionModel(new Slick.RowSelectionModel({
selectActiveRow: false
}));
grid.onClick.subscribe(function (e,args) {
debugger;
alert(grid.getSelectedRows());
if(selectActiveRow){
if($.inArray(args.row, selectedRows) === -1){
selectedRows = [];
selectedRows.push(args.row)
}else{
selectedRows = [];
}
}else{
($.inArray(args.row, selectedRows) === -1) ? selectedRows.push(args.row) : selectedRows.splice(selectedRows.indexOf(args.row), 1);
}
grid.setSelectedRows(selectedRows);
});
$( "#single" ).click(function() {
selectActiveRow = true;
grid.setSelectionModel(new Slick.RowSelectionModel({
selectActiveRow: true
}));
});
$( "#multiple" ).click(function() {
selectActiveRow = false;
grid.setSelectionModel(new Slick.RowSelectionModel({
selectActiveRow: false
}));
});
$( "#getRows" ).click(function() {
var str = '\n';
for(var i=0; i<grid.getSelectedRows().length; i++){
str+=grid.getSelectedRows()[i]+"\n";
}
$('#result').html('selected record ids are : \n'+str);
});
})