Как получить Slickgrid div, чтобы изменить размер с размером таблицы
Я надеюсь, что у нас есть некоторые пользователи, знакомые с slickGrid, которые видят, как StackOverflow также использует его :)
У меня есть HTML, содержащий мою slickGrid следующим образом:
<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
Я хочу, чтобы мой slickGrid собирал данные, а затем автоматически изменял размер div, чтобы охватить обновленную сетку. В настоящее время кажется, что размер div должен быть установлен статически? Если я не установлю значения высоты div"myGrid"
Он просто устанавливает его высоту на 0. Я хочу, чтобы div расширялся с размером загружаемой сетки.
Документация для slickgrid на gitHub (https://github.com/mleibman/SlickGrid/wiki/_pages ) крайне ограничен (честно говоря, автор признает это). У меня также было много проблем с этой темой в Google.
Я знаю, что это специфично для программного обеспечения, но очень надеюсь, что у нас есть некоторые SlickGrid Guru, поскольку этот инструмент кажется удивительным!