Comment obtenir slickgrid div pour redimensionner à la taille de la table

J'espère que nous aurons quelques utilisateurs familiers avec slickGrid voyant que la façon dont StackOverflow l'utilise aussi 🙂

J'ai une page HTML contenant mon slickGrid comme suit:

  <div style="position:relative; overflow:visible; width:600px; margin:25px 0 0 0;">
<div id="myGrid" style="width:100%;overflow:visible; min-height:100px; max-height:300px;"></div>
</div>
<div class="options-panel">
<h2>Demonstrates:</h2>
<ul>
<li>adding basic keyboard navigation and editing</li>
<li>custom editors and validators</li>
<li>auto-edit settings</li>
</ul>
<h2>Options:</h2>
<button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button>
&nbsp;
<button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button>
</div>
<script  type="text/javascript" language="javascript" src="./js/slickGrid/lib/firebugx.js"></script>
<!-- <script src="js/slickGrid/lib/jquery-1.7.min.js"></script>-->
<script src="js/slickGrid/lib/jquery-ui-1.8.16.custom.min.js.php"></script>
<script src="js/slickGrid/lib/jquery.event.drag-2.0.min.js"></script>
<script src="js/slickGrid/slick.core.js"></script>
<script src="js/slickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="js/slickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="js/slickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="js/slickGrid/slick.formatters.js"></script>
<script src="js/slickGrid/slick.editors.js"></script>
<script src="js/slickGrid/slick.grid.js"></script>
<script>
function requiredFieldValidator(value) {
if (value == null || value == undefined || !value.length) {
return {valid: false, msg: "This is a required field"};
} else {
return {valid: true, msg: null};
}
}
var grid;
var data = [];
var columns = [
{id: "id", name: "Id", field: "id", width: 20, minWidth: 20, maxWidth:20, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, sortable: true},
{id: "date", name: "Date", field: "date", minWidth: 80, editor: Slick.Editors.Date, sortable: true},
{id: "venue", name: "Venue", field: "venue", width: 120, minWidth:120, editor: Slick.Editors.Text, sortable: true},
{id: "event", name: "Event", field: "event", width: 180, minWidth:180, editor: Slick.Editors.Text, sortable: true},
{id: "description", name: "Additional", field: "desc", width: 180, minWidth:180, editor: Slick.Editors.Text, sortable: true},
{id: "visible", name: "Visible", field: "visible", width: 20, minWidth: 20, cssClass: "cell-effort-driven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox, sortable: true}
];
var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true,
multiColumnSort: true
};
$(function () {
for (var i = 0; i < 6; i++) {
var d = (data[i] = {});
d["id"] = i;
d["date"] = "06/31/2012";
d["venue"] = "Sample Venue";
d["event"] = "Sample Event";
d["desc"] = "$45 Door";
d["visible"] = (i % 5 == 0);
}
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
grid.onAddNewRow.subscribe(function (e, args) {
var item = args.item;
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
});
grid.onSort.subscribe(function (e, args) {
var cols = args.sortCols;
data.sort(function (dataRow1, dataRow2) {
for (var i = 0, l = cols.length; i < l; i++) {
var field = cols[i].sortCol.field;
var sign = cols[i].sortAsc ? 1 : -1;
var value1 = dataRow1[field], value2 = dataRow2[field];
var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
if (result != 0) {
return result;
}
}
return 0;
});
grid.invalidate();
grid.render();
});
})
</script>
<hr />EOP

Est ce que je veux pour mon slickGrid de recueillir des données, alors la div redimensionner automatiquement pour englober la mise à jour de la grille. Actuellement, il semble que la taille de la div doit être définie de manière statique? Si je n'ai pas de définir des valeurs pour la hauteur de la div "myGrid", elle ne fait qu', c'est la hauteur à 0. Je veux la div à se développer avec la taille de la grille, il se charge.

La documentation pour slickgrid sur gitHub ( https://github.com/mleibman/SlickGrid/wiki/_pages ) est extrêmement limitée (pour être juste, l'auteur le reconnaît). J'ai aussi eu beaucoup de mal avec ce sujet sur google aussi.

Je sais que c'est un logiciel spécifique, mais espérons vraiment que nous avons une certaine slickGrid Guru est là que cet outil semble incroyable!

OriginalL'auteur MaurerPower | 2012-05-31