java - JSFページをナビゲートする方法は？

Question

データのリストを使用してh：datatableを作成したい：

<h:dataTable id="dataTable" value="#{SessionsController.dataList}" binding="#{table}" var="item">
    <!-- Check box -->
        <h:column>
            <f:facet name="header">
                <h:outputText value="Select" />
            </f:facet>
            <h:selectBooleanCheckbox  onclick="highlight(this)"
                value="#{item.selected}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:commandLink value="№"
                    actionListener="#{SessionsController.sort}">
                    <f:attribute name="№" value="№" />
                </h:commandLink>
            </f:facet>
            <h:outputText
                value="#{table.rowIndex + SessionsController.firstRow + 1}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:commandLink value="Account Session ID"
                    actionListener="#{SessionsController.sort}">
                    <f:attribute name="sortField" value="Account Session ID" />
                </h:commandLink>
            </f:facet>
            <h:outputText value="#{item.aSessionID}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:commandLink value="User ID"
                    actionListener="#{SessionsController.sort}">
                    <f:attribute name="sortField" value="User ID" />
                </h:commandLink>
            </f:facet>
            <h:outputText value="#{item.userID}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:commandLink value="Activity Start Time"
                    actionListener="#{SessionsController.sort}">
                    <f:attribute name="sortField" value="Activity Start Time" />
                </h:commandLink>
            </f:facet>
            <h:outputText value="#{item.activityStart}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:commandLink value="Activity End Time"
                    actionListener="#{SessionsController.sort}">
                    <f:attribute name="sortField" value="Activity End Time" />
                </h:commandLink>
            </f:facet>
            <h:outputText value="#{item.activityEnd}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:commandLink value="Activity"
                    actionListener="#{SessionsController.sort}">
                    <f:attribute name="sortField" value="Activity" />
                </h:commandLink>
            </f:facet>
            <h:outputText value="#{item.activity}" />
        </h:column>
    </h:dataTable>

テーブルの行をクリックして、詳細を表示する新しいページを開きたいです。aSessionIDSQLクエリに使用されるテーブルキーを使用して、データベースからデータを取得したいと思います。キーを渡すために使用できることは知っていh:commandLinkますが、醜いhtmlリンクは必要ありません。JSFテーブルの行をクリックしてキーを渡し、新しいウィンドウを開く他の方法はありますか？

幸運をお祈りしています

編集

私はここで1つの可能な解決策を見つけました

このJavaScriptコードを使用すると、ユーザーが行をクリックしたときに新しいウィンドウを開くことができます。

<table id="row_link"> 
  <tbody> 
    <tr>
      <td><a href="link1.html">link</a></td> 
      <td>info 1</td> 
    </tr>       
    <tr>
      <td><a href="link2.html">link</a></td> 
      <td>info 2</td> 
    </tr>       
  </tbody> 
</table>

$("table#row_link tbody tr").click(function () {
    window.location = $(this).find("a:first").attr("href");
});

aSessionID問題は、このキーを新しいウィンドウに渡す方法です。上記の例hrefでは、リンクを新しいウィンドウに渡すために使用されています。JSFテーブルで使用できる属性は何ですか？

score 2 · Accepted Answer

@BalusC（JSFエキスパート）には、JSF 1.2でのDatatableの管理に関する投稿がありますが、JSF2.xでも機能します。クリックセクションの選択行に関心があります。

アップデート：

例を説明しましょう。まず、すべてのJSFコンポーネントIDは次の形式になります::、例：

<h:form id="myForm">
    <h:inputText id="myInputText" value="#{myBean.textValue}" />
</h:form>

これにより、HTMLが生成されます。

<form id="myForm">
    <input type="text" id="myForm:myInputText" />
</form>

次に、データテーブル用に生成されたDOMを更新する必要があります。彼はjavascriptでそれを行っており、jsコードも提供しています。

function addOnclickToDatatableRows() {
    //gets all the generated rows in the html table
    var trs = document.getElementById('form:dataTable').getElementsByTagName('tbody')[0]
        .getElementsByTagName('tr');
    //on every row, add onclick function (this is what you're looking for)
    for (var i = 0; i < trs.length; i++) {
        trs[i].onclick = new Function("highlightAndSelectRow(this)");
    }
}

3番目に、js関数を定義しhighlightAndSelectRowます（名前は好きなように変更できます）。

function highlightAndSelectRow(tr) {
    //get all the datatable rows
    var trs = document.getElementById('form:dataTable').getElementsByTagName('tbody')[0]
        .getElementsByTagName('tr');
    //find the selected rowby using the tr parameter
    for (var i = 0; i < trs.length; i++) {
        if (trs[i] == tr) {
            //once found it, change the color (maybe you don't need this part)
            trs[i].bgColor = '#ff0000';
            //update a hidden value in the form (maybe you need this code)
            document.form.rowIndex.value = trs[i].rowIndex;
            //here, you can add js code to open a new window
            //or simulate a button/link click or something else you need.
        } else {
            trs[i].bgColor = '#ffffff';
        }
    }
}

更新2：

このケースのテストを行いました。フェイスレットを使用してそれを実行するためのコードを紹介します。

DataTable.xhtml

<script type="text/javascript">
    function addOnclickToDatatableRows() {
        //gets all the generated rows in the html table
        var trs = document.getElementById('myForm:dataTable').getElementsByTagName('tbody')[0]
            .getElementsByTagName('tr');
        //on every row, add onclick function (this is what you're looking for)
        for (var i = 0; trs.length > i; i++) {
            trs[i].onclick = new Function("rowOnclick(this)");
        }
    }

    function rowOnclick(tr) {
        var elements = tr.cells[0].childNodes;
        for(var i = 0; elements.length > i; i++) {
            //get the link
            if ((typeof elements[i].id !== "undefined") &amp;&amp;
                (elements[i].id.indexOf("lnkHidden") > -1)) {
                //open a new window/tab using the href generated in link
                window.open(elements[i].href);
                break;
            }
        }
        return false;
    }
</script>

<h:form id="myForm">
    <h1>Show data</h1>
    <h:dataTable id="dataTable" var="data" value="#{datatableBean.lstData}">
        <h:column>
            <f:facet name="header">
                <h:outputText value="ID" />
            </f:facet>
            <h:outputText value="#{data.id}" />
            <!-- define a hidden link for every row of the datatable
                 the value attribute contains the page to redirect. -->
            <h:outputLink id="lnkHidden" value="AnotherPage.xhtml"
                            style="display:none">
                <f:param name="id" value="#{data.id}" />
            </h:outputLink>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Value" />
            </f:facet>
            <h:outputText value="#{data.value}" />
        </h:column>
    </h:dataTable>
</h:form>

DataTableBeanクラス

@ManagedBean
@ViewScoped
public class DatatableBean {

    private List<Data> lstData;
    /**
    * Creates a new instance of datatableBean
    */
    public DatatableBean() {
        lstData = new ArrayList<Data>();
        lstData.add(new Data(1, "Hello World"));
        lstData.add(new Data(2, "Hello StackOverflow"));
        lstData.add(new Data(3, "Hello Luiggi"));
        System.out.println("LOL");
    }
    //define getters and setters...
}

AnotherPage.xhtml

<h1>This is another page</h1>
<h:panelGrid columns="2">
    <h:outputText value="Selected ID" />
    <h:outputText value="#{anotherPageBean.id}" />
</h:panelGrid>

AnotherPageBeanクラス

@ManagedBean
@RequestScoped
public class AnotherPageBean {

    private int id;
    /**
    * Creates a new instance of AnotherPageBean
    */
    public AnotherPageBean() {
        try {
            this.id = Integer.parseInt((String)FacesContext
               .getCurrentInstance().getExternalContext()
               .getRequestParameterMap().get("id"));
            //by getting the id you can get more data
        }
        catch (Exception e) {
            this.id = 0;
        }
    }

java - JSFページをナビゲートする方法は？

1 に答える 1

Related

Reference