Tag Archive binding

jQuery.Calx2:binding

เพราะว่าตารางที่ต้องนำมาแสดงค่าการคำนวณมาจากระบบอื่นและใช้ในจุดอื่นๆ ด้วยดังนั้นการเพิ่มแอติบิว data-cell และ data-formula มันไม่ค่อยจะเหมาะนัก ลองใช้ .data แล้วกลับพบว่าสคริปมันไม่ทำงานเหมือน jQuery.Calx2: ใช้สูตร Excel ใน เว็บ ซะงั้น ลองแก้ปัญหาดูจนได้ code

[code language=”html” title=”dynamic.html”]<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>jQuery Calx: dynamic</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>1,022.00</td>
<td>ccc</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="8"></td>
<td colspan="5">Total Premium to be Refund(USD)</td>
<td>(622.19)</td>
<td></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() {

let sheetA = $(‘#sheetA’);

let row = $(‘tr:eq(1)’, sheetA);
$(‘td:eq(10)’, row).attr({
"data-cell": "K24"
});
$(‘td:eq(11)’, row).attr({
"data-cell": "L24",
"data-formula": "K24+197"
});
$(‘td:eq(12)’, row).attr({
"data-cell": "M24",
"data-formula": "L24-(L24*0.1)"
});
$(‘td:eq(13)’, row).attr({
"data-cell": "N24",
"data-formula": "-(M24*O24)/365"
});
$(‘td:eq(14)’, row).attr({
"data-cell": "O24",
"data-formula": "H24-G24+1"
});

row = $(‘tr:eq(2)’);
$(‘td:eq(14)’, row).attr({
"data-cell": "O25",
"data-formula": "N27"
});

sheetA.calx();
});
</script>
</body>

</html>[/code]

การใช้ .attr() แทน .data() ที่เป็น function โดยตรงกลับทำงานได้ซะงั้น บางครั้ง programmer ก็ต้องอ้อมโลกบ้าง