25

コンテンツのサイズに応じて可変の行の高さを提供したいと思います。Slickgridで可能ですか？

例を教えてください。

4

10 に答える 10

14

これは可能ですが、簡単ではなく、パフォーマンスが低下する可能性があります。SlickGrid の仕組みでは、次の 2 つの質問に迅速に答えることができる必要があります。

  • 特定の行 X について、その行の上部オフセットは?
  • 与えられたオフセット Y について、そのオフセットにある行は?

静的な行の高さを使用する場合、これらの質問に答えるのは簡単です。ただし、動的な行の高さでは、いくつかの追加のデータ構造を維持する必要があります。

Slick.Grid.js で変更した内容は大まかに次のとおりです。

  • 行サイズを追跡する新しい配列を追加します。すべての行をデフォルト サイズに初期化する
  • セルの高さを設定する createCssRules の CSS ルールを削除します
  • 行内の各セルのレンダリングされた高さをチェックし、すべてのセルの高さを最大に設定するコードを renderRows の最後に追加します (高さを行サイズ配列に格納します)。また、現在の行より上の行の高さの合計に基づいて上部オフセットを調整する必要があります。
  • render の最後にコードを追加して、キャンバスのサイズをすべての行の高さの合計に変更します。
  • 行の高さの合計に基づいて上部と下部の行を返すように getViewport を更新します。
  • options.rowHeight が使用される場所は他にもいくつかあります。それらのいくつかは無視できますが、少なくとも、キャンバスのサイズを変更する必要がある場所はどこでも変更する必要があります。

これを実用的 (高性能) にするには、行の上部オフセットのキャッシュ (行サイズの合計のキャッシュ) も必要です。これにより、最初の質問の迅速な計算が可能になり、二分探索で 2 番目の質問に答えることができます。

それが役立つことを願っています。

于 2010-07-16T13:09:15.837 に答える
4

@Stephen Robinson の回答 here の助けを借りて、これをプロジェクトに実装しました。
興味のある方は、
https://github.com/vihari/Seaview/blob/version3.0/SlickGrid-master/slick.grid.jsを確認してください。
options.enableWrap を true に設定すると、上記のファイルで有効にできます。
ありがとうございました。

于 2013-08-15T14:15:45.603 に答える
3

これが質問の核心を満たしていないことはわかっていますが、現時点では最小限の労力で、現時点での私の要件を満たす簡単な解決策を決定しました。したがって、これは、他の人が同様に簡単な解決策を探している場合に備えてのものです.

値を変更すると行のサイズが変更される入力ボックスから始めました。ただし、スライダーを使用することに落ち着きました。実際のところ、グリッド内のデータが非常に少ないため (少量のデータと非常に少ない行であることが保証されています)、スライダーのスライドに合わせてグリッドのサイズを動的に変更します。これは非常に遅くなる可能性があるため、多くの人がこれはひどいアイデアだと言うでしょうが、繰り返しますが、私は非常に少量のデータを使用しています。

重要なのは、オプションで新しい rowHeight 値を設定してグリッドを再作成することです。

  1. jQuery UI を含める:
  2. スライダーと値の要素を作成します
  3. ページが読み込まれたときにグリッドが設定され、初期化されていることを確認してください。

  4. スライダーを処理し、グリッドを再作成するコードを追加します (または、すべてのスライド ティックで再描画したくない場合は、「スライド」関数にあるものを「停止」関数に移動することもできます)。

    $j( "#resizeRowSlider" ).slider({
      range:"min"
    , min: 50
    , max: 200
    , value: 50
    , create: function( even, ui ) {
        $j("rowResizeValue").html( "50" );
    }
    , slide: function( event, ui ) {
        $j( "rowResizeValue" ).html( ui.value );

        options.rowHeight = ui.value;

        // I do a manual resize; you could use autoHeight:true in grid options
        resizeGrid();

        grid = new Slick.Grid("#" + gridElemId, json, columns , options);
        grid.setSelectionModel(new Slick.RowSelectionModel() );

        refreshGrid(); // Handle invalidate, resizeCanvas
    }
    , stop: function( event, ui ) {
    }
});

また、これは行単位ではありませんが、今のところ私のニーズに合っていることに注意してください。理想的ではありませんが、機能します。さらに、オーバーフローなしで最初にグリッドをレンダリングする必要がある場合は、問題のテキストを取得して を追加するたびに非表示の div を作成しdisplay:table-cell、div の高さを取得して、その値を rowHeight のグリッド オプションに設定できます。次に、グリッドを作成 (または再作成) します。

于 2013-01-23T08:07:07.930 に答える
2

単純明快ですが、これは SlickGrid ではサポートされておらず、今後もサポートされない可能性があります。ごめん。

于 2010-05-10T20:18:08.753 に答える
2

github の JLynch7 による可変高さの実装もあります。

https://github.com/JLynch7/SlickGrid/tree/variableRowHeight

私が理解している限り、高さはユーザーによって設定され、行のセルの内容に基づいて自動的に計算されるわけではありません (example/example-variable-row-height-dataview.html のみを見ました)。

于 2013-09-24T07:20:59.747 に答える
1

上記のオプションの要約として、それらのどれも公式ではなく、サポートされており、本番環境に対応していません。doby-grid オプション (よりサポートされています) でさえ、まだ本番環境に対応していないとリストされています。

以下の間にも違いがあることに注意してください。

  • 行の高さは行ごとに個別に変更できます。
  • テキストは次の行に折り返すことができます。
  • 行の高さは、コンテンツに合わせて自動的に調整できます。

驚くべきことに、上記のすべての SlickGrid バリアント (および他の多くの DataGrid ライブラリ) を使用すると、上記の 1 つまたは 2 つを取得できますが、3 つすべてを取得することはできません。

正式にサポートされ、本番環境に対応していることにあまり関心がない場合は、上記の 3 つの SlickGrid バリアントをテストして得た印象を以下に示します。

海の眺め

  • ユーザーは、白のみを表示する問題、セルの編集でテストされていない問題 (警告) を報告しており、ページネーションが機能しない可能性があります (警告)。
  • デモの私のテストでは、テキストが折り返され、セルの高さが自動的に変更されることがわかりましたが、行/境界線が数ピクセルずれているというバグがあります。したがって、使用可能かもしれませんが、本番環境には対応していません。
  • ダウンロードして使ってみました。セル内のテキストの折り返しがあります-良いです。セルの高さの自動調整は非常に壊れている/不完全であるため、テキストの折り返しは実質的に役に立たなくなります (行の高さを修正しない限り、あまり良くありません)。セルの高さの自動調整を部分的に修正しましたが、さらに多くの作業が必要です。単純な作業ではありません。そのままでは機能しません。間違いなく生産準備ができていません。

Jリンチ7

  • ダウンロードせずに実行するデモはありません。
  • ダウンロードして使ってみました。バグがあり（機能させるために修正する必要がありました）、可変行の高さを追加しますが、テキストを折り返すようには見えず、テキストに基づいて行の高さを自動調整しません!. 積極的に維持されていません。あまり人気がないので、あまりサポートされていません。「行の高さの自動調整」機能が壊れているにもかかわらず、Seaviewはより高度なようです.

ドビーグリッド

  • アルファ版です - 本番環境には対応していません。かなりのフォークのようです - 多くの変更。
  • 私はそれを試してみました。始めるのは混乱しますが、うまくいきました。クッパが必要で、JS が必要です。
  • options.resizableRows は必要なものの半分です。行の高さを手動で動的に変更できます。しかし、コンテンツに合わせて行の高さを自動的にサイズ変更する機能はありません!!??!!
  • この問題は、「真に動的な行の高さ (行のコンテンツの影響を受ける) を追加するには、多くの機能を無効にする必要がある」と述べています。彼らはいくつかの可能な解決策を提供していますが、ある決心した開発者がこれを試し、多くの問題を抱えていました. 彼はそれをうまくやったかもしれないし、あきらめたかもしれない。私はそれを危険にさらすつもりはありません。
于 2014-11-27T03:20:49.110 に答える
1

最近、SlickGrid をフォークして、可変 (およびサイズ変更可能な) 行を含む一連の新機能を追加しました。ここで試すことができます: https://github.com/globexdesigns/doby-grid

于 2014-02-04T17:02:12.877 に答える
0

この変数を外部で定義します....

var tableHeight = 0;

滑らかなグリッドを作成する前に、線の下を使用します。

// 各行に 30 ピクセル これはヘッダーをカバーします... テーブルに合わせてこの値を調整できます。

tableHeight = dataTable.length * 30;    

if(tableHeight >  ($(window).height() - 400)){
       $("#myGrid").height($(window).height() - 400);
}else{
       $("#myGrid").height(tableHeight);
}

ページが既に生成されているときにユーザーが画面を変更すると、以下は画面とデータの行数に基づいてテーブルのサイズを変更します。

    $(window).resize(function() {

    // For grid height
    if(tableHeight >  ($(window).height() - 400)){
        $("#myGrid").height($(window).height() - 400);
    }else{
        $("#myGrid").height(tableHeight);
    }

    // For grid width
    $("#myGrid").width("100%");

    // Resize the grid dynamically. 
    gridName.resizeCanvas();
});
于 2014-02-12T00:02:52.187 に答える
0

SlickGrid のフォークは、多くの点で実際に実行可能なオプションではないため、この投稿の多くの読者にとって、SlickGrid の代替案について議論することは価値があると思いました。

可変の行の高さを完全にサポートする「実行可能な代替手段」は次のとおりだと思います。各行は、コンテンツに合わせて自動的に適応する異なる行の高さを持つことができ、テキストを次の行に折り返すことができます。

私はこれをかなり詳しく調べましたが、残念ながら、SlickGrid に関連する実行可能な代替手段は見つかりませんでした。他の選択肢の中で、無料で商用利用できるdojox DataGridしか見つかりませんでしたが、これでカスタムエディターをどのように使用できるかは明確ではありません (ほとんどの商用エディターはこれを提供しています)。

商用利用には支払いが必要な実行可能な代替手段がかなりあります: dhtmlxGrid、jQuery EasyUI DataGrid、jQWidgets、Wijmo Grid ウィジェット、JideTable、および Sencha ExtJS Grids。これらのうち、個人的には dhtmlxGrid http://dhtmlx.com/docs/products/dhtmlxGrid/が最高だと思います。無料版は GPL、Pro 版は 199 ドルです。

于 2014-12-01T23:56:57.507 に答える