I recently needed a full width and height dynamic grid and couldn't quite find a cots solution. But with a bit of tweaking, it was possible to get what I wanted from gridstack.
Last active
November 25, 2024 12:11
-
-
Save wheresjames/3689d262f2a0edf98eee0b6ad781e511 to your computer and use it in GitHub Desktop.
Full width and height dynamic grid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" rel="stylesheet"> | |
| <style> | |
| body | |
| { | |
| min-width: 800px; | |
| } | |
| .frame | |
| { | |
| top: 60px; | |
| left: 20px; | |
| right: 20px; | |
| bottom: 20px; | |
| padding: 20px; | |
| min-width: 400px; | |
| min-height: 300px; | |
| position: absolute; | |
| border: 4px dashed #000; | |
| } | |
| .tile | |
| { | |
| position: absolute; | |
| background: #444; | |
| box-shadow: 0px 0px 10px #f00; | |
| border: 2px solid #f00; | |
| border-radius: 10px; | |
| } | |
| .del-tile | |
| { | |
| height: 32px; | |
| width: 32px; | |
| background: #600; | |
| color: #fff; | |
| border-radius: 5px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| font: bold 20px arial; | |
| } | |
| </style> | |
| <script id="tmpl_tile" type="text/x-tile"> | |
| <div> | |
| <div class="grid-stack-item-content tile"> | |
| <div class="del-tile" onclick="delTile(this)"> | |
| X | |
| </div> | |
| </div> | |
| <div/> | |
| </script> | |
| <body> | |
| <button id="addTile" type="button">Add Tile</button> | |
| <button id="saveGrid" type="button">Serialize</button> | |
| <button id="loadGrid" type="button">Deserialize</button> | |
| <button id="resetGrid" type="button">Reset</button> | |
| <input id="jsonStr" type="edit"> | |
| <div class="frame"><div id="grid" class="grid-stack grid-stack-12"></div></div> | |
| </body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.3/lodash.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js"></script> | |
| <script> | |
| function MyGrid(id) | |
| { | |
| var width = 0; | |
| var height = 0; | |
| var cols = 12; | |
| var rows = 12; | |
| var vmargin = 20; | |
| var lastHeight = 0; | |
| var gridObj = 0; | |
| var options = { | |
| width: cols, | |
| height: rows, | |
| float: false, | |
| animate: true, | |
| disableResize: false, | |
| disableDrag: false, | |
| cellHeight: 'auto', | |
| cellHeightUnit: 'px', | |
| removable: '', | |
| removeTimeout: 100, | |
| verticalMargin: vmargin, | |
| acceptWidgets: '.grid-stack-item', | |
| resizable: { handles: 'e, se, s, sw, w' }, | |
| alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) | |
| }; | |
| function init() | |
| { | |
| $(id).gridstack(options); | |
| gridObj = $(id).data('gridstack'); | |
| gridObj._updateHeightsOnResize = function() { resize(); }; | |
| gridObj.onResizeHandler(); | |
| } | |
| function resize() | |
| { | |
| width = $(id).parent().width(); | |
| height = $(id).parent().height() - ((rows - 1) * vmargin); | |
| if (0 >= height) | |
| { | |
| setTimeout(gridObj.onResizeHandler, 1000); | |
| return; | |
| } | |
| if (lastHeight == height) | |
| return; | |
| lastHeight = height; | |
| gridObj.cellHeight(parseInt(height / rows) + 'px'); | |
| } | |
| function addTile(tmpl_tile, x, y, w, h) | |
| { | |
| x = x ? x : 0; | |
| y = y ? y : 0; | |
| w = w ? w : 4; | |
| h = h ? h : 4; | |
| var tile = $($(tmpl_tile).text()); | |
| gridObj.addWidget(tile, x, y, w, h); | |
| return tile; | |
| } | |
| function removeTile(h) | |
| { | |
| gridObj.removeWidget($(h).closest('.grid-stack-item')); | |
| } | |
| function save() | |
| { | |
| return $.makeArray($(id + ' > .grid-stack-item:visible')).map(function(v) | |
| { | |
| var n = $(v).data('_gridstack_node'); | |
| return n ? { x: n.x, y: n.y, width: n.width, height: n.height } : null; | |
| }); | |
| } | |
| function load(data, tmpl_tile) | |
| { | |
| gridObj.removeAll(); | |
| $.each(data, function(k, v) { addTile(tmpl_tile, v.x, v.y, v.width, v.height); }); | |
| } | |
| function clear() | |
| { | |
| gridObj.removeAll(); | |
| } | |
| init(); | |
| this.resize = resize; | |
| this.addTile = addTile; | |
| this.removeTile = removeTile; | |
| this.save = save; | |
| this.load = load; | |
| this.clear = clear; | |
| } | |
| var myGrid = 0; | |
| $(function() | |
| { | |
| var tmpl = [ | |
| {"x":0,"y":4,"width":4,"height":4}, | |
| {"x":0,"y":8,"width":4,"height":4}, | |
| {"x":0,"y":0,"width":4,"height":4}, | |
| {"x":4,"y":0,"width":8,"height":4}, | |
| {"x":4,"y":4,"width":8,"height":8} | |
| ]; | |
| myGrid = new MyGrid('#grid', 'tile_'); | |
| myGrid.load(tmpl, '#tmpl_tile'); | |
| }); | |
| $('#addTile').on('click', function() { myGrid.addTile('#tmpl_tile'); }); | |
| function delTile(tile) { myGrid.removeTile(tile); } | |
| $('#resetGrid').on('click', function() { myGrid.clear(); }); | |
| $('#saveGrid').on('click', function() | |
| { | |
| $('#jsonStr').val(JSON.stringify(myGrid.save())); | |
| }); | |
| $('#loadGrid').on('click', function() | |
| { | |
| myGrid.load(JSON.parse($('#jsonStr').val()), '#tmpl_tile'); | |
| }); | |
| $('#load').on('click', function() | |
| { | |
| $('#jsonStr').val(JSON.stringify(myGrid.save())); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment