utils.grid.js
Sometimes a layout needs a re-arrangement, or a dashboard needs some more important reports to be moved to the top... that's when utils.grid.js comes into play
Common methods used in below examples
Editable Grid
var $grid_wrapper1 = $('#grid-wrapper1');
var items = [
{ x:0, y:0, width:3, height:1, content:'report #1' },
{ x:3, y:0, width:3, height:1, content:'report #2' },
{ x:6, y:0, width:3, height:1, content:'report #3' },
{ x:9, y:0, width:3, height:1, content:'report #4' },
{ x:0, y:1, width:12, height:1, content:'report #5' },
{ x:0, y:2, width:12, height:1, content:'report #6' }
];
items = _.map(items,function(item){
var $item = $('');
if ('content' in item)
$item.html(item.content);
//lets add the grid meta data
$item.data('grid', {
x: item.x,
y: item.y,
height: item.height,
width: item.width,
min_width: 3,
min_height: 1
});
$item.data('origdata',item); //this can contain any type of additional data
return $item;
});
var Grid_1 = new UTILS.Grid({
target: $grid_wrapper1,
items: items,
onEnableEditing: onEnableEditing,
onDisableEditing: onDisableEditing
}).show();
Locked Grid (presentation mode)
In presentation mode the grid gets converted to a true Bootstrap layout. In other words all elements will be undraggable, will have position:relative, and are re-rendered into simple Bootstrap grid blocks.
var $grid_wrapper2 = $('#grid-wrapper2');
var items = [
{ x:0, y:0, width:3, height:1, content:'report #1' },
{ x:3, y:0, width:3, height:1, content:'report #2' },
{ x:6, y:0, width:3, height:1, content:'report #3' },
{ x:9, y:0, width:3, height:1, content:'report #4' },
{ x:0, y:1, width:12, height:1, content:'report #5' },
{ x:0, y:2, width:12, height:1, content:'report #6' }
];
var Grid_2 = new UTILS.Grid({
target: $grid_wrapper2,
presentation: true,
items: items,
onEnableEditing: onEnableEditing,
onDisableEditing: onDisableEditing
}).show();
API
Option |
Required |
Default |
Description |
---|---|---|---|
target | required | null |
DOM elm where the grid will be inserted |
items | required |
//items
[
{ x:0, y:0, width:3, height:1, content:'report #1' },
{ x:3, y:0, width:3, height:1, content:'report #2' },
...
]
//each field will have the following structure
|
Items that will be converted into cells on the grid. You can either pass in a JSON object like shown
in the examples above, or you can create your own jQuery object but make sure the most outer wrapper
contains the |
width | optional | 12 |
Grid width in terms of columns |
collapse | optional | false |
Sets collapse mode (only works when presentation mode is enabled) If enabled, empty rows will be hidden and cells will be moved up |
presentation | optional | false |
Sets the presentation mode If enabled cells will be adjusted based on their true content using Bootstap layout. The items are static and cannot be re-arranged or edited. |
Methods
Method |
Default |
Repeat |
Description |
---|---|---|---|
onShow | null |
REPEAT | Triggers when the grid is shown |
onHide | null |
REPEAT | Triggers when the grid is hidden |
onChange | null |
REPEAT | Triggers when any item is moved or resized |
onRenderedGridForPresentation | null |
REPEAT | Triggers when the grid completed rendering all items |
onEnableEditing | null |
REPEAT | Triggers when the grid gets enabled for editing (presentation mode off) |
onDisableEditing | null |
REPEAT | Triggers when the grid gets disabled for editing (presentation mode on) |