2018年7月27日 星期五

table 加入搜尋機制且模擬瀏覽器 Ctrl+F 效果

模擬瀏覽器 Ctrl+F 效果 : highlight: JavaScript text higlighting jQuery plugin
下載 .js 後移除 "/* PLEASE DO NOT HOTLINK MY FILES, THANK YOU. */" 開始的內容,避免執行時出現一堆警告訊息

table 加入首列凍結效果 : StickyTableHeaders
配合尋找時可能會因為文字超出視窗範圍時自動捲動,讓首列(含尋找方塊)不要消失

javascript
====
$scope.styling = function () {
            $("table[name=Invoice]").stickyTableHeaders({ fixedOffset: $('.navbar') });
        };
$scope.$watch('searchInvoice', function (newValue, oldValue) {
            $('table[name=Invoice]').removeHighlight();
            if (newValue) $('table[name=Invoice]').highlight(newValue);
            $timeout(function () {
                if ($('table[name=Invoice] .highlight:first').length) {
                    var top = $(window).scrollTop();
                    var bottom = $(window).scrollTop() + $(window).height();
                    var elm_top = $('table[name=Invoice] .highlight:first').offset().top;
                    if (elm_top - top < 100) $(window).scrollTop(top - 100); // 100: navbar height
                    else if (elm_top > bottom - 25) $(window).scrollTop(elm_top - $(window).height() + 25); //25: text height
                }
                },500);
        });

html
====
<table name="Invoice" class="table table-condensed table-bordered table-hover" style="width:980px !important" ng-style="styling()">
                    <thead>
                        <tr class="warning">
                            <th style="width:80px">發票號碼</th>
                            <th style="width:80px">開立日期</th>
                            <th style="width:60px">金額</th>
                            <th style="width:40px">幣別</th>
                            <th style="width:80px">統一編號</th>
                            <th style="width:80px">買方</th>
                            <th style="width:80px">收件人</th>
                            <th style="width:300px">寄送地址</th>
                            <th style="width:80px">單號</th>
                            <th style="width:100px;background-color:unset;border-right:hidden;border-bottom:hidden;border-top:hidden"><input id="searchInvoice" type="text" placeholder="尋找發票..." style="width:100%" ng-model="searchInvoice" /></th>

2018年7月6日 星期五

引入 .js、.css、... 等靜態檔案時避免瀏覽器cache 造成更新後還是抓到舊版本

帶入隨時會變化的參數達到強制更新目的

.net core
<script type="text/javascript" src="~/scripts/common.js" asp-append-version="true"></script>

.net
方法1: 安裝 AspNet.Mvc.AssetVersioning 達到同樣效果 (實測無效,檔案內容不同version字串不會變,需確認是否用法問題)
方法2: <script src="~/Scripts/common.js?@DateTime.Now.ToShortTimeString()"></script>



epplus 用法

自動設定欄寬
sheet.Cells.AutoFitColumns(3, 20); // 必須設定 min 跟 max 才會正常作用

凍結欄位
sheet.View.FreezePanes(4, 4);

標題列
ws.PrinterSettings.RepeatRows = sheet.Cells["1:1"];

縮小成一頁寬
ws.PrinterSettings.FitToPage = true;
ws.PrinterSettings.FitToWidth = 1;
ws.PrinterSettings.FitToHeight = 0;

邊界
ws.PrinterSettings.LeftMargin = ws.PrinterSettings.TopMargin = ws.PrinterSettings.BottomMargin = ws.PrinterSettings.RightMargin = (decimal)0.3;

底色
sheet.Cells[row, 1, row, col - 1].Style.Fill.PatternType = OfficeOpenXml.Style.ExcelFillStyle.Solid;
sheet.Cells[row, 1, row, col - 1].Style.Fill.BackgroundColor.SetColor(System.Drawing.Color.Yellow);

框線
range.Style.Border.Top.Style = range.Style.Border.Bottom.Style = range.Style.Border.Left.Style = range.Style.Border.Right.Style = OfficeOpenXml.Style.ExcelBorderStyle.Thin;

小數格式
ws.Cells[row, 6].Style.Numberformat.Format = "0.00"; // 固定小數兩位
ws.Cells[row, 6].Style.Numberformat.Format = 整數不含小數點格式字串((decimal?)ws.Cells[row, 6].Value, "0.##"); // 若有小數則最多取兩位,若為整數則不含結尾的"."
string 整數不含小數點格式字串(decimal? value, string 格式字串)
        {
            if (格式字串 == null) return "";
            if (value == null) return 格式字串;
            if (value % 1 == 0 && 格式字串.IndexOf("0.#") > -1) return 格式字串.Substring(0, 格式字串.IndexOf("0.#") + 1);
            return 格式字串;
        }

插入列並保留格式
ws.InsertRow(rowindex, 1);
ws.Cells[rowindex-1, 1, rowindex-1, 最後欄index].Copy(ws.Cells[rowindex , 1, rowindex , 最後欄index]);

取得公式值
sheet.Cells[rowindex, colindex].FormulaR1C1="xxx";
sheet.Cells[rowindex, colindex].Calculate();
var 公式值 = sheet.Cells[rowindex, colindex].Value;

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器