Question

我想在此代码中添加javascript事件：

<p:dataTable id="tblQueues" var="q" value="#{gateBacking.listQueue}" filteredValue="#{gateBacking.filteredQueues}" rowKey="#{q.queid}"  
     selection="#{gateBacking.selectedQueue}" selectionMode="single" widgetVar="varQueues"
     scrollable="true" scrollHeight="250">  
    ...
    <p:column headerText="License No" filterBy="#{q.fleet.licenseNo}" filterMatchMode="contains" >
        #{q.fleet.licenseNo}
    </p:column>
    ...
</p:dataTable>

如何在过滤器上添加onkeyup？我试过这样的：

<p:column headerText="License No" filterBy="#{q.fleet.licenseNo}" filterMatchMode="contains" onkeyup="formatLicense(this)">

但它不起作用。我怎样才能做到这一点？感谢。

更新

我试过这个，但它不起作用：

<p:column headerText="License No" filterBy="#{q.fleet.licenseNo}" filterMatchMode="contains" filterEvent="formatLicense(this)">

更新2

<p:tabView id="tabViewGate">
    <p:tab id="tabCheckOut" title="Out">
        <h:form id="frmOut">
            <p:dataTable id="tblQueues" var="q" value="#{gateBacking.listQueue}" filteredValue="#{gateBacking.filteredQueues}" rowKey="#{q.queid}"  
                selection="#{gateBacking.selectedQueue}" selectionMode="single" widgetVar="varQueues"
                scrollable="true" scrollHeight="250">  
                ...
                <p:column id="colLicnu" headerText="License No" filterBy="#{q.fleet.licenseNo}" filterMatchMode="contains" >
                    #{q.fleet.licenseNo}
                </p:column>
                ...
            </p:dataTable> 

            <script type="text/javascript">
                $(document).ready(function(){
                    $("#frmOut\\:tblQueues\\:colLicnu\\:filter").keyup(function(){
                        //alert("Test"); //--> I tried this too but it doesn't work
                        if (input.value.length > 1)
                        {
                            var num = '1234567890';
                            var str = input.value[input.value.length-1];
                            var str2 = input.value[input.value.length-2];

                            if (num.indexOf(str) >= 0) {
                                if (!(num.indexOf(str2) >= 0)) 
                                    input.value = input.value.substring(0, input.value.length - 1) + " " + str;
                            }
                            else if (!(num.indexOf(str) >= 0)) {
                                if (num.indexOf(str2) >= 0)
                                    input.value = input.value.substring(0, input.value.length - 1) + " " + str;
                            }
                        }
                        input.value = input.value.replace("  "," ").toUpperCase();
                    });
                });
            </script>

        </h:form>
    </p:tab>
</p:tab>

Answer 1

你可以通过一些jQuery魔术实现这一点。我使用PrimeFaces 3.5来确定这个答案，但你应该能够在你的上面做同样的事情。您需要做的第一件事是确定HTML端id生成的input。您可以通过右键单击input（用于过滤该列的那个）并选择查看源来执行此操作。

注意：我发现只需将id添加到您感兴趣的<h:form>，<dataTable>和<p:column>就更容易了（或者你可以在prependId = "false"上<h:form>来缩短它......无论你想要什么。然后使用这个javascript（伪代码）代码。

$(document).ready(function(){
  $("#inputTextId").keyup(function(){
    //logic goes here. 
  });
});

这是一个更具体的例子。以下是我<p:dataTable>的一部分。我只展示相关部分。（不要担心对象，我正在玩PrimeFaces展示）。

<h:form id="form">
    <p:dataTable id="dataTable" var="car" value="#{carBean.cars}" widgetVar="carsTable">
        <p:column id="modelColumn" filterBy="#{car.model}" headerText="Model" filterMatchMode="contains">
            <h:outputText value="#{car.model}" />
        </p:column>

input生成的ID为form:dataTable:modelColumn:filter

我的javascript代码。

$(document).ready(function(){
  $("#form\\:dataTable\\:modelColumn\\:filter").keyup(function(){
    alert("Test"); 
  });
});

在我的最后，此代码位于resources/javascript/jscript.js下。所以请记住在<h:outputScript name="javascript/jscript.js" />中添加<h:head>。

<强>更新

id复制并粘贴所有的input是什么。然后用双反斜杠逃避冒号:。根据你给出的代码，它应该是

#tabViewGate\\:frmOut\\:tblQueues\\:colLicnu\\:filter

但是，根据您的评论，您说id是

A5290:tabViewGate:frmOut:tblQueues:colLicnu:filter

所以它应该是

#A5290\\:tabViewGate\\:frmOut\\:tblQueues\\:colLicnu\\:filter

在数据表过滤器上添加onkeyup事件

1 个答案: