通过模式复选框选择将文档添加到另一个文档

时间:2015-06-04 06:51:17

标签: javascript html5 twitter-bootstrap xpages

我是xpages和IBM的新手,我是JavaScript的新手。所以为了让你更容易理解我的问题,我添加了一个我想做的例子。

示例:我创建了一个Person文档,现在我想向该Person添加一个事件,反之亦然(这意味着当我向该人添加一个事件时,该人被添加到该事件中)。

所以我使用文档只读模式来预览Person文档,在只读模式内我有一个<xp:panel>,其中包含bootstrap面板。在引导程序面板的标题中有一个连接到模态的按钮,其中包含事件文档的视图。在引导程序面板的主体中有一个视图,我预览了添加的事件。

在模态中,我在第一列中添加了复选框,因此我可以选择要添加到个人文档的项目。

我需要将哪些操作添加到模态的“添加”按钮,以将所选文档添加到“个人”文档中?

<xp:panel>
        <xp:this.rendered><![CDATA[#{javascript:!DodajOseb.isNewNote() !DodajOseb.isEditable()}]]></xp:this.rendered>

        <div class="panel panel-default" style="margin-left:auto;margin-right:auto;width:60%">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Events
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="margin-left:80%;">
                        Add an event
                    </button>
                </h3>

                <!-- Modal -->
                <div id="myModal" class="modal fade" role="dialog">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">
                                    <span class="glyphicon glyphicon-remove-circle"></span>
                                </button>
                                <h4 class="modal-title">
                                    Choose events&#160;<small>that you want to add</small>
                                </h4>
                            </div>
                            <div class="modal-body">
                                <p>
                                    <xp:panel>
                                        <xp:this.data>
                                            <xp:dominoView var="DogodekView" viewName="Dogodki_Rez" keys="#{javascript:sessionScope.imeDogodka}">
                                            </xp:dominoView>
                                        </xp:this.data>
                                        <xp:viewPanel rows="7" id="viewPanel1" viewStyle="width:100.0%">
                                            <xp:this.facets>
                                                <xp:pager partialRefresh="true" layout="Previous Group Next" xp:key="headerPager" id="pager1">
                                                </xp:pager>
                                            </xp:this.facets>

                                            <xp:this.data>
                                                <xp:dominoView var="Dogodki" viewName="Dogodki" keys="#{javascript:sessionScope.imeDogodka}">
                                                </xp:dominoView>
                                            </xp:this.data>

                                            <xp:viewColumn columnName="NMnaziv" id="viewColumn2" style="text-align:center" showCheckbox="true">
                                                <xp:viewColumnHeader value="Event" id="viewColumnHeader2" style="text-align:center">
                                                </xp:viewColumnHeader>
                                            </xp:viewColumn>
                                            <xp:viewColumn columnName="RadioButton" id="viewColumn4" style="text-align:center">
                                                <xp:viewColumnHeader value="Duration" id="viewColumnHeader4" style="text-align:center">
                                                </xp:viewColumnHeader>
                                            </xp:viewColumn>
                                            <xp:viewColumn columnName="TXlokacija" id="viewColumn15" style="text-align:center">
                                                <xp:viewColumnHeader value="Location" id="viewColumnHeader15" style="text-align:center">
                                                </xp:viewColumnHeader>
                                            </xp:viewColumn>
                                            <xp:viewColumn columnName="AUorganizator" id="viewColumn16" style="text-align:center">
                                                <xp:viewColumnHeader value="Author" id="viewColumnHeader16" style="text-align:center">
                                                </xp:viewColumnHeader>
                                            </xp:viewColumn>
                                        </xp:viewPanel>
                                    </xp:panel>
                                </p>
                            </div>
                            <div class="modal-footer">

                                <xp:button value="Save" id="button6">
                                    <xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true"></xp:eventHandler>
                                </xp:button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="panel-body">
                <xp:panel id="panelMain">
                    <xp:this.data>
                        <xp:dominoView var="view1" viewName="Dogodki">
                        </xp:dominoView>
                    </xp:this.data>
                    <xp:text escape="true" id="computedField1" style="display:none;">
                        <xp:this.value><![CDATA[#{javascript://*var vw:NotesView = database.getView("(vwPovezava)"); requestScope.data = new Array(@DbLookup("","(vwPovezava)","385A946ECD7C3207C1257E58002DE8A3",2),"467DD3771032D779C1257E570043CF5D");}]]></xp:this.value>
                    </xp:text>
                    <div class="row">
                        <div class="col-md-2">
                            <xp:label value="" id="label2">Event</xp:label>
                        </div>
                        <div class="col-md-2">
                            <xp:label value="" id="label4">Duration</xp:label>
                        </div>
                        <div class="col-md-2">
                            <xp:label value="" id="label5">Starting date</xp:label>
                        </div>
                        <div class="col-md-2">
                            <xp:label value="" id="label6">Ending date</xp:label>
                        </div>
                        <div class="col-md-2">
                            <xp:label value="" id="label7">Location</xp:label>
                        </div>
                        <div class="col-md-2">
                            <xp:label value="" id="label8">Author</xp:label>
                        </div>
                    </div>
                    <xp:br></xp:br>
                    <xp:repeat id="repeat1" rows="30" var="rowData" indexVar="indexData" value="#{javascript:requestScope.data}" style="text-align:center;">
                        <div class="row" rows="0">
                        <xp:text escape="true" id="computedField3" style="display:none;">
                            <xp:this.value><![CDATA[#{javascript:var vw = database.getView("Dogodki"); requestScope.docData = vw.getDocumentByKey(rowData);}]]></xp:this.value>
                        </xp:text>

                        <div class="col-md-2">
                        <xp:text escape="true" id="event" tagName="div" style="float:left;">
                            <xp:this.value><![CDATA[#{javascript:return requestScope.docData.getItemValueString("NMnaziv");}]]></xp:this.value>
                        </xp:text>
                        </div>
                        <div class="col-md-2">
                        <xp:text escape="true" id="duration" tagName="div" style="float:left;">
                            <xp:this.value><![CDATA[#{javascript:return requestScope.docData.getItemValueString("RadioButton");}]]></xp:this.value>
                        </xp:text>
                        </div>
                        <div class="col-md-2">
                        <xp:text escape="true" id="startingDate" tagName="div" style="float:left;">
                            <xp:this.value><![CDATA[#{javascript:return requestScope.docData.getItemValue("TXodDatuma");}]]></xp:this.value>
                        </xp:text>
                        </div>
                        <div class="col-md-2">
                        <xp:text escape="true" id="endingDate" tagName="div" style="float:left;">
                            <xp:this.value><![CDATA[#{javascript:return requestScope.docData.getItemValue("TXdoDatuma");}]]></xp:this.value>
                        </xp:text>
                        </div>
                        <div class="col-md-2">
                        <xp:text escape="true" id="location" tagName="div" style="float:left;">
                            <xp:this.value><![CDATA[#{javascript:return requestScope.docData.getItemValueString("TXlokacija");}]]></xp:this.value>
                        </xp:text>
                        </div>
                        <div class="col-md-2">
                        <xp:text escape="true" id="author" tagName="div" style="float:left;">
                            <xp:this.value><![CDATA[#{javascript:return requestScope.docData.getItemValueString("AUorganizator");}]]></xp:this.value>
                        </xp:text>
                        </div>
                        <div style="clear:both;">&#160;</div>
                        </div>
                    </xp:repeat>
                </xp:panel>
            </div>
        </div>
    </xp:panel>'

1 个答案:

答案 0 :(得分:2)

我建议您不要尝试将事件添加到“个人”文档,而只需将“人员”名称添加到所选的每个“事件”文档的“与会者”字段中。然后,您可以使用我们在“旧Notes”(单一类别嵌入式视图)中调用的内容来显示已添加此人的事件。

挑战在于您拥有该模态,但这些值不会保存在任何地方。当数据未绑定到文档时保存文档意味着复选框列选择没有意义。这些都只是一个信息显示。如果您使用该XPage重新打开文档,则在重新打开模式时不会检查任何内容。

请参阅@SerdarBasegmez对此问题的回答,了解如何将人员姓名添加到已检查的每个文档中:How to get marked rows in the XPages Extension Library <xe:dataView> design element?