0

<th>每当用户单击某个<th>. 所有这些都在PrimeFaces中 <p:dataTable>

我能想到的最简单的方法就是这样做，所以我开始研究，并在这里JQuery偶然发现了这个答案。

在那里，BalusC提供了一段代码，我可以为自己的用例编辑它，我最终得到了这个：

$(document).ready(function () {
    $('#mainForm\\:table th').click(function () {

        var th = $(this);
        var index = $('th', th.parents('tr')).index(th);
        var column = $('tbody td:nth-child(' + (index + 1) + ')', th.parents('table'));
        column.addClass('light-grey');
    });
});

这段代码实际上对我有用。但有一件事我想不通。

一旦light-grey类被添加到列中，它就会被删除。我不知道这是否与 JSF 的生命周期有关，或者与我不知道的渲染时间有关。

所以我得到的结果是这些列闪烁为灰色并快速返回。

有谁知道为什么会这样？

编辑 1

这是我的xhtml：

<h:form id="mainForm">
    <p:dataTable id="table" value="#{myManagedBean.items}" var="item"
        sortBy="#{item.value2}">

        <p:column headerText="Value 1" sortBy="#{item.value1}">
            <h:outputText value="#{item.value1}" />
        </p:column>

        <p:column headerText="Value 2" sortBy="#{item.value2}">
            <h:outputText value="#{item.value2}" />
        </p:column>

        <p:column headerText="Value 3" sortBy="#{item.value3}">
            <h:outputText value="#{item.value3}" />
        </p:column>

    </p:dataTable>
</h:form>

我创建了一个小项目来隔离问题，上面的表格是我用于测试的表格。

是的，每当我单击标题以更改排序时，都会触发 AJAX 请求。我检查了 Chrome 调试器的网络选项卡。

4

1 回答 1

0

通过@MaQy 的评论，我想出了一个解决方案，最终JQuery代码如下所示：

$(document).ready(function () {
    function afterLoad(){
        var th = $('.ui-datatable table th.ui-state-active');
        var index = $('th', th.parents('tr')).index(th);
        var column = $('tbody td:nth-child(' + (index + 1) + ')', th.parents('.ui-datatable'));
        column.addClass('light-grey');
    }

    $('body').bind('ajaxComplete', function(e, xhr, settings){
        afterLoad();
    });

    // Invoking afterLoad() for the first time 
    // to load the table already highlighted.
    afterLoad();
});

ui-state-active是 PrimeFaces 添加到 selected 的一个类，<th>这让事情变得更容易一些。

如果你们对此解决方案有任何建议、改进或投诉，请发表评论。在我对 JQuery 的了解中，这就是我所能想到的。

于 2013-06-21T13:15:18.003 回答