0

ビューを 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>
4

1 に答える 1

0

別のスタック オーバーフローの質問に関するヘルプが見つかりました

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>
于 2013-03-11T15:03:06.053 に答える