extjs 使多选控件可排序

eaf3rand 于 2022-11-04 发布在其他

关注(0)|答案(4)|浏览(157)

有人知道如何使多选（见下面的HTML）可排序吗？使用jQuery或Ext JS？所谓可排序，我的意思是我可以向上或向下拖动一个项目（一个选项）来重新定位它在选择控件中的位置。

<select id="testing" multiple=multiple>
    <option>First Option</option>
    <option>Second Option</option>
    <option>Third Option</option>
    <option>Forth Option</option>
    <option>5 Option</option>
    <option>6 Option</option>
    <option>7 Option</option>
</select>

extjs

来源：https://stackoverflow.com/questions/3199689/making-a-multiple-select-control-sortable

4条答案

按热度按时间

czq61nw11#

selectize/selectize.js

这可以附加到文本（自由标记）以及选择。我确实有拖放和删除按钮插件。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
<script>
$(function() {
    $('select').selectize({
      plugins: ['remove_button', 'drag_drop']
  });
});
</script><select multiple>
<option value ="1">One</option>
<option value ="2" selected>Two</option>
<option value ="3" selected>Three</option>
</select>

jshjohnson/Choices
它可以附加到一个选择元素上，并有一个 ordered 选项，它会重写选择选项的顺序。因此，您的选择将以您选择它们的顺序返回。拖放是不可能的，但will not be implemented。

其他库在UI中显示选择顺序，但不允许拖放，也不允许相应地更改选择

其他选择库对它们的选项进行排序，而不首先考虑排序

未知但不太可能

jQuery Selectpick
https://prevwong.github.io/awesome-select/
PebbleRoad/combo-select
zeusdeux/fuzzy-dropdown显示器
dd平滑
Hierarchy Select jQuery Plugin for Twitter Bootstrap 4
BenMMcLean/BetterSelecter显示器
bschueller/jquery.selectMe显示器

赞(0）回复(0）举报 2022-11-04

j8yoct9x2#

您不能通过拖放来可靠地执行此操作。<select multiple>可以使用操作系统的选择列表小部件来实现，该小部件通常不会像原生HTML元素那样生成mouse事件。
你必须用一堆<div>的类似物来替换<select>，这些类似物确实以正常的方式提供了可排序性，不管你想用哪个库/插件来做它。大多数插件并不能真正做到完全。
更简单的替代方法是使用单独的“上移”/“下移”按钮，这些按钮在元素中查找并移动选定的<option>。

赞(0）回复(0）举报 2022-11-04

3bygqnnd3#

jQuery UI提供了一些可排序的功能，请参阅http://jqueryui.com/demos/sortable/。

赞(0）回复(0）举报 2022-11-04

mnemlml84#

我从网上经过研究和搜索得到了解决方案。请尝试以下一个-

<!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#move-up').click(moveUp);
        $('#move-down').click(moveDown);
    });

    function moveUp() {
        $('#selected-items select :selected').each(function(i, selected) {
            if (!$(this).prev().length) return false;
            $(this).insertBefore($(this).prev());
        });
        $('#selected-items select').focus().blur();
    }

    function moveDown() {
        $($('#selected-items select :selected').get().reverse()).each(function(i, selected) {
            if (!$(this).next().length) return false;
            $(this).insertAfter($(this).next());
        });
        $('#selected-items select').focus().blur();
    }
    </script>
    </head>
    <body>
    <div id="selected">
        <div><strong>Selected</strong></div>
        <div id="selected-items">
            <select multiple="multiple" id="selected_fields" name="selected_fields[]">
                <option>one</option>
                <option>two</option>
                <option>three</option>
                <option>four</option>
            </select>
        </div>
    </div>

    <div id="priority">
        <div><input type="button" id="move-up" value="UP" /></div>
        <div><input type="button" id="move-down" value="DOWN" /></div>
    </div>
    </body>
    </html>

赞(0）回复(0）举报 2022-11-04

我来回答

extjs 使多选控件可排序

4条答案

selectize/selectize.js

其他库在UI中显示选择顺序，但不允许拖放，也不允许相应地更改选择

其他选择库对它们的选项进行排序，而不首先考虑排序

未知但不太可能

相关问题

热门标签

最新问答