arteyazilim / rowsorter Goto Github PK

View Code? Open in Web Editor NEW

72.0 5.0 23.0 107 KB

Drag & drop table row sorter pluging with touch support for Vanilla JS and jQuery.

Home Page: http://borayazilim.github.io/rowsorter

License: MIT License

JavaScript 100.00%

rowsorter's Introduction

RowSorter.js

Drag & drop row sorter plugin.

Works on Touch devices.
Supports IE8+ and all other modern browsers.
No framework dependency (But registers itself as a jquery plugin if exists.)

Install

bower install rowsorter

<script type="text/javascript" src="/path/dist/RowSorter.js"></script>

Usage

<script type="text/javascript">
//// No Framework
// Set table as sortable
new RowSorter('#table_id'/*, options*/);
// Undo last drag
RowSorter.undo('#table_id');
// Destroy sortable
RowSorter.destroy('#table_id');

//// jQuery Plugin
// Set table as sortable
$('#table_id').rowSorter(/*options*/);
// Undo last drag
$.rowSorter.undo('#table_id');
// Destroy sortable
$.rowSorter.destroy('#table_id');
</script>

Options:

@string   handler         : drag handler selector (default: null)
@boolean  tbody           : pass true if want to sort only tbody > tr. (default: true)
@string   tableClass      : adds this class name to table while rows are sorting (default: "sorting-table")
@string   dragClass       : dragging row's class name (default: "sorting-row").
@number   stickTopRows    : count of top sticky rows (default: 0),
@number   stickBottomRows : count of bottom sticky rows (default: 0),
@function onDragStart     : (default: null)
@function onDragEnd       : (default: null)
@function onDrop          : (default: null)

Handling Events

    onDragStart: function(tbody, row, old_index) {
        // find the table
        // if options.tbody is true, this param will be tbody element
        // otherwise it will be table element
        var table = tbody.tagName === "TBODY" ? tbody.parentNode : tbody;

        // old_index is zero-based index of row in tbody (or table if tbody not exists)
        console.log(table, row, old_index);
    },

    // if new_index === old_index, this function won't be called.
    onDrop: function(tbody, row, new_index, old_index) {
        // find the table
        // if options.tbody is true, this param will be tbody element
        // otherwise it will be table element
        var table = tbody.tagName === "TBODY" ? tbody.parentNode : tbody;

        // old_index is stored index of row in table/tbody before start the dragging.
        // new_index is index of row in table/tbody after the row has been dragged.
        console.log(table, row, new_index, old_index);
    },

    // if new_index === old_index, this function will be called.
    onDragEnd: function(tbody, row, current_index) {
        console.log('Dragging the ' + current_index + '. row canceled.');
    }

Samples

File Sizes

Minified: ~7kb
Minified and gzipped: < 3kb

rowsorter's People

Contributors

Stargazers

Watchers

rowsorter's Issues

Scroll Browser Window for Long Tables

I've noticed that for tables that are larger than the window's viewport that the window doesn't scroll while dragging. This can make it difficult to drag an item over a long table. Anyone else run into this and figure out a work around?

Smarty table row generated in loop not working

Hey !
I have been trying to use the plugins on a 'foreach loop tr ' table without any success.
I just past and glue some example code in smarty tpl file, and that's works well. So the probleme don't belongs into smarty.
Any idea or solution ?
Much thanks in advance

If jquery detected, doesn't allow Vanilla js..

Our team is slowly trying to move away from jQuery, so we'd like to use the non-jQuery approach to new'ing up the object. However, it seems to automatically detect that we have jQuery and force us to use the jQuery approach. Any ideas how we can get around this?

Chrome v. 43 issue

Hi,
Script is not working on Chrome v. 43.0.2357.130.
No issue on Firefox 39.0 and IE 11.

Anybody beside me affected?

Release the latest code

Hello,
I find the onDragEnd event really useful.
I know I can just the download the latest version, but I like getting it versioned through bower.
Can you please make a release with the latest code?
Thank you and happy new year!

Problem with Form Fields.

Hi, I have a table inside a form, in each row I have a couple of text fields.

When I click the form field inside the table row, it just ignore that I want to write inside... in other words, I'm unable to use a combobox and/or an input box... is there a way to fix this?? please advise.

Thank you! awesome (if this can be fixed)

Multiple rows

Is there any way that this can support multiple rows? For example, I have 3 rows with same class.

Multiple tables RowSorter

I'd like to know if there's a way to use RowSorter in multiple tables on the same page.

Bower support

Would be awesome if you would make it easier installing the script with bower. Thanks anyhow!

TypeError when dragging handler beyond the screen edge

This might be a minor issue, but wanting to bring this console warning to the attention of the developer for sake of removing any potential bugs it might cause in the future.

RowSorter.min.js:731 Uncaught TypeError: Cannot read property 'tagName' of null
at closest (RowSorter.min.js:731)
at RowSorter._move (RowSorter.min.js:267)
at RowSorter.touchmove (RowSorter.min.js:247)
closest @ RowSorter.min.js:731
RowSorter._move @ RowSorter.min.js:267
touchmove @ RowSorter.min.js:247

Steps to reproduce:

Create a sortable table, with drag handler attached to td.
Drag a table row up/down and move touch pointer beyond the screen edge.

Eventuelly see this video: http://recordit.co/uoK2hL7JnY

So far in my testing this appears to have no negative effects, in relation to callbacks being fired.
both "onDragStart" and "onDrop" fires successfully.

Windows 10 with chrome 58.0.3029.110 (64-bit)

Hello, I'm using this plugin my question is, it is possible determinate a area only drag by class of <tr>, it is possible?

Hello, I'm using this plugin my question is, it is possible determinate a area only drag by class of tr, it is possible?

Enhancement Request - all ability to specify "nodrag" on a TD element

sometimes there are TD elements in a rows that have other actions - links, buttons, etc.
If you offered a way to exclude those TD cells from the drag and drop it would allow rowsort and still have the ability to interact with links, buttons, etc on certain cells.

Customizing <td class="sorter"> Cell.

Is there a way we can include a glyphicon in the < td class="sorter" > .

See attached mockup.

Get index of draged row

How can I get the Index of the draged row?
Something like on your demo website...

event in the table

Hey!

I try to open a popver with a click on a button inside a of a rowsorter table. But it doesn't work. Same things for modals and any actions except tooltips.

Any solution for me?

Thank you!

Set Handler on element in td

Is it possible to set the handler on a Element in a td?
Something like: handler: "td.sorter.elementInsideTd".

Ps: Great libary 💯

Unable to use form fields in table cells

I have several TD cells with select tags in my table. I also have an input tag in a TD cell. I am unable to change the selected value with rowsorter enabled. Any solution to this?