使用 jQuery UI Selectable 实现多重选择

Question

任何人都可以帮助我使用 jquery ui 可选择库来执行以下功能：

• 允许用户通过鼠标单击选择多个项目
• 如果已通过鼠标单击选择项目，则取消选择该项目

Answer 1

这是在另一个问题中解决的，但我在这里为通过谷歌找到此内容的任何人重新发布。如果你在jQuery中绑定“mousedown”事件并在那里设置metaKey（就好像用户按住ctrl/cmd键一样），那么当你调用selectable时，它已经被设置了。

$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable();

Answer 2

不使用 Selectable 但这将使您通过已有的设置获得所需的行为：

而不是

$( "#selectable" ).selectable()

尝试

$(".ui-widget-content").click( function() {
    $(this).toggleClass("ui-selected");
});

Answer 3

您是否检查了演示页面是否可以选择？你已经可以做到这一点了。要选择多个项目，只需按住 Control 键即可。这与处理文件的方式类似。使用“Ctrl+单击”还不够好吗？

演示代码在这里：

<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script>
    $(function() {
        $( "#selectable" ).selectable();
    });
    </script>

<div class="demo">

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

</div>

Answer 4

看看我在这个线程上的回答。

jQuery UI 可选择 - 使多重选择默认

它包括完整的可选 ui js 的代码替换以及概述所需的更改，使其成为可以通过的选项。

Answer 5

使用此代码可能对您没有帮助，

  $('#selectable').bind("mousedown", function (e) {
      e.metaKey = true;    
 }).selectable('filter : td')​

如果您在表上使用 td 的可选择项，则

请使用 selectable('filter : td') 否则使用 selectable()