ビューを Excel にアドホックにエクスポートできる ax XPage を使用しています。ユーザーが列を選択するだけでなく、必要に応じて再編成できるようにしたいと考えています。inputTextarea を使用してこれを行うこともできますが、jQuery 対応のソート可能なエントリで UL を使用したいと思います。残念ながら、私は XPages、jQuery、または Extension Library にあまり詳しくありません。
私のinputTextareaはシンプルですが、テキストをコピーして貼り付けるのは面倒で、ユーザーが無効な列ヘッダーを入力するリスクがあります(選択した列ヘッダーに基づいてエクスポートする行を計算します)。
<xp:inputTextarea id="example" multipleSeparator=";"
rows="6" style="width:270.0px" value="#{reportDoc.WhichFields}">
</xp:inputTextarea>
valuepicker のコードは各インスタンスで同じです
<xe:valuePicker for="example" id="valuePicker1"
dialogTitle="Select the columns to include">
<xe:this.dataProvider>
<xe:simpleValuePicker valueListSeparator=",">
<xe:this.valueList><![CDATA[#{javascript:var
viewName=@UpperCase(getComponent("viewChoice").getValue());
var tmp = @DbLookup(@DbName(),"dbprofile",viewName,"Value");
tmp = "None";
var thisdb:NotesDatabase=session.getCurrentDatabase();
if (viewName != ""){
var view:NotesView=thisdb.getView(viewName);
tmp = view.getColumnNames();
}
@If(@IsError(tmp),"None",tmp)}]]>
</xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
拡張ライブラリの ListTextBox は便利ですが、クリックするとリストから削除され、ドラッグするのではなく、水平ではなく垂直にする構文がわかりません。
<xe:djextListTextBox id="example" multipleSeparator=";"></xe:djextListTextBox>
ユーザーがドラッグ アンド ドロップでソートできるようにするには、HTML を次のようにする jQuery の素敵な小さなサンプルがあります。
<div class="demo">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</div>
次に、ソート可能を管理するための単純なスクリプト ブロックを一番下に配置します。
<xp:scriptBlock id="scriptBlock1">
<script type="text/javascript" src="js/jquery-1.7.2.min.js" />
<script type="text/javascript" src="ui/jquery.ui.core.js" />
<script type="text/javascript" src="ui/jquery.ui.widget.js" />
<script type="text/javascript" src="ui/jquery.ui.mouse.js" />
<script type="text/javascript" src="ui/jquery.ui.sortable.js" />
<script type="text/javascript">
$(document).ready(function() {
$( "#sortable" ).sortable({ placeholder: "ui-state-highlight" });
$( "#sortable" ).disableSelection();
});
}
</script>
</xp:scriptBlock>
valuePicker からの出力を構成して、LI で追加と削除を行うか、onChange を inputTextarea に配置できることを望んでいましたが、それを考える能力を超えていることが証明されています。
ガイダンスやアイデアをいただければ幸いです。Russ Maher に感謝します。最近の DC AdminDev での彼の講演により、私はこの方向で作業するようになり、さらに質問して彼を悩ませることを許可してくれました。
編集: ListBoxText で onChange を使用し、UL で繰り返しを使用することで、さらにうまくいきました。選択肢は新しい LI として UL にドロップされますが、ドラッグ アンド ドロップすることはできません。
<xe:djextListTextBox id="djextListTextBox1" multipleSeparator=";">
<xp:eventHandler event="onChange" submit="true"
refreshMode="partial" refreshId="sortable">
</xp:eventHandler>
</xe:djextListTextBox>
そして繰り返し：
<ul id="sortable">
<xp:repeat id="repeat1" rows="30" var="myChoices">
<xp:this.value><![CDATA[#{javascript:getComponent("djextListTextBox1").getValue();}]]></xp:this.value>
<li class="ui-state-default"><xp:label value="#{javascript:myChoices;}">
</xp:label></li>
</xp:repeat>
</ul>