jQuery Plugin For Easy Table Rows / Cells Selection - Table Selector

An easy to use jQuery table selector plugin which enables the user to select multiple cells or rows of your html table while outputting the selected items/values just like the token/tag input.

How to use it:

1. Place jQuery library together with the jQuery Table Selector's JS and CSS files into the html file.

<link rel="stylesheet" href="css/selector.css">
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js/selector.js"></script>

2. Create a DIV container next to the target html table that will place the values of selected table cells / rows.

<div id="selector"></div>

3. Active the plugin:

var s = $('#target').Selector({
    id: "selector",
    title: "selected items：",
    table: {
      type: 'cell',
      id: "target"
    }
}).show();

4. Listen to a certain function and trigger an action when finishing.

var s = $('#target').Selector({
    id: "selector",
    title: "selected items：",
    table: {
      type: 'cell',
      id: "target"
    }
}).show();

5. The example JavaScript to stimulate an async operation.

// Stimulate an async function
asyncFn = function (callback) {
    setTimeout(function () {
        callback();
    }, 2000);
    alert("async function has started, please wait...");
};

// Add a button to start the async operation
s.addActionButton({
    name: "async",
    action: function () {
        asyncFn(function () {
            alert("async function is done!");
        });
    }
});

// Listen to the async operation and trigger an action when finishing
s.bindListener({
    scope: this,
    method: "asyncFn",
    action: function () {
        alert("async function listened!");
    },
    async: 0// callback position in an async function
});

6. Plugin's default settings:

var options = {

    //selector id
    id:selectorId, 

    //index of key data
    index:0, 

    //selector title
    title:title, 

    //hide without selection; default:true
    hidable:true, 

    //add button
    actions:[ 
       {
           name:name,//button name
           action:function(){},//button action
       }
    ],

    table:{
       data:"data", //attribute set on tr or td
       splitter:",", //split multiple data
       type: "row" //cell or row
    },

    //trigger when a certain function called
    listener:{ 
       scope:obj,
       method:fn, //listened function
       action: function(){},//call after listened function called
       async:index// position of the argument in an async function
    }
    
}

Change log:

2016-09-03

• JS update

---

This awesome jQuery plugin is developed by goforu. For more Advanced Usages, please check the demo page or visit the official website.