Как получить slickgrid div для изменения размера таблицы

Надеюсь, у нас есть некоторые пользователи, знакомые с slickGrid, которые видят, как StackOverflow также использует это 🙂

У меня есть HTML, содержащий мой slickGrid следующим образом:

PHPExcel очень медленный - способы улучшения?

<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

Я хочу, чтобы мой slickGrid собирал данные, а затем автоматически изменял размер div, чтобы включить обновленную сетку. В настоящее время выясняется, что размер div должен быть установлен статически? Если я не устанавливаю значения для высоты div "myGrid" , он просто устанавливает ее высоту в 0. Я хочу, чтобы div расширялся с размером загружаемой сетки.

Документация для slickgrid на gitHub ( https://github.com/mleibman/SlickGrid/wiki/_pages ) крайне ограничена (если честно, автор это признает). У меня также были проблемы с этой темой в Google.

Я знаю, что это программное обеспечение, но на самом деле мы надеемся, что у нас есть какой-то гуру-смайлика, так как этот инструмент кажется потрясающим!

Вы можете использовать опцию autoHeight для достижения этого.

  options = { ... autoHeight: true };

Содержащий div будет расширяться, чтобы удерживать всю сетку, избегая необходимости в полосе прокрутки.

Здесь вы можете найти пример.

Я предлагаю добавить следующий код в onpagingInfoChanged

 dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) { //...... ///****************************************************** var divSize = 2 + (options.rowHeight * (pagingInfo.pageSize +1)); $("#myGrid").css( 'height' , divSize+'px' ) grid.resizeCanvas() ///******************************************************* });

Будучи немного ленив, я добавил 2 px к высоте, чтобы гарантировать, что VScrollbar не появится, но я уверен, что вы можете найти что-то более приятное.

К сожалению, autoHeight и пейджинг не могут использоваться вместе. Если вы хотите использовать пейджинг, вы можете автоматически настроить высоту таблицы следующим образом (обязательно сделайте это ПЕРЕД предоставлением данных):

 // Determine the total width of the grid div element var gridWidth = 0; for( i in columns ) { if( columns[i].width != null && columns[i].width != 0 ) { // Use the specified width gridWidth += columns[i].width; } else { // If the column width is not specified, or is zero, try to use the default column width if( columns[i].defaultColumnWidth == null ) // If default also does not exist gridWidth += 80; // Pick an arbitrary default width (could replace with CSS property) else gridWidth += columns[i].defaultColumnWidth; } } // Calculate the height of the Div by adding the values of the header row height and the row height * # rows var rowH = (options.rowHeight != null ? options.rowHeight : 25); // If no rowHeight is specified, use the default size 25 (could be set by CSS) var headerH = 0; // First, determine whether to account for the header row if( options.showHeaderRow == null || options.showHeaderRow == true ) { // If so, use specified height, or default height if( options.headerRowHeight == null ) headerH = 25; else headerH = options.headerRowHeight; } // Set the table size var divSize = (json.length * rowH) + headerH + 1; $j("#myGrid").css( 'height' , divSize+'px' ) .css( 'width' , gridWidth+'px' );