如何使Slickgrid div调整表的大小 [英] How to get slickgrid div to resize with size of table

问题描述

我希望我们有一些熟悉slickGrid的用户看到StackOverflow也如何使用它:)

I hope we have some users familiar with slickGrid seeing as how StackOverflow uses it also :)

我有一个包含我的slickGrid的HTML，如下所示:

I have a HTML containing my slickGrid as follows:

  <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随加载的网格的大小扩展.

What I want is for my slickGrid to gather data, then have the div automatically resize to encompass the updated grid. Currently it appears that the div size must be set statically? If I don't set values for the height of div "myGrid", it just sets it's height to 0. I want the div to expand with the size of the grid it loads.

有关gitHub上slickgrid的文档( https://github.com/mleibman/SlickGrid/wiki /_pages )非常有限(公平地说，作者承认这一点).我在Google上使用此主题也遇到了很多麻烦.

The documentation for slickgrid on gitHub ( https://github.com/mleibman/SlickGrid/wiki/_pages ) is extremely limited (to be fair the author acknowledges this). I've also had a lot of trouble with this topic on google also.

我知道它是特定于软件的，但是真的希望我们能有一些slickGrid Guru，因为此工具似乎很棒！

I know it's software specific, but really hoping we have some slickGrid Guru's out there as this tool seems amazing!

推荐答案

您可以使用autoHeight选项来实现.

You can use the autoHeight option to achieve this.

  options = {
    ...
    autoHeight: true
  };

包含的div将扩展以容纳整个网格，而无需滚动条.

The containing div will expand to hold the entire grid avoiding the need for a scrollbar.

您可以在此处找到示例.

这篇关于如何使Slickgrid div调整表的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！