Site icon PlusMagi's Blog By Pitt Phunsanit

jQuery.Calx2: ใช้สูตร Excel ใน เว็บ

แรกเริ่มเดิมที่ user จะให้ไฟล์ excel ตัวอย่างการคำนวณมาให้ sa แล้ว sa ก็ส่งสูตรตัวนี้มาให้ทาง programmer เปลี่ยนเป็น javascript พอมีการแก้สูตรตัวนี้กระบวนการก็เริ่มอีกครั้งหนึ่ง ทั้งๆ ที่บางครั้งมีการเปลี่ยนแค่สูตรเดียวเท่านั้น แต่เพราะการเขียนด้วย javascript ที่ซับซ้อนกว่า ทำให้ต้องใช้เวลาในการแก้ไขมากกว่าที่ควรจะเป็น

จะดีกว่ามั๋ย ถ้าหากว่า เราสามารถใช้ excel formula ได้ในหน้าเว็บเลย โดยไม่ต้องมาแปลงเป็นภาษาอื่นและ sa หรือใครก็ตามสามารถมาแก้มันได้เอง จึงเป็นที่มาของ xsanisty/jquery-calx ที่จะช่วยใช้การทำงานเร็วขึ้นมาก

การใช้งานง่ายๆ เพียงแค่ใส่ data 2 ตัวคือ data-cell=” { cell reference } ” และ data-formula=” {สูตร excel ที่ต้องการ} “กับการเรียกใช้อีกเล็กน้อย

<script>
    $(document).ready(function() {
        $('#sheetA').calx();
    });
</script>

เท่านั้น

ตัวอย่างการใช้งาน

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery Calx: basic</title>
    <link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" rel="stylesheet" type="text/css">
</head>

<body>
    <table class="table table-bordered table-hover table-striped" id="sheetA" width="100%">
        <thead>
            <tr>
                <td width="58">No.</td>
                <td width="145">First Name</td>
                <td width="126">Last Name</td>
                <td width="135">Relationship to policyholder / main insured</td>
                <td width="191">Employee name<br /> (main insured)</td>
                <td width="100">Period<br /> Start Date<br /> (dd/mm/yy)
                </td>
                <td width="105">Effetive Date<br /> (dd/mm/yy)
                </td>
                <td width="101">Period<br /> End Date<br /> (dd/mm/yy)
                </td>
                <td width="109">DOB</td>
                <td width="51">Age</td>
                <td width="113">ACF - Vital<br /> Annual Premium</td>
                <td width="113">Annually Premium included AGA</td>
                <td width="113">Annual Premium<br /> after 10%<br /> Gr. Discntd</td>
                <td width="107">Prorated Premium<br /> (USD)
                </td>
                <td width="74">Duration Days</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Tianyi</td>
                <td>Deng</td>
                <td>Employee</td>
                <td>-</td>
                <td>15-May-17</td>
                <td>20-Oct-17</td>
                <td>14-May-18</td>
                <td>24-May-1989</td>
                <td>27</td>
                <td data-cell="K24">1,022.00</td>
                <td data-cell="L24" data-formula="K24+197"></td>
                <td data-cell="M24" data-formula="L24-(L24*0.1)"></td>
                <td data-cell="N24" data-formula="-(M24*O24)/365"></td>
                <td data-cell="O24" data-formula="H24-G24+1"></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="8"></td>
                <td colspan="5">Total Premium to be Refund(USD)</td>
                <td>(622.19)</td>
                <td data-cell="O25" data-formula="N27"></td>
            </tr>
        </tfoot>
    </table>
    <script src="../vendor/components/jquery/jquery.min.js"></script>
    <script src="jquery-calx-2.2.7.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#sheetA').calx();
        });
    </script>
</body>

</html>

เพียงเท่านี้ เราก็สามารถจะคำนวณค่าต่างๆ ได้เหมืือนใช้ excel ได้แล้วโดยไม่ต้องแก้สูตรให้ยุ่งยากเลย

Exit mobile version