jqgrid - jqGridの列の間に垂直スペースを挿入する方法

Question

以下の粗いモックアップに示されているように、列の間に垂直方向のスペースをどのように注入しますか（可能であれば）。もう一度、この画像で私の手斧の仕事を許してください、しかしそれは私がやろうとしていることを伝えていると思います。基本的に、グリッド内に列の「グループ」を配置し、グループの両側にスペースを配置したいと考えています。

元

Answer 1

要件を実装する可能性はたくさんあります。最も簡単な方法は、カスタムpadding-rightまたはpadding-left選択した列の使用法のようです。たとえば、CSSを次のように定義できます

.ui-jqgrid tr.ui-row-ltr td.myCustomColumnClass { padding-right: 10px; }

の列定義の"myCustomColumnClass"使用法によって、列のすべてのセルにクラスを割り当てます。私はそれがあなたが必要としていることだと思います。classes: "myCustomColumnClass"colModel

別の可能性は、次のような空の列を含めることです。

{ name: "empty1", width: 10, sortable: false, hidedlg: true, search: false,
    resizable: false, fixed: true }

グリッド内。必要に応じてclasses: "noVerticalLines"、前の列に割り当てることで、空の列と前/次の列の間のパーティション（垂直線）を追加で削除できます。以下のように、クラス「noVerticalLines」のCSSを定義できます。

.ui-jqgrid tr.ui-row-ltr td.noVerticalLines { border-right-color: transparent; }

デモはすべての可能性を示しています。

更新：回答からのトリックを追加で使用できます。たとえばCSSを定義する場合

.ui-jqgrid tr.ui-row-ltr td.noHorizLines { border-bottom-color: transparent; }

そして、「noHorizLines」クラスを「empty1」列に追加します。

{ name: "empty1", width: 10, sortable: false, hidedlg: true, search: false,
    resizable: false, fixed: true, classes: "noHorizLines" }

次の結果が得られます

（デモを参照してください）。

さらに、サーバーからデータを取得する場合は、サーバーから返されるデータの配列に空の文字列""をもう1つ追加する必要がある場合があります。サーバーコードを変更するのではなく、クライアント側でこのような空の文字列を挿入することをお勧めします。beforeProcessingですので、その目的で使用することをお勧めします。サーバーから返されたアイテムを列挙し、スプライス関数を使用して空の文字列を挿入するだけです。