Commit afb2be24 authored by Tristan Cavelier's avatar Tristan Cavelier Committed by Sebastien Robin

Adding checkbox to slickgrid to select several files and remove them.

parent 1e909891
......@@ -8,8 +8,23 @@
<link rel="stylesheet"
href="lib/slickgrid/css/examples.css"
type="text/css"/>
<style>
.slick-cell-checkboxsel {
background: #f0f0f0;
border-right-color: silver;
border-right-style: solid;
}
</style>
</head>
<body>
<div>
<button type="submit"
id="slickgrid_document_lister_remove_selected"
class="btn btn-danger">
<i class="icon-remove icon-white"></i>
Remove Selected
</button>
</div>
<div id="myDocumentList" style="width:100%;height:300px"></div>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
......@@ -17,19 +32,21 @@
src="lib/jquery/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="lib/slickgrid/js/slick.core.js"></script>
<script type="text/javascript"
src="lib/slickgrid/js/slick.checkboxselectcolumn.js"></script>
<script type="text/javascript"
src="lib/slickgrid/js/slick.rowselectionmodel.js"></script>
<script type="text/javascript"
src="lib/slickgrid/js/slick.formatters.js"></script>
<script type="text/javascript" src="lib/slickgrid/js/slick.grid.js"></script>
<script type="text/javascript">
<!--
(function () {
var grid, onSortFunction, onClickFunction,
var grid, onSortFunction, onClickFunction, checkboxselector,
onRemoveSeveral,
documentlist = OfficeJS.cloneCurrentDocumentList(),
columns = [
{id:"fileName",name:"Document",field:"fileName",sortable:true},
{id:"lastModified",name:"Modified",field:"lastModified",sortable:true},
{id:"creationDate",name:"Created",field:"creationDate",sortable:true}
],
columns = [],
options = {
enableCellNavigation: true,
enableColumnReorder: false,
......@@ -37,18 +54,52 @@
forceFitColumns: true
};
(function (array) {
var i, lm, cd;
// FIXME : we can have 2012/1/1 12:5
// we should have 2012/01/01 12:05
for (i = 0; i < array.length; i += 1) {
// TODO : create fileNameWithoutExt and fileApplication
// according to the file extension.
lm = (new Date(array[i].lastModified));
cd = (new Date(array[i].creationDate));
array[i].lastModified = lm.getFullYear()+'/'+
(lm.getMonth()+1)+'/'+lm.getDate()+' '+
lm.getHours()+':'+lm.getMinutes();
array[i].creationDate = cd.getFullYear()+'/'+
(cd.getMonth()+1)+'/'+cd.getDate()+' '+
cd.getHours()+':'+cd.getMinutes();
}
}(documentlist));
$(function () {
checkboxselector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
columns.push(checkboxselector.getColumnDefinition());
columns.push({id:"icon",name:"",field:"icon",
sortable:true,resizable:false,width:24});
columns.push({id:"fileName",name:"Document",
field:"fileName",sortable:true});
columns.push({id:"lastModified",name:"Modified",
field:"lastModified",sortable:true});
columns.push({id:"creationDate",name:"Created",
field:"creationDate",sortable:true});
grid = new Slick.Grid("#myDocumentList",
documentlist,
columns,
options);
grid.setSelectionModel(new Slick.RowSelectionModel(
{selectActiveRow: false}));
grid.registerPlugin(checkboxselector);
onSortFunction = function (e, args) {
var cols = args.sortCols;
documentlist.
sort(function (dataRow1, dataRow2) {
documentlist.sort(function (dataRow1, dataRow2) {
var i, l, field, sign, value1, value2, result;
for (i = 0, l = cols.length; i < l; i++) {
field = cols[i].sortCol.field;
......@@ -67,9 +118,21 @@
};
onClickFunction = function (e) {
var cell = grid.getCellFromEvent(e);
if (cell.cell === grid.getColumnIndex('fileName')) {
OfficeJS.open({app:'textEditor',
fileName:documentlist[cell.row].fileName});
}
};
onRemoveSeveral = function () {
var documentnamesarray = [], selected, i, l;
selected = grid.getSelectedRows();
for (i = 0, l = selected.length; i < l; i+= 1) {
documentnamesarray.push(documentlist[selected[i]].fileName);
}
OfficeJS.removeSeveralFromArray (documentnamesarray);
};
document.querySelector ('#slickgrid_document_lister_remove_selected').
onclick = onRemoveSeveral;
grid.onClick.subscribe(onClickFunction);
grid.onSort.subscribe(onSortFunction);
});
......
......@@ -121,7 +121,10 @@
slickgrid: {
type:'editor',
path:'component/slickgrid_document_lister.html',
gadgetid:'page-content'
gadgetid:'page-content',
update: function () {
OfficeJS.open({app:'documentLister',force:true});
}
}
};
priv.data_object = {
......@@ -201,6 +204,8 @@
* @method open
* @param {object} option Contains some settings:
* - app {string} The app name we want to open, set in preferences
* - force {boolean} To reload applications even if it is the same.
* (optional)
* - ... and some other parameters
*/
that.open = function (option) {
......@@ -214,7 +219,7 @@
that.getPreference(option.app));
return null;
}
if (priv.data_object.currentEditor !== realapp) {
if (option.force || priv.data_object.currentEditor !== realapp) {
ancientapp = priv.data_object.gadget_object[realgadgetid];
if (ancientapp) {
// if there is already a gadget there, unload it
......@@ -314,8 +319,10 @@
/**
* Returns the array list in priv.data_object
* @method getList
* @param {function} callback Another callback called after retrieving
* the list. (optional)
*/
that.getList = function () {
that.getList = function (callback) {
if (!priv.isJioSet()) {
console.error ('No Jio set yet.');
return;
......@@ -335,27 +342,16 @@
console.error (result.message);
}
priv.loading_object.end_getlist();
if (typeof callback !== 'undefined') {
callback();
}
}
});
};
that.cloneCurrentDocumentList = function () {
// clone document list
var array = $.extend(true,[],priv.data_object.documentList), i,
lm, cd;
// FIXME : we can have 2012/1/1 12:5
// we should have 2012/01/01 12:05
for (i = 0; i < array.length; i += 1) {
lm = (new Date(array[i].lastModified));
cd = (new Date(array[i].creationDate));
array[i].lastModified = lm.getFullYear()+'/'+
(lm.getMonth()+1)+'/'+lm.getDate()+' '+
lm.getHours()+':'+lm.getMinutes();
array[i].creationDate = cd.getFullYear()+'/'+
(cd.getMonth()+1)+'/'+cd.getDate()+' '+
cd.getHours()+':'+cd.getMinutes();
}
return array;
return $.extend(true,[],priv.data_object.documentList);
};
/**
......@@ -434,6 +430,34 @@
});
};
/**
* Removes several files.
* @method removeSeveralFromArray
* @param {array} documentarray Contains all file names ({string}).
*/
that.removeSeveralFromArray = function (documentarray) {
var i, l, cpt = 0, current_editor = priv.data_object.currentEditor;
if (!priv.isJioSet()) {
console.error ('No Jio set yet.');
return;
}
for (i = 0, l = documentarray.length; i < l; i+= 1) {
priv.loading_object.remove();
priv.jio.removeDocument({
fileName:documentarray[i],
callback:function (result) {
cpt += 1;
console.log (result);
if (cpt === l) {
if (typeof current_editor.update !== 'undefined') {
that.getList(current_editor.update);
}
}
priv.loading_object.end_remove();
}});
}
};
// End of class //
priv.init();
return that;
......
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"CheckboxSelectColumn": CheckboxSelectColumn
}
});
function CheckboxSelectColumn(options) {
var _grid;
var _self = this;
var _selectedRowsLookup = {};
var _defaults = {
columnId: "_checkbox_selector",
cssClass: null,
toolTip: "Select/Deselect All",
width: 30
};
var _options = $.extend(true, {}, _defaults, options);
function init(grid) {
_grid = grid;
_grid.onSelectedRowsChanged.subscribe(handleSelectedRowsChanged);
_grid.onClick.subscribe(handleClick);
_grid.onHeaderClick.subscribe(handleHeaderClick);
_grid.onKeyDown.subscribe(handleKeyDown);
}
function destroy() {
_grid.onSelectedRowsChanged.unsubscribe(handleSelectedRowsChanged);
_grid.onClick.unsubscribe(handleClick);
_grid.onHeaderClick.unsubscribe(handleHeaderClick);
_grid.onKeyDown.unsubscribe(handleKeyDown);
}
function handleSelectedRowsChanged(e, args) {
var selectedRows = _grid.getSelectedRows();
var lookup = {}, row, i;
for (i = 0; i < selectedRows.length; i++) {
row = selectedRows[i];
lookup[row] = true;
if (lookup[row] !== _selectedRowsLookup[row]) {
_grid.invalidateRow(row);
delete _selectedRowsLookup[row];
}
}
for (i in _selectedRowsLookup) {
_grid.invalidateRow(i);
}
_selectedRowsLookup = lookup;
_grid.render();
if (selectedRows.length == _grid.getDataLength()) {
_grid.updateColumnHeader(_options.columnId, "<input type='checkbox' checked='checked'>", _options.toolTip);
} else {
_grid.updateColumnHeader(_options.columnId, "<input type='checkbox'>", _options.toolTip);
}
}
function handleKeyDown(e, args) {
if (e.which == 32) {
if (_grid.getColumns()[args.cell].id === _options.columnId) {
// if editing, try to commit
if (!_grid.getEditorLock().isActive() || _grid.getEditorLock().commitCurrentEdit()) {
toggleRowSelection(args.row);
}
e.preventDefault();
e.stopImmediatePropagation();
}
}
}
function handleClick(e, args) {
// clicking on a row select checkbox
if (_grid.getColumns()[args.cell].id === _options.columnId && $(e.target).is(":checkbox")) {
// if editing, try to commit
if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
e.preventDefault();
e.stopImmediatePropagation();
return;
}
toggleRowSelection(args.row);
e.stopPropagation();
e.stopImmediatePropagation();
}
}
function toggleRowSelection(row) {
if (_selectedRowsLookup[row]) {
_grid.setSelectedRows($.grep(_grid.getSelectedRows(), function (n) {
return n != row
}));
} else {
_grid.setSelectedRows(_grid.getSelectedRows().concat(row));
}
}
function handleHeaderClick(e, args) {
if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) {
// if editing, try to commit
if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
e.preventDefault();
e.stopImmediatePropagation();
return;
}
if ($(e.target).is(":checked")) {
var rows = [];
for (var i = 0; i < _grid.getDataLength(); i++) {
rows.push(i);
}
_grid.setSelectedRows(rows);
} else {
_grid.setSelectedRows([]);
}
e.stopPropagation();
e.stopImmediatePropagation();
}
}
function getColumnDefinition() {
return {
id: _options.columnId,
name: "<input type='checkbox'>",
toolTip: _options.toolTip,
field: "sel",
width: _options.width,
resizable: false,
sortable: false,
cssClass: _options.cssClass,
formatter: checkboxSelectionFormatter
};
}
function checkboxSelectionFormatter(row, cell, value, columnDef, dataContext) {
if (dataContext) {
return _selectedRowsLookup[row]
? "<input type='checkbox' checked='checked'>"
: "<input type='checkbox'>";
}
return null;
}
$.extend(this, {
"init": init,
"destroy": destroy,
"getColumnDefinition": getColumnDefinition
});
}
})(jQuery);
/***
* Contains basic SlickGrid formatters.
* @module Formatters
* @namespace Slick
*/
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"Formatters": {
"PercentComplete": PercentCompleteFormatter,
"PercentCompleteBar": PercentCompleteBarFormatter,
"YesNo": YesNoFormatter,
"Checkmark": CheckmarkFormatter
}
}
});
function PercentCompleteFormatter(row, cell, value, columnDef, dataContext) {
if (value == null || value === "") {
return "-";
} else if (value < 50) {
return "<span style='color:red;font-weight:bold;'>" + value + "%</span>";
} else {
return "<span style='color:green'>" + value + "%</span>";
}
}
function PercentCompleteBarFormatter(row, cell, value, columnDef, dataContext) {
if (value == null || value === "") {
return "";
}
var color;
if (value < 30) {
color = "red";
} else if (value < 70) {
color = "silver";
} else {
color = "green";
}
return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'></span>";
}
function YesNoFormatter(row, cell, value, columnDef, dataContext) {
return value ? "Yes" : "No";
}
function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
return value ? "<img src='../images/tick.png'>" : "";
}
})(jQuery);
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"RowSelectionModel": RowSelectionModel
}
});
function RowSelectionModel(options) {
var _grid;
var _ranges = [];
var _self = this;
var _handler = new Slick.EventHandler();
var _inHandler;
var _options;
var _defaults = {
selectActiveRow: true
};
function init(grid) {
_options = $.extend(true, {}, _defaults, options);
_grid = grid;
_handler.subscribe(_grid.onActiveCellChanged,
wrapHandler(handleActiveCellChange));
_handler.subscribe(_grid.onKeyDown,
wrapHandler(handleKeyDown));
_handler.subscribe(_grid.onClick,
wrapHandler(handleClick));
}
function destroy() {
_handler.unsubscribeAll();
}
function wrapHandler(handler) {
return function () {
if (!_inHandler) {
_inHandler = true;
handler.apply(this, arguments);
_inHandler = false;
}
};
}
function rangesToRows(ranges) {
var rows = [];
for (var i = 0; i < ranges.length; i++) {
for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
rows.push(j);
}
}
return rows;
}
function rowsToRanges(rows) {
var ranges = [];
var lastCell = _grid.getColumns().length - 1;
for (var i = 0; i < rows.length; i++) {
ranges.push(new Slick.Range(rows[i], 0, rows[i], lastCell));
}
return ranges;
}
function getRowsRange(from, to) {
var i, rows = [];
for (i = from; i <= to; i++) {
rows.push(i);
}
for (i = to; i < from; i++) {
rows.push(i);
}
return rows;
}
function getSelectedRows() {
return rangesToRows(_ranges);
}
function setSelectedRows(rows) {
setSelectedRanges(rowsToRanges(rows));
}
function setSelectedRanges(ranges) {
_ranges = ranges;
_self.onSelectedRangesChanged.notify(_ranges);
}
function getSelectedRanges() {
return _ranges;
}
function handleActiveCellChange(e, data) {
if (_options.selectActiveRow) {
setSelectedRanges([new Slick.Range(data.row, 0, data.row, _grid.getColumns().length - 1)]);
}
}
function handleKeyDown(e) {
var activeRow = _grid.getActiveCell();
if (activeRow && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey && (e.which == 38 || e.which == 40)) {
var selectedRows = getSelectedRows();
selectedRows.sort(function (x, y) {
return x - y
});
if (!selectedRows.length) {
selectedRows = [activeRow.row];
}
var top = selectedRows[0];
var bottom = selectedRows[selectedRows.length - 1];
var active;
if (e.which == 40) {
active = activeRow.row < bottom || top == bottom ? ++bottom : ++top;
} else {
active = activeRow.row < bottom ? --bottom : --top;
}
if (active >= 0 && active < _grid.getDataLength()) {
_grid.scrollRowIntoView(active);
_ranges = rowsToRanges(getRowsRange(top, bottom));
setSelectedRanges(_ranges);
}
e.preventDefault();
e.stopPropagation();
}
}
function handleClick(e) {
var cell = _grid.getCellFromEvent(e);
if (!cell || !_grid.canCellBeActive(cell.row, cell.cell)) {
return false;
}
var selection = rangesToRows(_ranges);
var idx = $.inArray(cell.row, selection);
if (!e.ctrlKey && !e.shiftKey && !e.metaKey) {
return false;
}
else if (_grid.getOptions().multiSelect) {
if (idx === -1 && (e.ctrlKey || e.metaKey)) {
selection.push(cell.row);
_grid.setActiveCell(cell.row, cell.cell);
} else if (idx !== -1 && (e.ctrlKey || e.metaKey)) {
selection = $.grep(selection, function (o, i) {
return (o !== cell.row);
});
_grid.setActiveCell(cell.row, cell.cell);
} else if (selection.length && e.shiftKey) {
var last = selection.pop();
var from = Math.min(cell.row, last);
var to = Math.max(cell.row, last);
selection = [];
for (var i = from; i <= to; i++) {
if (i !== last) {
selection.push(i);
}
}
selection.push(last);
_grid.setActiveCell(cell.row, cell.cell);
}
}
_ranges = rowsToRanges(selection);
setSelectedRanges(_ranges);
e.stopImmediatePropagation();
return true;
}
$.extend(this, {
"getSelectedRows": getSelectedRows,
"setSelectedRows": setSelectedRows,
"getSelectedRanges": getSelectedRanges,
"setSelectedRanges": setSelectedRanges,
"init": init,
"destroy": destroy,
"onSelectedRangesChanged": new Slick.Event()
});
}
})(jQuery);
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment