.

VaKeR CYBER ARMY

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-mobile/demo/

Upload File :

Current File : /var/www/html/libs/absol-mobile/demo/tabletest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SelectBox</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>

    <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
    <link rel="stylesheet" href="https://pictogrammers.github.io/@mdi/font/5.3.45/css/materialdesignicons.min.css" media="all" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://absol.cf/hightlight/highlight.pack.js"></script>
    <script src="../dist/absol-mobile.js?"></script>
    <script>
        var $ = absol.$;
        var _ = absol._;
    </script>
    <style>
        .table {
            font-family: Arial, Helvetica, sans-serif;
            display: table;
            border: 1px solid black;
            border-collapse: collapse;
        }

        .tr {
            display: table-row;
        }

        .td {
            border: 1px solid black;
            display: table-cell;
            padding: 5px;
        }

        .item-text {

        }

        .item-desc {
            font-style: italic;
        }
    </style>
</head>
<body>
<div id="info">
    <div><label>Create : </label><span id="ctime"></span></div>
    <div><label>Render : </label><span id="rtime"></span></div>
    <button onclick="test()">Test</button>
</div>
<div id="demo">

</div>
<script>
    function genItems(n, withDesc) {
        return Array(n).fill(null).map(function (u, i) {
            return {
                text: '[' + i + ']' + absol.string.randomPhrase(0),
                value: i,
                desc: withDesc ? absol.string.randomPhrase(30) : null
            }
        });
    }

    var demoDiv = $('.demo');
    var items = genItems(6000, true);

    function createRow(item) {
        return _({
            class: 'tr',
            child: [
                {
                    class: ['td', 'item-text'],
                    child: {
                        tag: 'span',
                        child: { text: item.text }
                    }
                },
                {
                    class: ['td', 'item-desc'],
                    child: {
                        text: item.desc
                    }
                }
            ]
        })
    }

    var demoDiv = $('#demo');
    var ctime = $('#ctime');
    var rtime = $('#rtime');

    function test() {
        demoDiv.clearChild();
        var table = _('.table');
        var now = new Date();
        for (var i = 0; i < items.length; ++i) {
            table.addChild(createRow(items[i]));
        }
        var cTimeValue = new Date().getTime() - now.getTime();
        ctime.innerHTML = cTimeValue + 'ms';

        demoDiv.addChild(table);
        var bound = table.getBoundingClientRect();
        // hàm này chỉ trả về kết quả khi thực sự được vẽ ra
        var rTimeValue = new Date().getTime() - now.getTime() - cTimeValue;
        rtime.innerHTML = rTimeValue + 'ms';

    }

</script>
</body>
</html>

VaKeR 2022