Xpages:数据表的搜索框

时间:2014-06-11 07:49:30

标签: search datatable xpages lotus-notes

我的Xpage上有一个DataTable。我在JavaScript中填充了一个包含来自4个Notes数据库的元素的数组,我已经将它返回到Table中以在DataTable上显示它。

这样可行,但现在我需要一个搜索(带搜索按钮的编辑框)来搜索和更新DataTable中的结果。

这可能吗?我只找到了一个数据表的解决方案,它直接绑定到一个视图,而没有找到“手动”填充的DataTable。

这是我的Datatable代码,其中包含用于创建数组的JS代码

<xp:dataTable id="dataTable3" rows="990" var="coll2Test"
                style="width:70%" indexVar="idx">


                <xp:this.facets>
                    <xp:pager partialRefresh="true"
                        layout="Previous Group Next" 
xp:key="header" id="pager8">
                    </xp:pager>
                </xp:this.facets>


                <xp:this.value><![CDATA[#{javascript:


var fa:NotesDatabase = session.getDatabase(@DbName()[0], "???????");
var faSh:NotesDatabase = session.getDatabase(@DbName()[0],"???????");
var faKb:NotesDatabase = session.getDatabase(@DbName()[0],"???????");
var fa20:NotesDatabase = session.getDatabase(@DbName()[0],"???????");


var vFa:NotesView = fa.getView("???????");
var vSh:NotesView = faSh.getView("???????");
var vKb:NotesView = faKb.getView("????????");
var v20:NotesView = fa20.getView("???????");


var doc:NotesDocument = vFa.getFirstDocument();
var docSh:NotesDocument = vSh.getFirstDocument();
var docKb:NotesDocument = vKb.getFirstDocument();
var doc20:NotesDocument = v20.getFirstDocument();


var faArr= new Array();


while(doc!= null) {

var eintrag = new Array();
eintrag.push(doc.getItemValue("Name"));
eintrag.push(doc.getItemValue("Description"));

faArr.push(eintrag)

doc = vFa.getNextDocument(doc);


}

while(docSh!= null) {

var eintrag = new Array();
eintrag.push(docSh.getItemValue("Name"));
eintrag.push(docSh.getItemValue("Description"));

faArr.push(eintrag)

docSh = vSh.getNextDocument(docSh);

}

..... 
//another 2 while
...




return faArr;}]]></xp:this.value><xp:table>
                    <xp:tr>
                        <xp:td>
                            <xp:label 
value="Suche:"     id="label14"


style="font-        weight:bold">
                            </xp:label>
                        </xp:td>
                        <xp:td>
                            <xp:inputText    
id="inputText7"
                                value="#
{viewScope.searchView6}">


                            </xp:inputText>
                        </xp:td>
                        <xp:td>
                            <xp:button value="suchen"
                                id="button7">
                                <xp:eventHandler 
event="onclick"


submit="true" refreshMode="complete" immediate="false"

save="true" id="eventHandler7">
                                </xp:eventHandler>
                            </xp:button>
                        </xp:td>
                    </xp:tr>
                </xp:table>









                <xp:column id="column6">
                    <xp:this.facets>
                        <xp:label id="label11" 
xp:key="header"

style="color:rgb(0,128,255);font-weight:bold"
                            value="Name">

                        </xp:label>
                    </xp:this.facets>
                    <xp:text escape="false" 
id="computedField5">


                        <xp:this.value><![CDATA[#
{coll2Test[0]}]]></xp:this.value>
                    </xp:text>
                </xp:column>
                <xp:column id="column7">
                    <xp:this.facets>
                        <xp:label id="label12" 
xp:key="header"

style="color:rgb(0,128,255);font-weight:bold"
                            value="Description">
                        </xp:label>
                    </xp:this.facets>
                    <xp:text escape="true" id="computedField6">

                        <xp:this.value><![CDATA[#
{coll2Test[1]}]]></xp:this.value>
                    </xp:text>
                </xp:column>

            </xp:dataTable>

此致

的Stefan

1 个答案:

答案 0 :(得分:1)

将完全填充的JavaScript数组写入视图范围变量,例如viewScope.AllEntries在开头。使用

填充您的DataTable
  • 如果未输入搜索字符串,则为完整数组。
  • 如果用户输入了搜索字符串,则匹配搜索字符串的值

这样您只需要从四个视图中读取一次数据,然后根据搜索字符串过滤它。

将代码移至beforePageLoad事件。在顶部添加

if (viewScope.AllEntries) {
    return;
}

并将最后一行return faArr;替换为

viewScope.AllEntries = faArr;

这样您只需计算一次faArr并将其存储在viewScope.AllEntries中。

将DataTable“value”中的代码替换为:

if (!viewScope.search) {
    return viewScope.AllEntries;
}
...create and return an array (walking through viewScope.AllEntries)
...which contains only elements with search string viewScope.search

搜索字段可以是绑定到viewScope的编辑字段,如viewScope.search。当用户点击搜索按钮时,触发DataTable的部分刷新。