1

我使用了优秀的库 Primefaces，但不幸的是我不得不创建自己的组件来自定义它。

问题是该组件在第一个选项卡上显示得很好，但在第二个选项卡上却没有。

加载选项卡时如何强制显示组件？

这里是自定义组件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 回答