模擬瀏覽器 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>
沒有留言:
張貼留言