Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory :  /var/www/html/libs/absol-sheet/demo/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

var _ = absol._;
var $ = absol.$;
window.data_module = {};


var exemples = [{
    exampleTitle: "Các loại khác",
    config:{
        // fixedCol: 2,
        // readOnly:true,
    },
    propertyNames: [
        'date_time_type',
        'week_type',
        'date_level',
        'value',
    ].concat(Array(30).fill(0).map((u, i) => 'col_' + i)),
    propertyDescriptors: {
        date_time_type: {
            type: "DateTime",
            text: "Ngày giờ",
            onchange: "{{week_type = date_time_type}}",
            required: true,
        },
        week_type: {
            type: "week",
            text: "Tuần",
            // calc: "= date_time_type"
        },
        value: {
            type: 'number',
            text: "Tiền",
            required: true
        },
        date_level :{
            type: 'DateNLevel',
        }
    },
    records: Array(300).fill(null).map(() => {
        return {
            date_level:{ value: new Date(new Date().getTime() + Math.floor(3600 * 24 * 3000 * Math.random())), level:'date'},
            date_time_type: new Date(new Date().getTime() + Math.floor(3600 * 24 * 3000 * Math.random()))
        };
    })
}];

Array(30).fill(0).forEach((u, i) => {
    exemples[0].propertyDescriptors['col_' + i] = {
        type: 'number',
        text: 'Cột số ' + (i + 1)
    }
});

exemples.forEach(function (data, i) {
    var fragment = new absol.Fragment();
    _({
        tag: 'h3',
        child: { text: data.exampleTitle }
    }).addTo(document.body);
    var editor = new absol.sheet.TableEditor(Object.assign({ fragment: fragment }, data.config));
    editor.on('change', function () {
        console.log(this.getData().records)
    })
    editor.getView().addClass("simple-table")
        .addStyle({
            // height: '50vh',
            width: '90vw'
        })
        .addTo(document.body);
    editor.setData(Object.assign(absol.copyJSVariable(data), {records:[]}));





    return;
    _({
        tag: 'flexiconbutton',
        props: {
            icon: 'span.mdi.mdi-download',
            text: `Download(ex_${i}.json)`
        },
        on: {
            click: function () {
                absol.FileSaver.saveTextAs('module.exports = ' + absol.generateJSVariable(data), `Download(ex_${i}).js`)
            }
        }
    }).addTo(document.body);

    _({
        tag: 'flexiconbutton',
        style: { margin: '5px' },
        props: {
            icon: 'span.mdi.mdi-download',
            text: `Export`
        },
        on: {
            click: function () {
                var json = editor.getData();
                var code = JSON.stringify(json, null, 4);
                absol.FileSaver.saveTextAs(code, absol.string.nonAccentVietnamese(data.exampleTitle.replace(/\s/g, '_')));
            }
        }
    }).addTo(document.body);

    _({
        tag: 'flexiconbutton',
        style: { margin: '5px' },
        props: {
            icon: 'span.mdi.mdi-download',
            text: `Focus Incomplete Cell`
        },
        on: {
            click: function () {
                editor.focusIncompleteCell();
            }
        }
    }).addTo(document.body);

    _('br').addTo(document.body);
    _('br').addTo(document.body);
});


_({
    tag: 'textarea',
}).addTo(document.body);