Question

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

Answer 1

一种可能的解决方案：

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

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

1 个答案: