p:dataTable使用javascript从列单元格获取数据

时间:2016-01-02 04:05:09

标签: jsf primefaces highcharts

在我的大学项目中,我正在将RichFaces迁移到PrimeFaces 5.1。在RichFaces中,dataTable使用HighCharts显示pieChart。在dataTable中获取值列outputText并传递给dataTable列中的Highchart show chart。这与PrimeFaces中需要的进程相同。

Richfaces:

<script>
    jQuery(document).ready(function() {
        populatePieChartInDataTable()
    }
    function populatePieChartInDataTable() {
        var dataTableId;
        dataTableId = 'studentDataTable';
        generatePieChart(dataTableId, 'studentstatuspiechartdiv');
    }

    function generatePieChart(dataTableId, pieChartContainerDivId) {
        var dataTable;
        var cellElement;
        var pieChartContent;
        var pieChartContainerDynamicId;
        var rowLength;
        var cellLength;
        dataTable = jQuery('table[id$="' + dataTableId + '"]')[0];
        rowLength = dataTable.tBodies[0].rows.length;
        for (var i = 0; i < rowLength; i++) {
            pieChartContainerDynamicId = pieChartContainerDivId + ':' + i;
            cellLength = dataTable.tBodies[0].rows[i].cells.length;
            for (var j = 0; j < cellLength; j++) {
                cellElement = dataTable.tBodies[0].rows[i].cells[j];
                if (cellElement.childNodes.length == 3) {
                    pieChartContent = cellElement.childNodes[0].innerHTML;
                    cellElement.childNodes[1].setAttribute('id', pieChartContainerDynamicId);
                    createPieChartstudentStatus(pieChartContainerDynamicId,
                            pieChartContent);
                }
            }
        }
    }
</script>

<rich:datascroller id="dataTopScroller" for="studentDataTable" 
                   page="#{student.dashboardDatascrollerIndex}"oncomplete="populatePieChartInDataTable();" reRender="dataTopScroller"/>
<rich:dataTable id="studentDataTable" value="#{student.responderDashboardDetailList}">
    <rich:column style="width: 325px;">
        <h:outputText id="pieChartData" value="#{student.pieChartData}" style="display: none;"/>
        <f:verbatim><div id="studentStatusPiechartdiv" style="width: 300px; height: 100px; overflow: auto;">
        </f:verbatim><f:verbatim>
            </div></f:verbatim>
    </rich:column>
</rich:dataTable>

我怀疑在primefaces中我使用Paginator来显示记录10到10.在Primefaces脚本中获取dataTable的行长度总数和dataTable单元格outputTert的pieChartData列值得到如上面的脚本代码并传递给higchart函数。

0 个答案:

没有答案