/*jshint multistr:true */
this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
(function($, my) {
"use strict";/*jshint multistr:true */
this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
(function($, my) {
"use strict";Provides a tabular view on a Dataset, based on SlickGrid.
https://github.com/mleibman/SlickGrid
Initialize it with a recline.Model.Dataset.
Additional options to drive SlickGrid grid can be given through state. The following keys allow for customization:
For example: var grid = new recline.View.SlickGrid({ model: dataset, el: $el, state: { gridOptions: { editable: true, enableAddRow: true // Enable support for row delete enabledDelRow: true, // Enable support for row Reorder enableReOrderRow:true, … }, columnsEditor: [ {column: ‘date’, editor: Slick.Editors.Date }, {column: ‘title’, editor: Slick.Editors.Text} ] } }); // NB: you need an explicit height on the element for slickgrid to work
my.SlickGrid = Backbone.View.extend({
initialize: function(modelEtc) {
var self = this;
this.$el.addClass('recline-slickgrid');Template for row delete menu , change it if you don’t love
this.templates = {
"deleterow" : '<button href="#" class="recline-row-delete btn btn-default" title="Delete row">X</button>'
};
_.bindAll(this, 'render', 'onRecordChanged');
this.listenTo(this.model.records, 'add remove reset', this.render);
this.listenTo(this.model.records, 'change', this.onRecordChanged);
var state = _.extend({
hiddenColumns: [],
columnsOrder: [],
columnsSort: {},
columnsWidth: [],
columnsEditor: [],
options: {},
fitColumns: false
}, modelEtc.state
);
this.state = new recline.Model.ObjectState(state);
this._slickHandler = new Slick.EventHandler();add menu for new row , check if enableAddRow is set to true or not set
if(this.state.get("gridOptions")
&& this.state.get("gridOptions").enabledAddRow != undefined
&& this.state.get("gridOptions").enabledAddRow == true ){
this.editor = new my.GridControl()
this.elSidebar = this.editor.$el
this.listenTo(this.editor.state, 'change', function(){
this.model.records.add(new recline.Model.Record())
});
}
},
onRecordChanged: function(record) {Ignore if the grid is not yet drawn
if (!this.grid) {
return;
}Let’s find the row corresponding to the index
var row_index = this.grid.getData().getModelRow( record );
this.grid.invalidateRow(row_index);
this.grid.getData().updateItem(record, row_index);
this.grid.render();
},
render: function() {
var self = this;
var options = _.extend({
enableCellNavigation: true,
enableColumnReorder: true,
explicitInitialization: true,
syncColumnCellResize: true,
forceFitColumns: this.state.get('fitColumns')
}, self.state.get('gridOptions'));We need all columns, even the hidden ones, to show on the column picker
var columns = [];custom formatter as default one escapes html plus this way we distinguish between rendering/formatting and computed value (so e.g. sort still works …) row = row index, cell = cell index, value = value, columnDef = column definition, dataContext = full row values
var formatter = function(row, cell, value, columnDef, dataContext) {
if(columnDef.id == "del"){
return self.templates.deleterow
}
var field = self.model.fields.get(columnDef.id);
if (field.renderer) {
return field.renderer(value, field, dataContext);
} else {
return value
}
};we need to be sure that user is entering a valid input , for exemple if field is date type and field.format =’YY-MM-DD’, we should be sure that user enter a correct value
var validator = function(field) {
return function(value){
if (field.type == "date" && isNaN(Date.parse(value))){
return {
valid: false,
msg: "A date is required, check field field-date-format"
};
} else {
return {valid: true, msg :null }
}
}
};Add column for row reorder support
if (this.state.get("gridOptions") && this.state.get("gridOptions").enableReOrderRow == true) {
columns.push({
id: "#",
name: "",
width: 22,
behavior: "selectAndMove",
selectable: false,
resizable: false,
cssClass: "recline-cell-reorder"
})
}Add column for row delete support
if (this.state.get("gridOptions") && this.state.get("gridOptions").enabledDelRow == true) {
columns.push({
id: 'del',
name: '',
field: 'del',
sortable: true,
width: 38,
formatter: formatter,
validator:validator
})
}
function sanitizeFieldName(name) {
var sanitized = $(name).text();
return (name !== sanitized && sanitized !== '') ? sanitized : name;
}
_.each(this.model.fields.toJSON(),function(field){
var column = {
id: field.id,
name: sanitizeFieldName(field.label),
field: field.id,
sortable: true,
minWidth: 80,
formatter: formatter,
validator:validator(field)
};
var widthInfo = _.find(self.state.get('columnsWidth'),function(c){return c.column === field.id;});
if (widthInfo){
column.width = widthInfo.width;
}
var editInfo = _.find(self.state.get('columnsEditor'),function(c){return c.column === field.id;});
if (editInfo){
column.editor = editInfo.editor;
} else {guess editor type
var typeToEditorMap = {
'string': Slick.Editors.LongText,
'integer': Slick.Editors.IntegerEditor,
'number': Slick.Editors.Text,TODO: need a way to ensure we format date in the right way Plus what if dates are in distant past or future … (?) ‘date’: Slick.Editors.DateEditor,
'date': Slick.Editors.Text,
'boolean': Slick.Editors.YesNoSelectEditorTODO: (?) percent …
};
if (field.type in typeToEditorMap) {
column.editor = typeToEditorMap[field.type]
} else {
column.editor = Slick.Editors.LongText;
}
}
columns.push(column);
});Restrict the visible columns
var visibleColumns = _.filter(columns, function(column) {
return _.indexOf(self.state.get('hiddenColumns'), column.id) === -1;
});Order them if there is ordering info on the state
if (this.state.get('columnsOrder') && this.state.get('columnsOrder').length > 0) {
visibleColumns = visibleColumns.sort(function(a,b){
return _.indexOf(self.state.get('columnsOrder'),a.id) > _.indexOf(self.state.get('columnsOrder'),b.id) ? 1 : -1;
});
columns = columns.sort(function(a,b){
return _.indexOf(self.state.get('columnsOrder'),a.id) > _.indexOf(self.state.get('columnsOrder'),b.id) ? 1 : -1;
});
}Move hidden columns to the end, so they appear at the bottom of the column picker
var tempHiddenColumns = [];
for (var i = columns.length -1; i >= 0; i--){
if (_.indexOf(_.pluck(visibleColumns,'id'),columns[i].id) === -1){
tempHiddenColumns.push(columns.splice(i,1)[0]);
}
}
columns = columns.concat(tempHiddenColumns);Transform a model object into a row
function toRow(m) {
var row = {};
self.model.fields.each(function(field) {
var render = "";when adding row from slickgrid the field value is undefined
if(!_.isUndefined(m.getFieldValueUnrendered(field))){
render =m.getFieldValueUnrendered(field)
}
row[field.id] = render
});
return row;
}
function RowSet() {
var models = [];
var rows = [];
this.push = function(model, row) {
models.push(model);
rows.push(row);
};
this.getLength = function() {return rows.length; };
this.getItem = function(index) {return rows[index];};
this.getItemMetadata = function(index) {return {};};
this.getModel = function(index) {return models[index];};
this.getModelRow = function(m) {return _.indexOf(models, m);};
this.updateItem = function(m,i) {
rows[i] = toRow(m);
models[i] = m;
};
}
var data = new RowSet();
this.model.records.each(function(doc){
data.push(doc, toRow(doc));
});
this.grid = new Slick.Grid(this.el, data, visibleColumns, options);Column sorting
var sortInfo = this.model.queryState.get('sort');
if (sortInfo){
var column = sortInfo[0].field;
var sortAsc = sortInfo[0].order !== 'desc';
this.grid.setSortColumn(column, sortAsc);
}
if (this.state.get("gridOptions") && this.state.get("gridOptions").enableReOrderRow) {
this._setupRowReordering();
}
this._slickHandler.subscribe(this.grid.onSort, function(e, args){
var order = (args.sortAsc) ? 'asc':'desc';
var sort = [{
field: args.sortCol.field,
order: order
}];
self.model.query({sort: sort});
});
this._slickHandler.subscribe(this.grid.onColumnsReordered, function(e, args){
self.state.set({columnsOrder: _.pluck(self.grid.getColumns(),'id')});
});
this.grid.onColumnsResized.subscribe(function(e, args){
var columns = args.grid.getColumns();
var defaultColumnWidth = args.grid.getOptions().defaultColumnWidth;
var columnsWidth = [];
_.each(columns,function(column){
if (column.width != defaultColumnWidth){
columnsWidth.push({column:column.id,width:column.width});
}
});
self.state.set({columnsWidth:columnsWidth});
});
this._slickHandler.subscribe(this.grid.onCellChange, function (e, args) {We need to change the model associated value
var grid = args.grid;
var model = data.getModel(args.row);
var field = grid.getColumns()[args.cell].id;
var v = {};
v[field] = args.item[field];
model.set(v);
});
this._slickHandler.subscribe(this.grid.onClick,function(e, args){try catch , because this fail in qunit , but no error on browser.
try{e.preventDefault()}catch(e){}The cell of grid that handle row delete is The first cell (0) if The grid ReOrder is not present ie enableReOrderRow == false else it is The the second cell (1) , because The 0 is now cell that handle row Reoder.
var cell =0
if(self.state.get("gridOptions")
&& self.state.get("gridOptions").enableReOrderRow != undefined
&& self.state.get("gridOptions").enableReOrderRow == true ){
cell =1
}
if (args.cell == cell && self.state.get("gridOptions").enabledDelRow == true){We need to delete the associated model
var model = data.getModel(args.row);
model.destroy()
}
}) ;
var columnpicker = new Slick.Controls.ColumnPicker(columns, this.grid,
_.extend(options,{state:this.state}));
if (self.visible){
self.grid.init();
self.rendered = true;
} else {Defer rendering until the view is visible
self.rendered = false;
}
return this;
},Row reordering support based on https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example9-row-reordering.html
_setupRowReordering: function() {
var self = this;
self.grid.setSelectionModel(new Slick.RowSelectionModel());
var moveRowsPlugin = new Slick.RowMoveManager({
cancelEditOnDrag: true
});
moveRowsPlugin.onBeforeMoveRows.subscribe(function (e, data) {
for (var i = 0; i < data.rows.length; i++) {no point in moving before or after itself
if (data.rows[i] == data.insertBefore || data.rows[i] == data.insertBefore - 1) {
e.stopPropagation();
return false;
}
}
return true;
});
moveRowsPlugin.onMoveRows.subscribe(function (e, args) {
var extractedRows = [], left, right;
var rows = args.rows;
var insertBefore = args.insertBefore;
var data = self.model.records.toJSON()
left = data.slice(0, insertBefore);
right= data.slice(insertBefore, data.length);
rows.sort(function(a,b) { return a-b; });
for (var i = 0; i < rows.length; i++) {
extractedRows.push(data[rows[i]]);
}
rows.reverse();
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
if (row < insertBefore) {
left.splice(row, 1);
} else {
right.splice(row - insertBefore, 1);
}
}
data = left.concat(extractedRows.concat(right));
var selectedRows = [];
for (var i = 0; i < rows.length; i++)
selectedRows.push(left.length + i);
self.model.records.reset(data)
});register The plugin to handle row Reorder
if(this.state.get("gridOptions") && this.state.get("gridOptions").enableReOrderRow) {
self.grid.registerPlugin(moveRowsPlugin);
}
},
remove: function () {
this._slickHandler.unsubscribeAll();
Backbone.View.prototype.remove.apply(this, arguments);
},
show: function() {If the div is hidden, SlickGrid will calculate wrongly some sizes so we must render it explicitly when the view is visible
if (!this.rendered){
if (!this.grid){
this.render();
}
this.grid.init();
this.rendered = true;
}
this.visible = true;
},
hide: function() {
this.visible = false;
}
});Add new grid Control to display a new row add menu bouton It display a simple side-bar menu ,for user to add new row to grid
my.GridControl= Backbone.View.extend({
className: "recline-row-add",Template for row edit menu , change it if you don’t love
template: '<h1><button href="#" class="recline-row-add btn btn-default">Add row</button></h1>',
initialize: function(options){
var self = this;
_.bindAll(this, 'render');
this.state = new recline.Model.ObjectState();
this.render();
},
render: function() {
var self = this;
this.$el.html(this.template)
},
events : {
"click .recline-row-add" : "addNewRow"
},
addNewRow : function(e){
e.preventDefault()
this.state.trigger("change")
}
});
})(jQuery, recline.View);
/*
* Context menu for the column picker, adapted from
* http://mleibman.github.com/SlickGrid/examples/example-grouping
*
*/
(function ($) {
function SlickColumnPicker(columns, grid, options) {
var $menu;
var columnCheckboxes;
var defaults = {
fadeSpeed:250
};
function init() {
grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
options = $.extend({}, defaults, options);
$menu = $('<ul class="dropdown-menu slick-contextmenu" style="display:none;position:absolute;z-index:20;" />').appendTo(document.body);
$menu.bind('mouseleave', function (e) {
$(this).fadeOut(options.fadeSpeed);
});
$menu.bind('click', updateColumn);
}
function handleHeaderContextMenu(e, args) {
e.preventDefault();
$menu.empty();
columnCheckboxes = [];
var $li, $input;
for (var i = 0; i < columns.length; i++) {
$li = $('<li />').appendTo($menu);
$input = $('<input type="checkbox" />').data('column-id', columns[i].id).attr('id','slick-column-vis-'+columns[i].id);
columnCheckboxes.push($input);
if (grid.getColumnIndex(columns[i].id) !== null) {
$input.attr('checked', 'checked');
}
$input.appendTo($li);
$('<label />')
.text(columns[i].name)
.attr('for','slick-column-vis-'+columns[i].id)
.appendTo($li);
}
$('<li/>').addClass('divider').appendTo($menu);
$li = $('<li />').data('option', 'autoresize').appendTo($menu);
$input = $('<input type="checkbox" />').data('option', 'autoresize').attr('id','slick-option-autoresize');
$input.appendTo($li);
$('<label />')
.text('Force fit columns')
.attr('for','slick-option-autoresize')
.appendTo($li);
if (grid.getOptions().forceFitColumns) {
$input.attr('checked', 'checked');
}
$menu.css('top', e.pageY - 10)
.css('left', e.pageX - 10)
.fadeIn(options.fadeSpeed);
}
function updateColumn(e) {
var checkbox;
if ($(e.target).data('option') === 'autoresize') {
var checked;
if ($(e.target).is('li')){
checkbox = $(e.target).find('input').first();
checked = !checkbox.is(':checked');
checkbox.attr('checked',checked);
} else {
checked = e.target.checked;
}
if (checked) {
grid.setOptions({forceFitColumns:true});
grid.autosizeColumns();
} else {
grid.setOptions({forceFitColumns:false});
}
options.state.set({fitColumns:checked});
return;
}
if (($(e.target).is('li') && !$(e.target).hasClass('divider')) ||
$(e.target).is('input')) {
if ($(e.target).is('li')){
checkbox = $(e.target).find('input').first();
checkbox.attr('checked',!checkbox.is(':checked'));
}
var visibleColumns = [];
var hiddenColumnsIds = [];
$.each(columnCheckboxes, function (i, e) {
if ($(this).is(':checked')) {
visibleColumns.push(columns[i]);
} else {
hiddenColumnsIds.push(columns[i].id);
}
});
if (!visibleColumns.length) {
$(e.target).attr('checked', 'checked');
return;
}
grid.setColumns(visibleColumns);
options.state.set({hiddenColumns:hiddenColumnsIds});
}
}
init();
}Slick.Controls.ColumnPicker
$.extend(true, window, {
Slick: {
Controls: {
ColumnPicker: SlickColumnPicker
}
}
});
})(jQuery);