Giter Club home page Giter Club logo

multiselectable.js's Introduction

multiselectable.js

jQuery plugin enabling multi-selection of table rows.

(Demo)

Usage

Apply to the table or tbody containing the selectable rows:

$("table").multiselectable();
// or
$("tbody").multiselectable();

Options

The markSelected and markUnselected options define functions to call when the selection changes. By default, the selected class is added or removed.

$("table").multiselectable({

    markSelected: function($row) {
        $row.css("background-color", "yellow");
    },

    markUnselected: function($row) {
        $row.css("background-color", "white");
    }

});

The consumers option is a selector for elements that consume click events. By default, these are a, button, input, and select elements. The row selection will not be altered when the event target is a consumer.

You may provide a callback function that receives a jQuery set of currently selected rows whenever the selection changes. The individual rows are marked before the callback is invoked.

$("table").multiselectable({}, function($selectedRows) {
    alert($selectedRows.size() + " rows selected.");
});

multiselectable.js's People

Contributors

macu avatar

Watchers

James Cloos avatar  avatar

multiselectable.js's Issues

Support dynamically updated tables

Restructure the plugin to allow removing the multiselectable behaviour from tables, and reapplying to tables that have either gained or lost rows.

Ctrl+click has bad behaviour on OS X

Ctrl+click opens a context menu in Chrome 32, Firefox 21, and Safari 7 on OS X Mavericks.

Cmd+click actually selects table cells at the browser level in Firefox 21, and cmd+c will copy the contents of those cells.

Consider recognising ctrlKey, metaKey, and altKey as equivalent keys for activating toggle select.

Enable text-selection while not selecting rows

Currently text-selection is disabled across the selectable rows. Find a better solution.

Possible solution:
Disable text selection while shift is held, and re-enable when shift is released.

Inconsistent naming

multiselectable (plugin name)
Multiselectable Tables (plugin title)
multiselectable.js (repo)
multiselectable.js (repo readme header)
jquery.multselectable.js (src filename)
Multiselectable jQuery plugin (src file header)

Maybe rename the src file and change the src file header. Look into how other projects do it.

Clicking buttons and links alters selection

v0.1.2 ignores clicks on input and select elements so that checkboxes, text fields, etc. can be updated without altering row selection.

Extend this to links and buttons also, by default, and allow specifying the selector in the plugin options for elements that consume clicks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.