Tag Archive attribute

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 ก็ต้องอ้อมโลกบ้าง

ลิงค์ดาวโหลดไฟล์แบบชื่อสวยๆ

ถ้าเขียน php คงจะคุ้นกับการที่ใช้ php อ่านไฟล์แล้วใช้คำสั้่ง header ให้ download เป็นชื่ออื่นๆ

ถ้าไฟล์ไม่เป็นความลับที่จะต้องปกปิด หรือไม่ใช่ไฟล์ที่ generate ออกมาใหม่ สามารถใช้ความสามารถใหม่ใน HTML5 ได้ คือ download attribute วิธีใช้ก็ง่ายมาก

[code language=”html” title=”downloadAttribute.html”]
<!DOCTYPE html>
<html>
<head>
<title>HTML5 : Download Attribute</title>
<meta name="author" content="Pitt Phunsanit">
</head>
<body>
<h1>Download With Other Name</h1>
<a href="IMG_0003.JPG" download="Pitt_Phunsanit">Download File With Name</a>
</body>
</html>
[/code]

อธิบายง่ายๆคือ ทำลิงค์ตามปกติแค่ ใส่

  • attribute href ชี้ว่าไฟล์อยู่ที่ไหน
  • attribute download จะบอกชื่อไฟล์ ถ้าไม่ใส่นามสกุลให้ มันจะเอานามสกุลไฟล์เดิมใส่ให้อัตโนมัติ

แต่เพราะเป็นคำสั่งใหม่ จึงมี browser รองรับดังนี้

  • google chrome 14.0
  • microsoft edge 13.0
  • mozilla firefox 20.0
  • opera 15.0 นู๋ก็รับนะ
  • apple safari ไม่รับอยู่เจ้าเดียว

สรุปง่ายๆคือ windows ต่ำกว่า 10 กับ mac มันจะใช้ไม่ได้ 100% จึงเป็นตัวเลือกที่ต้องใช้เทคนิคอื่นร่วมด้วย