如何使用托管bean单击行并传递变量

Question

I have a example with h:datatable which is used to open a new page when the user clicks on a table row. 我有一个h：datatable示例，用于在用户单击表行时打开新页面。 Unfortunately this example uses the http header to pass argument to the opened page. 不幸的是，这个例子使用http标头将参数传递给打开的页面。 My question is can this be implemented but with passing the argument into the background not with the header? 我的问题是，这可以实现，但将参数传递到后台而不是标题？

This is the complete source code : 这是完整的源代码：

This is the JSF page: 这是JSF页面：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <head>
        <title>test</title>
        <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 childNodes = tr.childNodes;
                //                for(var i = 0; childNodes.length > i; i++) {
                //                    
                //                }

                var elements = tr.cells[0].childNodes;
                for(var i = 0; elements.length > i; i++) {
                    if ((typeof elements[i].id !== "undefined") &amp;&amp;
                    (elements[i].id.indexOf("lnkHidden") > -1)) {
                      //opne in a new window//  window.open(elements[i].href);
                        location.href=elements[i].href
                        break;
                    }
                }
                return false;
            }
        </script>
    </head>
    <body onload="addOnclickToDatatableRows();">
        <h:form id="myForm">
            <h1>Click on table row example</h1>
            <h:dataTable id="dataTable" var="data" value="#{datatableBean.lstData}" border="1">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="ID" />
                    </f:facet>
                    <h:outputText value="#{data.id}" />
                    <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="Value1" />
                    </f:facet>
                    <h:outputText value="#{data.value}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Value2" />
                    </f:facet>
                    <h:outputText value="#{data.value}" />
                </h:column>
            </h:dataTable>
        </h:form>
    </body>
</html>

This is the managed bean: 这是托管bean：

    package edu.home;

    import edu.home.model.Data;
    import java.util.ArrayList;
    import java.util.List;
    import javax.faces.bean.ManagedBean;
    import javax.faces.bean.ViewScoped;

    @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 123"));
            lstData.add(new Data(3, "Hello abv"));
            lstData.add(new Data(4, "Hello qaz"));
        }

        /**
         * @return the lstData
         */
        public List<Data> getLstData() {
            return lstData;
        }

        /**
         * @param lstData the lstData to set
         */
        public void setLstData(List<Data> lstData) {
            this.lstData = lstData;
        }
    }

This is the class Data:

package edu.home.model;

public class Data {

    private int id;
    private String value;

    public Data(int id, String value) {
        this.id = id;
        this.value = value;
    }
    /**
     * @return the id
     */
    public int getId() {
        return id;
    }

    /**
     * @param id the id to set
     */
    public void setId(int id) {
        this.id = id;
    }

    /**
     * @return the value
     */
    public String getValue() {
        return value;
    }

    /**
     * @param value the value to set
     */
    public void setValue(String value) {
        this.value = value;
    }
}

I'm sure that this is possible but I can thing of a way to pass the argument into the appropriate way. 我确信这是可能的，但我可以通过适当的方式传递参数。

Best wishes 最好的祝愿

EDIT I understand that the h:outputLink must be changed this way: 编辑我明白h:outputLink必须以这种方式改变：

<h:column>
    <f:facet name="header">
        <h:outputText value="ID" />
    </f:facet>
    <h:outputText value="#{data.id}" />
    <h:commandLink id="lnkHidden" value="AnotherPage.xhtml"
                    style="display:none">
        <f:param name="id" value="#{data.id}" />
    </h:commandLink>
</h:column>

But I don't understand how the managed bean must be changed. 但我不明白如何更改托管bean。 Maybe I suppose if AnotherPage.xhtml can access the managed bean of DataTable.x hml and take the value that I want to pass? 也许我想如果AnotherPage.xhtml可以访问DataTable.x hml的托管bean并获取我想传递的值？ But maybe then I need to change the javaScript? 但也许我需要更改javaScript？

Answer 1

You try using and render your table by yourself. 您尝试自己使用并渲染表格。

Here is my sample. 这是我的样本。 Modify it according to your requirement. 根据您的要求进行修改。 I used JSF 2.0 我用过JSF 2.0

<h:form id="nextPage">

    <table>
        <ui:repeat var="row" value="#{shoppingCartMB.shoppingItems}">
            <tr onclick="clickedMe('#{row.productId}');">
                <td>#{row.productId}</td>
            </tr>
        </ui:repeat>
    </table>

    <script>

        function clickedMe(id)
        {

            // Please modify following URL base on ur requirment.. 
            // Following is just for sample..
            location.href="#{request.contextPath}/product/" + id;
        }

    </script>
</h:form>

Here is some of pretty-config.xml 这是一些pretty-config.xml

<url-mapping id="productMB-loadProductDetail">
    <pattern value="/product/#{ productMB.productId }" />
    <view-id value="/pages/product-detail.jsf" />      
    <action>#{productMB.loadProductDetail}</action>  
</url-mapping>

There inside productMB (managed bean) 's loadProductDetail() , you put another redirect(..). 在productMB（托管bean）的loadProductDetail（）里面，你放了另一个重定向（..）。

Something like this.. 像这样的东西......

response.sendRedirect(request.getContextPath() + "/product-info");

in pretty config again.. 在漂亮的配置再次..

You have to put config for above url.. 你必须把配置为上面的网址..

<url-mapping id="product-info">
    <pattern value="/product-info" />
    <view-id value="/pages/product-info.jsf" />
</url-mapping>

In my app, I did something like that to hide some URL. 在我的应用程序中，我做了类似的事情来隐藏一些URL。

Hope this help. 希望这有帮助。

Here is my sample source code and my understanding.. I uploaded in zip file to 4shared.com http://www.4shared.com/zip/ctPZ4Dbj/URL_Hidding.html 这是我的示例源代码和我的理解..我在zip文件中上传到4shared.com http://www.4shared.com/zip/ctPZ4Dbj/URL_Hidding.html

如何使用托管bean单击行并传递变量

问题描述

1 个解决方案

解决方案1
2 已采纳 2012-05-11 13:54:13

如何使用托管bean单击行并传递变量

问题描述

1 个解决方案

解决方案1 2 已采纳 2012-05-11 13:54:13

解决方案1
2 已采纳 2012-05-11 13:54:13