Include the following in the head of your html
CSS
SlickGrid/slick.grid.css - at a minimum so your columns don't overlapSlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css - to make it pretty
SlickGrid/examples/examples.css - to make it even prettier
JavaScript
SlickGrid/lib/jquery-1.7.min.js - this is a jQuery plugin afterallSlickGrid/lib/jquery.event.drag-2.0.min.js - dependency of Grid class
SlickGrid/slick.core.js - core SlickGrid goodness
SlickGrid/slick.grid.js - Grid class
Create a div to hold the grid.
Make sure you include an ID and height. If there is no height, SlickGrid can't determine how to display the rows and you'll end up seeing nothing.<div id="grid" style="width:600px; height:200px;"></div>
Define the grid's columns.
var columns = [ {id: "column_1_id", name: "Column 1 Label", field: "column_1"}, {id: "column_2_id", name: "Column 2 Label", field: "column_2"}, {id: "column_3_id", name: "Column 3 Label", field: "column_3"}, {id: "column_4_id", name: "Column 4 Label", field: "column_4"}, {id: "column_5_id", name: "Column 5 Label", field: "column_5"}, ];
Gather the data for the grid as an array. Just spoof it for now.
var data = [], i = 50; while(i--){ data[i] = { column_1: 'column 1, row ' + i, column_2: 'column 2, row ' + i, column_3: 'column 3, row ' + i, column_4: 'column 4, row ' + i, column_5: 'column 5, row ' + i }; };
Set the grid's options.
var options = { enableColumnReorder: false, enableGridNavigation: false };
When the DOM's ready, instantiate a new SlickGrid.
Since you're obviously using jQuery, you can just call all this as a .ready() handler.var grid = new Slick.Grid('#grid', data, columns, options);
Hi
ReplyDeleteGood article..Very Simple explanation.
As you told It's more of a completely incomprehensive guide on how to get started messing around with it.
Can you please provide features or advantages of this and also what we can do more with it.