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>
<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
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser le
autoHeight
option pour atteindre cet objectif.La div contenant étendra à l'ensemble de la grille en évitant la nécessité d'une barre de défilement.
Vous pouvez trouver un exemple ici.
OriginalL'auteur njr101
Je vous suggère d'ajouter le code suivant à la onpagingInfoChanged
Un peu paresseux, j'ai ajouté les 2 px à la hauteur pour assurer la VScrollbar n'apparaît pas, mais je suis sûr que vous pouvez trouver quelque chose de plus agréable.
OriginalL'auteur bmg
Malheureusement, autoHeight et de la recherche ne peut pas être utilisés ensemble. Si vous souhaitez utiliser la pagination, vous pouvez vous auto-ajuster la hauteur de la table comme suit (assurez-vous de le faire AVANT de rendre les données):
OriginalL'auteur thephatp