Minimal Dynamic Grid Layout Generator With jQuery - Gridagram

Gridagram is a very small jQuery plugin that lets you dynamically generate and manage grid layouts in an easy way.

How to use it:

1. Load the latest version of jQuery library together with the jQuery Gridagram plugin's files into the document.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="jquery.gridagram.js"></script>
<link rel="stylesheet" href="gridagram.css">

2. Create an empty container in which you wish to generate a dynamic grid layout.

<div id="results"></div>

3. Generate a basic grid layout using simple data array with custom titles and body content.

var data = [ 
    { title: "a-title", body: "a-body"},
    { title: "b-title", body: "b-body"},
    { title: "c-title", body: "c-body"}
];

$("#results").gridagram(data);

4. Simple data array with unusual content fields

var data = [ 
    { a: "a-title", b: { c: "a-body" } },
    { a: "b-title", b: { c: "b-body" } },
    { a: "c-title", b: { c: "c-body" } }
];

$("#results").gridagram(data, { 
    titleField: "a", 
    bodyField: function(e) { return e.b.c; }
});

5. Dynamic updates.

var data = [ {}, {}, {} ];

var grid = $("#results").gridagram(data);

grid.widgets[0].title("a");
grid.widgets[0].body("a body");

grid.widgets[1].title("b");
grid.widgets[1].body("b body");

grid.widgets[2].title("c");
grid.widgets[2].body("c body");

6. Dynamic IDs for widgets.

var data = [ 
    { id: "w1", title: "a title", body: "a body"}, 
    { id: "w2", title: "b title", body: "b body"}, 
    { id: "w3", title: "c title", body: "c body"}
];

var grid = $("#results").gridagram(data, { 
    widgetId: function(elem) { return elem.id }
});

$("#w2").find(".title").html("new title");

7. Dynamic IDs for widgets.

var data = [ 
    { id: "w1", title: "a title", body: "a body"}, 
    { id: "w2", title: "b title", body: "b body"}, 
    { id: "w3", title: "c title", body: "c body"}
];

var grid = $("#results").gridagram(data, { 
    widgetId: function(elem) { return elem.id }
});

$("#w2").find(".title").html("new title");

8. Complex example.

// make three grids

var grid1 = new Grid("#results1");
var grid2 = new Grid("#results2");
var grid3 = new Grid("#results3");

// grid1 adjusts all widgets to the same height

grid1.autoHeight = true;
grid1.empty();

// add three widgets to grid1
var g1w1 = new grid1.Widget("G1W1");
var g1w2 = new grid1.Widget("G1W2");
var g1w3 = new grid1.Widget("G1W3");

// grid1 widget1 autoadjusts its height
g1w1.autoStretch = true;    

// change the titles of the last two widgets in grid 1
g1w2.addTitle("Same Height");
g1w3.addTitle("Same Height");

g1w2.addLine("This should be same height as G1W1", "center");
g1w3.addLine("This should be same height as G1W1", "center");

// add four widgets to grid2
var g2w1 = new grid2.Widget("Grid 2 - Widget 1");
var g2w2 = new grid2.Widget("Grid 2 - Widget 2");
var g2w3 = new grid2.Widget("Grid 2 - Widget 3");
var g2w4 = new grid2.Widget("Grid 2 - Widget 4");

// fill up grid1 widget1 with lots of lines
// - it should increase its height automatically
for(var i=1; i<11; i++) { 
    g1w1.addLine("key-" + i + "-value-" + i, "green");
}

// add key-values to grid 2 widget 1
// addKeyValue(key, value, [ mesg, opts ]);

g2w1.addKeyValue("monday",1234);
g2w1.addKeyValue("tuesday",32);
g2w1.addKeyValue("wednesday",555);
g2w1.addKeyValue("thursday",398);
g2w1.addKeyValue("friday",745);

// add mixed types to grid 2 widget 2

g2w2.addKeyValue("monday",1234);
g2w2.addLine("lorem ipsum thingumy");
g2w2.addKeyValue("pi",3.141);
g2w2.addLine("lorem ipsum thingumy");
g2w3.addKeyValue("pi", 3.141, "this is pi", {});

// add six random height and colour widgets to grid3

var g3widgets = {};
colours = [ "red", "green", "orange" ];

for(var i=1; i<=6; i++) { 
    g3widgets[i] = new grid3.Widget("Random Height/Colour");
    g3widgets[i].cssHeight(Math.floor(100 + Math.random() * 50));
    g3widgets[i].addClass(colours[(Math.floor(Math.random() * 3))]);
}

9. Options and defaults.

width: 200,
height: 100,
titleField: "title",
bodyField: "body",
widgetId: null

---

This awesome jQuery plugin is developed by julianbrowne. For more Advanced Usages, please check the demo page or visit the official website.