1

私は優れたライブラリ Primefaces を使用していますが、残念ながら、独自のコンポーネントを作成してカスタマイズする必要があります。

問題は、コンポーネントが最初のタブでは適切に表示されるが、2 番目のタブでは表示されないことです。

タブの読み込み中にコンポーネントの表示を強制する方法は?

カスタムコンポーネントwm:dateLineChart :

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:cc="http://java.sun.com/jsf/composite"
  xmlns:h="http://java.sun.com/jsf/html">

<!-- INTERFACE -->
<cc:interface>
</cc:interface>

<!-- IMPLEMENTATION -->
<cc:implementation>
    <h:panelGroup rendered="true">
        <div id="#{cc.id}" 
             style="height:208px;"/>
        <script type="text/javascript" >
            var chartId = '<h:outputText value="#{cc.id}"/>';
            dateLineChart(chartId);

            function dateLineChart(id) {
                $(document).ready(function(){
                    jQuery.jqplot (id, [[3,7,9,1,4,6,8,2,5]], {
                        title: 'Plot With Options',
                        axesDefaults: {
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                        },
                        axes: {
                            xaxis: {
                                label: "X Axis",
                                pad: 0
                            },
                            yaxis: {
                                label: "Y Axis"
                            }
                        }
                    });
                });
            }
        </script>
    </h:panelGroup>
</cc:implementation>
</html>

そして、ここで私はそれを使用します:

<p:tabView id="tabView" dynamic="true" cache="true">  

    <p:tab id="homeView">  
        <wm:dateLineChart id="chartOnFirstTab" />
    </p:tab>  

    <p:tab id="otherView" >
        <wm:dateLineChart id="chartOnSecondTab" />
    </p:tab>

</p:tabView>

よろしくお願いいたします。

4

2 に答える 2

1

Primefaces を使用した適応ソリューション。それが他の人に役立つことを願っています。

 <p:tabView id="tabView" dynamic="true" cache="true" onTabShow="refreshDateLineChart()" >
    //...
 </p:tabView>

使用されたJS：

 /**
  * The date line chart reference.
  */
 var DATE_LINE_CHART;

 /**
  * Draw the date line chart.
  * @param id : the div id
  */
 function dateLineChart(id) {
    $(document).ready(function(){
        DATE_LINE_CHART = jQuery.jqplot (id, [[3,7,9,1,4,6,8,2,5]]);
    });
 }

 /**
  * Refresh the date line chart.
  */
 function refreshDateLineChart() {
    if (DATE_LINE_CHART != null && DATE_LINE_CHART._drawCount === 0) {
        DATE_LINE_CHART.replot();
    }
 }
于 2012-06-02T22:40:43.053 に答える
0

replot()グラフが正しくプロットされていることを確認するには、グラフが最初に表示されるときに適切なグラフのメソッドを呼び出す必要があります(たとえば、タブを含むグラフがクリックされたとき)。

これは、jQuery UIタブ に対して行う方法です。

  $('#tabs').bind('tabsshow', function(event, ui) {
      if (ui.index === 1 && plot1._drawCount === 0) {
        plot1.replot();
      }
      else if (ui.index === 2 && plot2._drawCount === 0) {
        plot2.replot();
      }
  });

上記のコードをここに示します。コードサンプルはこの回答から取られています。そこで使用したアプローチは、グラフのタブを見つける必要がある場合に役立つかもしれません。

于 2012-05-29T11:25:31.880 に答える