使用JQuery UI可选插件选择多个项目

在JQuery UI可选插件中，我希望能够在大型表格网格的不同部分中选择多个单元格。通常，单击一个项目将取消选择其他项目，除非用户也按住了修改键。您可以在jQuery Selectable demo上看到此行为。我怎样才能防止在不使用键盘的情况下取消选中鼠标上突出显示的单元格？使用JQuery UI可选插件选择多个项目

来源

2012-03-09 Deepa Thalikar

一个例子 - 在[的jsfiddle（HTTP：//www.jsfiddle）比如 - 会更容易让我们想象你的问题。 – 2012-03-09 21:36:45

文档说明“用光标绘制一个框来选择项目，按住Ctrl键可以做出多个不相邻的选择。” – 2012-03-09 21:37:02

@Didier Ghys-我想要的是这里：http：//jqueryui.com/demos/selectable /＃display-grid，除了它会在鼠标向上取消选择之前的选择并选择一个新的单元格。 – 2012-03-09 21:58:47

一个可能的解决方案：

<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 type="text/javascript"> 
    $(function() { 
     $("#selectable").bind("mousedown", function(e) { 
      e.metaKey = true; 
     }).selectable({ 
      stop: function() { 
       var result = $("#select-result").empty(); 
       $(".ui-selected", this).each(function() { 
        var index = $("#selectable li").index(this); 
        result.append(" #" + (index + 1)); 
       }); 
      } 
     }); 
    }); 
</script> 

<p id="feedback"> 
    <span>You've selected:</span> <span id="select-result">none</span>. 
</p> 

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

来源

2012-03-09 23:04:02 r0m4n

使用JQuery UI可选插件选择多个项目

回答

相关问题