2017-12-18 15 views
-1

4つの可能な値のString属性を持つオブジェクトがあります。各値に対して、別のCSSクラスをセルに配置したいと思います。 はここで、複合条件を記述する方法があるかどうか、私は疑問に思って:また、私は関数呼び出しが間違っていると思う、tdのクラス属性内の複数の条件

<ui:repeat value="#{row.info}" var="wui" > 
      <td class="#{wui.status eq 'In execution'? 'inexec' : '' }"> 
      <!--<td id="wuitd" onLoad="classfunction()" >--> 
       <h:outputText value="#{wui.status}" /> 
       <h:outputText value="#{wui.remainingEffort} effort units" /> 
      </td> 
</ui:repeat> 

私はjavascript関数を書いてみましたが、私はそれが正しいかどうかを確認していない:

<td id="wuitd" onLoad="classfunction()" > 
     <h:outputText value="#{wui.status}" /> 
</td> 

<script> 
    function classfunction(){ 

     char status = document.getElementById("wuistatus").value; 
     switch(status) { 
      case 'In execution': 
       document.getElementById("wuitd").style.parentRule('inexec'); 
       break; 
      case 'Ready for execution': 
       document.getElementById("wuitd").style.parentRule('ready'); 
       break; 
      case 'Finished': 
       document.getElementById("wuitd").style.parentRule('finished'); 
       break; 
      case 'Not ready': 
       document.getElementById("wuitd").style.parentRule('notExec'); 
       break; 
      default: 
       code block 
     } 
    } 

</script> 
+0

'td'要素から' onload'を起動することはできません。つまり、https:// stackoverflowです。com/questions/4057236/how-to-add-onload-event-to-a-div要素 –

+0

はい、あなたは右の読み込みはtdのイベントではありません。しかし私は自動的にjs機能をトリガーしたい。ユーザーイベントではありません – Lujain

答えて

1

あなたの問題のJS部分について知っておくべきことのほとんどまたはすべてを見つけることができますhere ... "wui"の部分が何であるか分かりません。

さらに参照(おそらくグーグルを使用し、ご使用の環境に合わせて、いくつかの余分なキーワードを追加し、より良い見つけることができます):

私が最初に考えましたこのような状況では、ほとんどの場合、「ねえ、私はjQueryを使うことができます! ...と私は知っている、 "今私は2つの問題がありますが、それは動作します:o)

私はあなたが何らかのJSフレームワークをここにロードしていると仮定しています。そうであれば、それはjQueryではなく、「ページが読み込まれた」ためのメカニズムが何であるかを調べてください。あなたのアプリケーションで使われるブラウザが何であるかが絶対にわかっていない限り、あなたは "手作業"でそれをどうやって行うのかを考えていません。

+0

リンクをありがとう私はクラスを変更する方法を見ていきます。しかし、あなたが提供したリンクでは、彼らはonclickイベントによってjs関数を呼び出します。私はuiを持っています:すべてのオブジェクトを繰り返すrepreat。 ui:repreatが新しいオブジェクトをテーブルにロードするたびに、js関数を呼び出す必要があります。 – Lujain

+0

ベストプラクティスとは何かを知るために、ちょっと狩りをしました(これはjQueryを使用したほうが簡単です)。私は私の答えにいくつかの参照を追加します(コメントは少し混雑しています)。 –

+0

あなたの助けに感謝します。ありがとう! – Lujain

0

JSP/JSF(または少なくともEL式を使用するもの)を使用しているようです。将来の質問では、あなたが使っているものを正確に指定するのが最善でしょう(通常はタグ経由で)。 ELのドキュメントによれば、ハッシュ検索を使うことができます。あなたは、あなたのテンプレートにアクセスすることができ、次のどこかで定義することができますのであれば:

statusToClass = { 
    "In execution": "inexec", 
    ... // define your other value -> class translations 
} 

をあなたのことができるようにする必要があります

<td class="#{statusToClass[wui.status]}"> 
    <h:outputText value="#{wui.status}" /> 
</td> 

私はどこか、どのように、私はELを知らない告白statusToClassが明確でないと定義することがあります。しかし、このメソッドはオブジェクト/ハッシュをサポートする他の言語の複数条件を避けるためにうまく機能します。あなたがいつも予測可能な値を持っているwui.statusに頼ることができる限り。これは、ルックアップ時にプログラムによる制御がなく、デフォルトにフォールバックする機会がないためです。 JavaScriptでは、フォールバックを簡単に追加できますが、ELによってサポートされることはありません。 https://docs.oracle.com/javaee/7/tutorial/jsf-el003.htm - -

statusToClass[wui.status]||'default' 

あなたがEL3によってアクセスすることができます(豆の一部として)メソッドを定義することができますようにそれは見えないので、おそらくこれはあなたではなく、JavaScriptの方法よりも、(に見ることができる別のルートで、どのonLoad.valueという2つの問題が発生する可能性があるようです(作業中のJavaコンテキストでこれらをサポートしている場合を除く)。その音によって、ELがうまくいくと考えられる方法に統合すればするほど、特にui:repeatのような他の慣習を使用すると、より簡単になります。