0

我想在此代码上添加 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>
4

1 回答 1

2

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

注意：我发现简单地添加一个idto<h:form>和你感兴趣的更容易（或者你可以<dataTable>继续缩短它......无论你想要什么）。然后使用这个 javascript（伪代码）代码。<p:column>prependId = "false"<h:form>

$(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为was生成的 idform: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
于 2013-07-17T05:40:44.670 回答