0

我正在使用允许将视图临时导出到 Excel 的 ax XPage，我希望用户不仅可以选择哪些列，还可以按照他们认为合适的方式重新组织它们。虽然我可以使用 inputTextarea 来做到这一点，但我更愿意将 UL 与启用 jQuery 的可排序条目一起使用。不幸的是，我对 XPages、jQuery 或扩展库并不熟悉。

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

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 上添加和删除，或者可能将 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

在另一个 Stack Overflow 问题上找到了一些帮助

通过在 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 回答