web-dev-qa-db-ja.com

豊富な拡張DataTableの列幅

RichFaces拡張dataTableに問題があります

列が20と言うと、水平スクロールバーを表示する代わりに、列が圧縮されます。

列幅を％、pxで指定してみましたが、使用できません。

これに精通している人はいますか？

<rich:column label="Select" sortable="false" width="10%">
  <f:facet name="header"> 
    <h:selectBooleanCheckbox id="chk" align="center"
      value="#{bean.selectAll}" onclick="selectAll();"/>
  </f:facet>
  <input id="part_#{rowKey}" type="checkbox"
    name="selectedParts" value="#{listVar.id}" />
</rich:column>
jsfrichfaces
12
crazyTechie

<rich:extendedDataTable>は、実際には水平スクロールをうまく処理しません。実際、開発者は水平スクロールをほぼ不可能にしようと試みたようです。

水平スクロールを有効にして<rich:extendedDataTable>を<div>に入れることはできますが、そのままにしておくと機能しません。 <div>（<rich:extendedDataTable>）にネストされたdiv.extdt-innerdivsの1つが絶対的に配置され、ドキュメントのフローから削除されます。

参考までに、これは<rich:extendedDataTable>の基本的な出力構造であり、幅100pxの3つの<rich:column>要素と2つのレコードを想定しています。

<div id="form_id:edt_id" class="extdt-maindiv rich-extdt-maindiv">
    <div id="form_id:edt_id:od" class="extdt-outerdiv">
        <div id="form_id:edt_id:innerd" class="extdt-innerdiv">
            <table id="form_id:edt_id:tu" class="extdt-table-layout">
                <colgroup id="form_id:edt_id:colgroup:header">
                    <col width="100" />
                    <col width="100" />
                    <col width="100" />
                </colgroup>
                <thead id="form_id:edt_id:header" class="extdt-thead">
                    <tr class="extdt-subheader rich-extdt-subheader">
                        <th id="form_id:edt_id:column_1_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 1</th>
                        <th id="form_id:edt_id:column_2_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 2</th>
                        <th id="form_id:edt_id:column_3_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 3</th>
                    </tr>
                    <tr class="extdt-table-filterrow rich-extdt-subheader"> <!-- only if filtering is enabled -->
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="3">
                            <div id="form_id:edt_id:sd" class="extdt-content">
                                <table id="form_id:edt_id:n" class="extdt-table-layout">
                                    <colgroup id="form_id:edt_id:colgroup:body">
                                        <col width="100" />
                                        <col width="100" />
                                        <col width="100" />
                                    </colgroup>
                                    <tbody id="form_id:edt_id:tb">
                                        <tr id="form_id:edt_id:n:0" class="extdt-firstrow rich-extdt-firstrow">
                                            <td id="form_id:edt_id:0:column_1_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 1, Row 1</div>
                                            </td>
                                            <td id="form_id:edt_id:0:column_2_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 2, Row 1</div>
                                            </td>
                                            <td id="form_id:edt_id:0:column_3_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 3, Row 1</div>
                                            </td>
                                        </tr>
                                        <tr id="form_id:edt_id:n:1" class="extdt-firstrow rich-extdt-firstrow">
                                            <td id="form_id:edt_id:1:column_1_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 1, Row 2</div>
                                            </td>
                                            <td id="form_id:edt_id:1:column_2_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 2, Row 2</div>
                                            </td>
                                            <td id="form_id:edt_id:1:column_3_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 3, Row 2</div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </tbody>
                <tfoot id="form_id:edt_id:footer">
                    <tr class="extdt-footer rich-extdt-footer">
                        <td class="extdt-footercell rich-extdt-footercell" scope="colgroup" colspan="3">
                            <!-- table footer goes here if defined -->
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div id="form_id:edt_id:column_1_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
    <div id="form_id:edt_id:column_2_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
    <div id="form_id:edt_id:column_3_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
</div>

div.extdt-innerdivに水平スクロールを追加することもできますが、<rich:extendedDataTable>の列の自動サイズ変更機能（ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios()）は本質的にこれによって混乱し、コンポーネントのmaxWidth（初期幅から派生）を超えて始まるすべての列のサイズを変更しますdiv.extdt-maindiv）から20px幅まで。

私はもう試した...

  • <rich:extendedDataTable>を<div>要素でラップし、以下を設定します：
    • position: relative;
    • width: 100%;
    • overflow-x: auto;
    • 希望の高さ。それ以外の場合は、次の箇条書きのためにスクロールバーが表示されます。
  • div.extdt-maindivを絶対的な位置に置く
  • div.extdt-outerdivとdiv.extdt-innerdivの両方に静的な配置と自動幅を与える

...しかし、それは何の効果もないようです。

Firebugでこれらの変更のほとんどを行っており、mainDiv.getWidth()（calculateWidthsFromRatios()から）がキャッシュされた値mainDiv.element.boxWidthを取得していることが原因である可能性があると考えています。この値はClientUI.common.box.Box.setWidth()（common-scrollable-data-table.js）で設定されており、一度だけ呼び出されます。ブラウザウィンドウのサイズを変更しても、再度呼び出されることはありません（私の場合、<rich:extendedDataTable>の幅は100％です）。

CSSファイルにこれらの変更を加えて、すべてが魔法のように機能するかどうかを確認します。ただし、<rich:extendedDataTable>のJavaScriptはかなり複雑であり、文書化されていないため、どこかで何かが欠落している可能性があります。結果をフォローアップします。

[〜＃〜] edit [〜＃〜]：CSSに変更を加えた後も、列が短くなる問題が発生しました。

そのため、ラッパーdivを作成する必要がないように、div.extdt-innerdivに水平スクロールを追加しました。

.extdt-innerdiv { overflow-y: hidden; overflow-x: auto !important; }

次に、<rich:extendedDataTable>のフッターで、calculateWidthsFromRatios()関数を無効にしました。

<rich:extendedDataTable id="edtId">
    <!-- rest of extended data table -->
    <f:facet name="footer">
        <script type="text/javascript">
            jQuery(function() {
                // Disable ratio-based column resizing.
                ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios = function() {};
            });
        </script>
    </f:facet>
</rich:extendedDataTable>

コンポーネントが再レンダリングされるたびにこのJavaScriptを強制的に実行するために、テーブルのフッターを使用しました。

このソリューションを使用しても、extended-data-table.jsのJavaScriptにより、列のサイズがmainDiv.element.boxWidthより広くなることが防止されるため、ユーザーは列の幅を手動で拡張できません。このようなサイズ変更を有効にするには、JBossにパッチを送信して<rich:extendedDataTable>を修正することもできます。現在、RichFaces 3.Xでの動作を変更する予定はないためです（ ＃RF-4871 による） = JBoss Community JIRA内）。

幸運を。

12
Christopher Parker

「px」または「％」なしで幅を指定する必要があります。例：

<rich:column label="Select" sortable="false" width="100">

拡張データテーブルには issues 水平スクロールがありますが、固定テーブル幅をピクセル単位で指定し、overflow-xをスクロールに設定してテーブルをdivに配置できます。

5
Damo

私はあらゆる種類のアイデアを組み合わせて、次のことを思いつきました。

言及したように、修正すべきことがあります。 1つはテーブル幅の100％を超えるスクロール可能性であり、もう1つはスクロールバー自体です。だから私はサイズ変更の問題を修正するためのいくつかのjsファイルとスクロールバーを追加するためのいくつかのcssを持っています...

page.xhtml-内部にextended-dtが含まれているページ。

<head>
    <a4j:loadStyle
        src="resource:///org/company/project/css/ExtendedDatatableFix.css"
        media="screen" />
    <a4j:loadScript
        src="resource:///org/company/project/js/ExtendedDataTableHeaderFixScrollable.js" />
</head>
<body>
    <!-- prevent IE to come up with ExtendedDataTable-bla not defined-js-error -->
    <rich:extendedDataTable id="dummy_table_for_extended_datatable_fix" rendered="false">
    </rich:extendedDataTable>


    <rich:extendedDataTable id="here_goes_your_datatable">
        <!-- your ext-dt -->
    </rich:extendedDataTable>
</body>

ExtendedDatatableFix.css-それほど正確ではありませんが、ちょっと-改善の余地があります

.extdt-maindiv {
    margin-bottom: 17px;
}
.extdt-outerdiv {
    overflow-x:auto !important;
    overflow-y:hidden;
    height: 108% !important;
}
.extdt-innerdiv {
    height: 100% !important;
}
.extdt-content{
    overflow-x:hidden;
    overflow-y:scroll;
}

ExtendedDataTableHeaderFixScrollable.js-ここからコピー： http://community.jboss.org/thread/146108

 ExtendedDataTable.DataTable.header.prototype.OnSepMouseMove = function(event) {
      if(this.dragColumnInfo && this.dragColumnInfo.mouseDown) {
           if(!this.dragColumnInfo.dragStarted) {
                this.dragColumnInfo.dragStarted = true;
                this._showSplitter(this.dragColumnInfo.srcElement.columnIndex);
           }
           var delta = Event.pointerX(event) - 
                this.dragColumnInfo.startX
           if (delta < this.minDelta) {
                delta = this.minDelta;
           }
           /*if (delta > this.maxDelta) {
                delta = this.maxDelta;
           }*/
           var x = this.dragColumnInfo.originalX + delta;
           var finalX = x - this.minColumnWidth - 6 //6 stands for sep span width;
           this.columnSplitter.moveToX(finalX);                     
           Event.stop(event);
      }
 }

 ExtendedDataTable.DataTable.header.prototype.OnSepMouseUp = function(event) {
      Event.stop(event);
      Event.stopObserving(document, 'mousemove', this.eventSepMouseMove);
      Event.stopObserving(document, 'mouseup', this.eventSepMouseUp);
      if(this.dragColumnInfo && this.dragColumnInfo.dragStarted) {
           this.dragColumnInfo.dragStarted = false;
           this.dragColumnInfo.mouseDown = false;

           var delta = Event.pointerX(event) - 
                this.dragColumnInfo.startX;
           if (delta < this.minDelta) {
                delta = this.minDelta;
           }
           /*if (delta > this.maxDelta) {
                delta = this.maxDelta;
           }*/
           var columnIndex = this.dragColumnInfo.srcElement.columnIndex;
           var newWidth = this.getColumnWidth(columnIndex) + delta;

           this.extDt.setColumnWidth(columnIndex, newWidth);
           this.setColumnWidth(columnIndex,newWidth);
           this.extDt.updateLayout();
           if (this.extDt.onColumnResize){
                //set properly value to this.columnWidths
                this.extDt.columnWidths = "";
                for (i=0; i<this.columnsNumber; i++){
                     this.extDt.columnWidths += "" + this.getColumnWidth(i) + ";";
                }//for
                this.extDt.onColumnResize(event, this.extDt.columnWidths);
           }
      }
      this._hideSplitter();
 }

ExtendedDataTable.DataTable.prototype.calculateWidthsFromRatios = function() {
    LOG.debug('firing calculateWidthsFromRatios');
    var c = this.getColumns();
    var scrollbarWidth = this.getScrollbarWidth();
    this._scrollbarWidth = scrollbarWidth;
    LOG.debug('Scrollbar: ' + scrollbarWidth);
    var mainDivWidth = this.mainDiv.getWidth();
    LOG.debug('Main DIV: ' + mainDivWidth);
    var maxWidth = mainDivWidth - scrollbarWidth;
    LOG.debug('Width to spread: ' + maxWidth);
    var totalWidth = 0;
    for (i = 0; i < c.length - 1; i++) {
        LOG.debug('Column[' + i + '] ratio: ' + this.ratios[i]);
        var w = Math.round(this.ratios[i] * maxWidth);
        if (w < parseInt(this.minColumnWidth)) {
            w = parseInt(this.minColumnWidth);
        }
        LOG.debug('setting column ' + i + ' to width: ' + w);
        this.setColumnWidth(i, w);
        this.header.setColumnWidth(i, w);
        totalWidth += w;
    }
    /*
     * if (totalWidth > maxWidth) {
     * c[c.length - 2].width -= (totalWidth - maxWidth);
     * }
     */
};
3
justastefan

水平スクロールバーを有効にするには、こちらの回避策を参照してください https://jira.jboss.org/jira/browse/RF-4871 。

水平スクロールバーが表示されているときに列のサイズを変更するには、これを参照してください http://community.jboss.org/message/518878#518878 。

0
bungrudi

ここのこの例によると：

RichFacesショーケース

幅は次のように使用されます（xhtmlのソースを確認してください）。

<rich:column filter="#{carsFilteringBean.mileageFilterImpl}" width="150px"

私にとっては問題なく動作しました。

ご挨拶。

0
jmlv21104