Giter VIP home page Giter VIP logo

antonrzevskiy / tableedit Goto Github PK

View Code? Open in Web Editor NEW
4.0 1.0 2.0 1.01 MB

Plugin for creating an editable table from an array, textarea, table and not only. You can easily add and delete rows, cells. The plugin contains enough options and callback functions for quick customization for your task.

License: GNU General Public License v3.0

JavaScript 93.95% HTML 4.21% CSS 1.84%
javascript jquery bootstrap

tableedit's Introduction

TableEdit

Usage

From HTML Table

<table id="from-table" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>head 1</th>
            <th>head 2</th>
            <th>head 3</th>
            <th>head 4</th>
            <th>head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>value</td>
            <td colspan="2" class="warning colspan">value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
    </tbody>
</table>
jQuery(document).ready(function($){

    $('#from-table').tableEdid();

});

From HTML Textarea

<textarea id="from-textarea" class="hidden">

    [
        [ {"val":"head 1"}, {"val":"head 2"}, {"val":"head 3"}, {"val":"head 4"}, {"val":"head 5","settings":{"class":"danger"}} ],
        [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value","settings":{"class":"warning"}} ],
        [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value","settings":{"class":"warning"}} ],
        [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value","settings":{"class":"warning"}} ],
        [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value","settings":{"class":"warning"}} ],
        [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value","settings":{"class":"warning"}} ]
    ]

</textarea>
jQuery(document).ready(function($){

    $('#from-textarea').tableEdid();

});

From Array or Json (TBody section only)

var Table = [
    [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"} ],
    [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"} ],
    [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"} ],
    [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"} ],
    [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"} ]
];

Table.tableEdid();

From Object (ALL Sections)

var Table = {
    "theadArray": [
        [ {"val":"head 1"}, {"val":"head 2"}, {"val":"head 3"}, {"val":"head 4"}, {"val":"head 5"} ]
    ],
    "tbodyArray": [
        [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"} ],
        [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"} ],
        [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"} ],
        [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"} ],
        [ {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"}, {"val":"value"} ]
    ],
    "tfootArray": [
        [ {"val":"foot 1"}, {"val":"foot 2"}, {"val":"foot 3"}, {"val":"foot 4"}, {"val":"foot 5"} ]
    ]
};

Table.tableEdid();

tableedit's People

Contributors

amerezhko avatar antonrzevskiy avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

tableedit's Issues

Call order callbacks

Здесь показан типичный вызов функции $.fn.tableEdid() для, наглядной демонстрации порядка вызова колбек функций.


Обычный вызов функции для таблицы из одной колонки и двух строк генерирует:

  1. createTableManagerBefore
  2. defineTypeBefore
  3. defineTypeAfter
  4. compileTableBefore
  5. compileTableAfter
  6. createHeaderBefore
  7. setMatrixBefore
  8. setMatrixAfter
  9. createRowControlsBefore
  10. createRowControlsAfter
  11. createHeaderAfter
  12. createRowBefore
  13. createCellBefore
  14. setMatrixBefore
  15. setMatrixAfter
  16. createCellAfter
  17. createRowControlsBefore
  18. createRowControlsAfter
  19. createRowAfter
  20. createTopControlsBefore
  21. addStubBefore
  22. addStubAfter
  23. createTopControlsAfter
  24. createBottomControlsBefore
  25. addStubBefore
  26. addStubAfter
  27. createBottomControlsAfter
  28. addTableBefore
  29. defineOutputConteinerBefore
  30. defineOutputMethodBefore
  31. defineOutputMethodAfter
  32. defineOutputConteinerAfter
  33. addTableAfter
  34. createTableManagerAfter
  35. eventsBindBefore
  36. eventsBindAfter

Этот пример актуален на момент выхода #11.

CSS & WRAP

A presentable design is needed for the table.

What happens to merged cells?

What will happen when creating a search page?
What will happen when editing?
Can I change rowspan or colspan?
What happens when the value in the stretched cell changes?

Callback parameters

res = fn.apply((context || this),[args,callbacks[name],i,name]);

Добавляя в качестве колбека именованную функцию, параметр name может быть использован для определения метода который вызывает эту функцию.

Например

var testFn = function( callbacks,index,args,name ) {
    if( name === 'createRowAfter' ) {
        // some logic
    }
    else if( name === 'addTableAfter' ) {
        // another logic
    }
    else {
        // another logic too
        return false;
    }
    return true;
};

$.TableEdid.callbacks.createRowAfter = testFn;
$.TableEdid.callbacks.addTableAfter = testFn;

Create the core of the plugin!

The core must meet the following requirements:

  • Methods must be stored separately from the called function

  • Methods and properties can be encapsulated in an object at any time

  • The function can receive options at the time of the call

  • Each table must be independent of the others

Deprecated — $.TableEdit.localPlugin

Refusal of this object is obvious. Instead, the properties must specify the functions passed to the $.TableEdit.init. This method will be more logical and similar to ECMAScript 2015.

How to get the result HTML?

How can i get the result HTML when i finished editing?
I have a container with a table in it and a button:

<div id="container"></div>
<button id="btn">Save</button>

<script type="text/javascript">
    $(document).ready(function() {
        $('#container').html($('#someotherfield.val());

        var tableInContainer = $('#container').find('table').first();
        tableInContainer.tableEdit({
            compileTableAfter: function() {
                $( this.table ).addClass('tableEdit');
            },
            eventsBindAfter: function() {
                var button = $('#btn');
                button.on('click', this, function(e) {
                    //@todo here i need some property or method of e.data to write the edited contents back to #container!
                });
                return true;
            }
        });
    });
</script>

I've tried several properties/methods (e.g. dataTableObject, html, ...) but none of them could write the HTML table tag with original classes and colspans.

Getters & Setters

It is forbidden to directly access the property! It is necessary to securely receive or set any properties in objects

Table of speed test measures.

All statuses for comparison. (in ms.)

1 time:

  • speed of light (0 - 0.01)
  • very fast (0.01 - 0.1)
  • fast (0.1 - 0.5)
  • slowly (0.5 - 1)
  • very slowly (1 - 10)
  • the brake (10 - 9999)

50000 times:

  • speed of light (0 - 100)
  • very fast (100 - 400)
  • quickly (400 - 800)
  • slowly (800 - 1200)
  • very slowly (1200 - 3000)
  • the brake (3000 - 9999)

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.