active – PlusMagi's Blog By Pitt Phunsanit

Bootstrap: dynamic tabs hash

เพราะว่า dynamic tabs ของ Bootstrap มันจะไม่เลือก tabs จาก hash หรือเครื่องหมาย # ใน url ถ้าต้องการให้แสดงแท็บที่ต้องการจาก links ต้องเขียน code เพิ่มเติมอีกเล็กน้อย

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Bootstrap: Dynamic Tabs With Hash</title>
<link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
<h2>Dynamic Tabs With Hash</h2>

<input id="tabindex" name="tabindex" type="text">

<ul class="nav nav-tabs">

<li class="nav-item">
<a class="active nav-link show" data-toggle="tab" href="#menu1">Menu 1</a>
</li>

<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>

<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a>
</li>
</ul>

<div class="tab-content">

<div id="menu1" class="active fade in show tab-pane">
<h3>Menu 1</h3>
<p>นาย</p>
</div>

<div id="menu2" class="fade tab-pane">
<h3>Menu 2</h3>
<p>พิชญ์</p>
</div>

<div id="menu3" class="fade tab-pane">
<h3>Menu 3</h3>
<p>พันธุ์สนิท</p>
</div>

</div>

</div>

<script src="../vendor/components/jquery/jquery.min.js"></script>
<script src="../vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {

let hash = window.location.hash.substr(1);
let tabindex = $('#tabindex');
if (hash != tabindex.val()) {
$('a[href="#' + hash).click();
tabindex.val(hash);
}

});
</script>

</body>

</html>

เมื่อเปิดหน้าเว็บมาจาก url ที่ใส่ # ของแท็บที่ต้องการมา เช่น http://localhost/snippets/Bootstrap/tabs.dynamic.hash.html#menu2 แท็บก็จะเปิดหน้าที่ถูกต้องตามที่ต้องการ แทนที่จะดูจาก class active เพียงอย่าเดียว

สร้าง excel เป็นชุดแบบหลายหน้าชีท

บางครั้งก็ต้องส่งออกข้อมูลเป็นชุดจำนวนมากหลายชีท ข้อมูลหนึ่งก็ใส่ไว้ในอีกชีทหนึ่ง ก็ใช้การแก้เล็กน้อยจากตัวอย่าง สร้าง excel จาก PHP

<?php

/* PHPExcel_IOFactory - Reader */
include 'PHPOffice/PHPExcel/Classes/PHPExcel.php';

$objPHPExcel = new PHPExcel();

/* Set default style */
$defaultStyle = $objPHPExcel->getDefaultStyle();

$defaultStyle->getFont()
    ->setName('Arial')
    ->setSize(11);

$defaultStyle->getNumberFormat()
    ->setFormatCode('yyyy-mm-dd');

/* Set document properties */
$title = 'Exports_Datas_' . date('Y-m-d_H:i');
$objPHPExcel->getProperties()->setCreator('Pitt Phunsanit')
    ->setCategory('Exports Datas')
    ->setDescription($title)
    ->setKeywords('Exports Datas ' . date('Y-m-d'))
    ->setSubject($title)
    ->setTitle($title);

/* multiple_sheets */
for ($sheetNo = 0; $sheetNo < 10; $sheetNo++) {
    $objWorkSheet = $objPHPExcel->createSheet($sheetNo);
    $objWorkSheet->setTitle('Sheet Nane '.$sheetNo);
    $objWorkSheet->setCellValue('A1', 'Add data for sheet no. '.$sheetNo);
}

/* set active sheet */
$objPHPExcel->setActiveSheetIndex(5);
$objWorkSheet = $objPHPExcel->getActiveSheet();
$objWorkSheet->setCellValue('A4', 'Add data for sheet no. 5 after Sheet Nane '.$sheetNo);

$objWriter =PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007');
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename="' . $title . '.xlsx"');
header('Cache-Control: max-age=0');
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');
$objWriter->save('php://output');

อธิบาย

บรรทัดที่ 28 – 32 จะเป็นการสร้าง sheet ขึ้นมาใหม่ และอ้างถึงชีทนี้โดยใช้ $objWorkSheet ในการใส่ข้อมูลลงไป
บรรทัดที่ 35 – 37 เราสามารถกลับมาแก้ไข sheet ที่สร้างไปแล้วโดยใช้คำสั่ง setActiveSheetIndex และ getActiveSheet จากนั้นอ้างถึงชีทนี้โดยใช้ $objWorkSheet
สังเกตุว่า setActiveSheetIndex ใช้การนับลำดับ sheet เริ่มจาก 0 ไม่ใช่ 1
มีชีทชือ Worksheet เกินอยู่ มันเป็น default ของตัว PHPExcel เอง จริงๆเราควรจะใช้ คำสั่ง
```
$objWorkSheet = $objPHPExcel->getActiveSheet();
$objWorkSheet->setTitle('Exports Datas');
```
กับแผ่นนี้ แล้วใช้เหมือนกับชีทแผ่นอื่นๆ ก่อนที่จะ loop สร้าง sheet ขึ้นมาใหม่

PlusMagi's Blog By Pitt Phunsanit

Tag Archive active

Bootstrap: dynamic tabs hash

สร้าง excel เป็นชุดแบบหลายหน้าชีท