0

私は Primeface と JQuery の初心者です。データテーブルがあり、jquery でそのデータテーブルの特定のセルにアクセスしたいと考えています。以下は私がやろうとしていることです--

私のデータテーブルコード:

<p:dataTable id="employeeDataTable" var="employee" value="#{userPreferenceBean.employeeDataModel}"
            paginator="true" rows="10" selection="#{userPreferenceBean.selectedEmployeeList}" rowIndexVar="rowIndex">

            <f:facet name="header">
                List of Employees
            </f:facet>

            <p:column selectionMode="multiple" style="width:2%" />

            <p:column headerText="Primary Employee" style="width:2%">
                <p:commandButton value="Me" update=":#{p:component('primaryEmployeeDetails')}" id="ajax"
                    actionListener="#{userPreferenceBean.saveEmployee}" styleClass="ui-priority-primary">
                    <f:param name="employeeName" value="#{employee.name}" />
                </p:commandButton>
            </p:column>

            <p:column headerText="Name" style="width:48%">
                    #{employee.name}
            </p:column>

            <p:column headerText="Department" style="width:48%">
                    #{employee.department}
            </p:column>

            <f:facet name="footer">
                <p:commandButton id="submit" value="Save Preferences" icon="ui-icon-disk"
                    update=":#{p:component('selectedEmployeeDetails')}" />
            </f:facet>
        </p:dataTable>

JQuery から特定のセル (たとえば、n 番目の行と 2 番目の列) からコマンドボタンにアクセスしたいと思います。これが私が今やっていることです -

$(document).ready(function() {
        $(".ui-priority-primary").click(function() {
            alert('test')
            var row = 'employeeDataTable:' + rowIndex + ':ajax';
            $(row).each(function() {
                alert('test again')
            });
        });
});

現在、「テスト」のアラートは機能していますが、「再テスト」のアラートは機能していません。これは、コマンド ボタンからクリック イベントを取得できることを意味します。しかし、データテーブルから特定のセルを取得できないようです。私がここでやっている間違いを理解するのを手伝ってもらえますか? ありがとう。

よろしく、 スディプタ・デブ

生成された HTML

4

1 に答える 1

0

rowIndex行のセルとの列のセルを取得したいとしましょうcolumnIndex。したがって、jQuery を介してそのセルを取得するには、次のようにします。

$(document.getElementById("myForm:employeeDataTable"))
    .find("tbody:first").children("tr:nth-of-type(" + rowIndex + ") td:nth-of-type(" + columnIndex + ")")

絶対 ID が必要なため、親に適切な名前を付けるか、document.getElementById("#{p:component('employeeDataTable')}")代わりに使用することをお勧めします。そのため、primefaces が ID ルックアップを行います。jQuery ID-selector の代わり
に使用しました。これは、 every をエスケープする必要があるためです。 document.getElementById#:

したがって、指定された関数には次を使用します。

var row = $(document.getElementById("myForm:employeeDataTable")).find("tbody:first").children("tr:nth-of-type(" + rowIndex + ")");
row.each(function() {
  alert('test again')
});

test againの行ごとに警告しdataTableます。

于 2013-09-17T09:26:59.403 に答える