如何根据xe:simpleValuePicker中的选择修改UL

Question

我正在使用axXPage，它允许将视图临时导出到Excel，我希望用户不仅可以选择哪些列，还可以根据自己的意愿重新组织它们。虽然我可以使用inputText区域来完成这项工作，但我更愿意使用具有jQuery功能的可排序条目的UL。不幸的是，我对XPages、jQuery或扩展库并不熟悉。

我的inputText区域很简单，但复制粘贴文本很麻烦，而且用户可能会输入一些无效的列标题（我根据他们选择的列标题计算要导出的行）。

<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>

jQuery中有一个不错的小示例，其中的HTML应该是这样的，以允许用户拖放排序：

<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上进行添加和删除，或者在inputText区域中放入onChange，但事实证明，这超出了我的能力。

任何指导或想法都值得赞赏。非常感谢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>

Answer 1

在另一个堆栈溢出问题上找到了一些帮助

我在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>