使用显示标记为表的每一行提供编辑和删除按钮

时间:2011-12-19 12:21:44

标签: jsp dojo struts2 action displaytag

我使用display标签在JSP上的表中显示数据(使用struts 2)。现在我想为每一行提供两个链接,一个用于编辑&一个用于删除行。

我的jsp结构和我目前正在尝试的是:

<s:url id="editReport" action="editReport" />
<sd:div href="%{editReport}" listenTopics="editReport" formId="actionForm" showLoadingText="false" preload="false">
    <s:url id="updLists" action="updLists" />
    <sd:div href="%{updLists}" listenTopics="updLists" formId="enterDayReport" showLoadingText="false" preload="false">
        <s:form id="enterDayReport" action="enterDayReport">
            <sd:autocompleter  label="Customer " name="customer" list="customerList"  valueNotifyTopics="updLists" autoComplete="false" searchType="substring"/>
            <sd:autocompleter  label="Contact "  name="contact"  list="contactList"   valueNotifyTopics="updLists" autoComplete="false" searchType="substring"/>
            <s:select          label="Stage "    name="stage"    list="stageList"     headerKey="0" headerValue="Select" />
            <s:select          label="Type "     name="type"     list="typeList"      headerKey="0" headerValue="Select" />
            <sd:datetimepicker label="Date"      name="date"     formatLength="small" displayFormat="dd - MMM - yyyy"/>
            <s:textarea        label="Summary"   name="summary"  cols="40" rows="10"/>
            <s:submit          value="Save Report"/>
        </s:form>
    </sd:div>
</sd:div>

<s:url id="deleteReport" action="deleteReport" />
<sd:div href="%{deleteReport}" listenTopics="deleteReport" formId="actionForm" showLoadingText="false" preload="false">
    <disp:table name="dayReportsList" export="true" class="dataTable">
        <disp:column property="contactCode" title="Contact"/>
        <disp:column property="customerCode" title="Customer"/>
        <disp:column property="stage" title="Stage"/>
        <disp:column property="type" title="Type"/>
        <disp:column property="summary" title="Summary"/>
        <disp:column property="reportDate" title="Date" format="{0,date,dd-MMM-yyyy}" />
        <disp:column property="rowId" href="%{editReport}" paramId="rowID" paramProperty="rowId" title="Action">
            <s:form id="actionForm" name="actionForm">
                <s:hidden id="rowId" name="rowId" value="%{rowId}"/>  // This is not getting populated.
                <s:a onclick="dojo.event.topic.publish('editReport')">Edit<s:property value="rowId"/></s:a><br>
                <s:a onclick="dojo.event.topic.publish('deleteReport')">Delete</s:a>
            </s:form>
        </disp:column>
    </disp:table>
</sd:div>

我在这里遇到的问题是,与显示标记中每一行相关联的表单的name是相同的。因此,当我尝试访问动作类中的rowId变量时,无论单击哪一行的按钮,我都只得到第一行的rowId的值。

我在堆栈溢出和google上看到了一些使用URL重写的例子,但我不想使用它。

请告知。

谢谢!

2 个答案:

答案 0 :(得分:1)

我认为这归结为你如何使用dojo发布事件。我不太清楚dojo是如何工作的,但你的按钮是

dojo.event.topic.publish('editReport')

所以我看不到“editReport”事件的订阅者如何知道您要删除的行,以及它必须删除哪一行。

documentation for publish表明参数可以传递给publish函数。将rowId作为参数传递给subscribe函数,并在函数编辑/删除行中使用此参数。

编辑:

页面末尾http://struts.apache.org/2.1.8/docs/ajax-div-template.html显示了一个动态更改div的href然后刷新div的示例。我会使用类似的策略:在页面中编辑(或删除)报表,使用唯一的表单(而不是每行一个表单)。让每个行链接将事件发布到以行ID作为参数的主题。让侦听主题的JavaScript函数动态地更改唯一表单的隐藏rowId字段的值,然后告诉div刷新自己。

答案 1 :(得分:0)

对于仍然坚持要做的事情的人来说,这就是我最终为了让它发挥作用而做的事情。

JSP:

<s:url id="editReport" action="editReport" />
<sd:div href="%{editReport}" listenTopics="editReport" formId="actionForm" showLoadingText="false" preload="false">
    <s:url id="updLists" action="updLists" />
    <sd:div href="%{updLists}" listenTopics="updLists" formId="enterDayReport" showLoadingText="false" preload="false">
        <s:form id="enterDayReport" action="enterDayReport">
            <sd:autocompleter  label="Customer " name="customer" list="customerList"  valueNotifyTopics="updLists" autoComplete="false" searchType="substring"/>
            <sd:autocompleter  label="Contact "  name="contact"  list="contactList"   valueNotifyTopics="updLists" autoComplete="false" searchType="substring"/>
            <s:select          label="Stage "    name="stage"    list="stageList"     headerKey="0" headerValue="Select" />
            <s:select          label="Type "     name="type"     list="typeList"      headerKey="0" headerValue="Select" />
            <sd:datetimepicker label="Date"      name="date"     formatLength="small" displayFormat="dd - MMM - yyyy"/>
            <s:textarea        label="Summary"   name="summary"  cols="40" rows="10"/>
            <s:hidden          id="filedOnDate"  name="filedOnDate"/>
            <s:submit          value="Save Report"/>
        </s:form>
    </sd:div>
</sd:div>

<s:url id="deleteReport" action="deleteReport" />
<sd:div href="%{deleteReport}" listenTopics="deleteReport" formId="actionForm"  showLoadingText="false" refreshOnShow="true" preload="false">
    <s:form id="actionForm" name="actionForm" action="">
        <disp:table uid="dayReport" name="dayReportsList" export="true" class="dataTable">
            <disp:column property="contactCode" title="Contact"/>
            <disp:column property="customerCode" title="Customer"/>
            <disp:column property="stage" title="Stage"/>
            <disp:column property="type" title="Type"/>
            <disp:column property="summary" title="Summary"/>
            <disp:column property="reportDate" title="Date" format="{0,date,dd-MMM-yyyy}" />
            <disp:column title="Action">
                <s:a href="" onclick="editEvent(event,%{#attr.dayReport.rowId});">Edit</s:a><br>
                <s:a href="" onclick="deleteEvent(event,%{#attr.dayReport.rowId});">Delete</s:a>
            </disp:column>
        </disp:table>
        <s:hidden id="rowId" name="rowId"/>
    </s:form>
</sd:div>

JS文件:

function editEvent(e,rowId)
{
    dojo.byId('rowId').value=rowId;
    dojo.event.topic.publish('editReport');
}

function deleteEvent(e,rowId)
{
    dojo.byId('rowId').value=rowId;
    dojo.event.topic.publish('deleteReport');
}

这就是这里发生的事情:

单击编辑或删除时,将调用js中的相应函数(并传递rowId)。每个函数首先将隐藏字段的值设置为rowId值(作为函数的参数),然后它会删除一个主题。发布主题时,相应的div调用操作并使用新内容刷新。这里我提到了div标签中表单的表单id,因此该操作具有隐藏字段的值,该字段已在javascript中设置为rowId。

希望这有助于

Kanishk