3

StackOverflowがslickGridをどのように使用しているかを見て、slickGridに精通しているユーザーがいることを願っています:)

次のようにslickGridを含むHTMLがあります。

  <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を拡張する必要があります。

gitHub(https://github.com/mleibman/SlickGrid/wiki/_pages)のslickgridのドキュメントは非常に限られています(公平を期すために、作成者はこれを認めています)。私もグーグルでこのトピックで多くの問題を抱えています。

私はそれがソフトウェア固有であることを知っていますが、このツールは素晴らしいように見えるので、slickGridの達人がそこにいることを本当に望んでいます!

4

3 に答える 3

13

autoHeightオプションを使用してこれを実現できます。

  options = {
    ...
    autoHeight: true
  };

含まれているdivは、スクロールバーの必要性を回避して、グリッド全体を保持するように拡張されます。

ここに例があります。

于 2012-06-04T09:18:35.380 に答える
4

次のコードをonpagingInfoChangedに追加することをお勧めします

dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
//......

///******************************************************
    var divSize = 2 + (options.rowHeight * (pagingInfo.pageSize +1)); 
    $("#myGrid").css( 'height' , divSize+'px' )
    grid.resizeCanvas()
///*******************************************************

});

少し怠惰なので、VScrollbarが表示されないように、高さに2ピクセルを追加しましたが、もっと楽しいものを見つけられると確信しています。

于 2012-12-08T12:57:30.567 に答える
1

残念ながら、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' );
于 2012-08-23T04:46:53.513 に答える