Max Coding BLOG. (^

2012年9月6日星期四

jquery-ui-multiselect-widget 遇到資料量大於 2000筆的 option

jquery-ui-multiselect-widget 遇到資料量大於 2000筆的 option會有效能上的問題, 舊電腦可能需要到4分鐘, 才能產生出畫面, 相關討論如下:
https://github.com/ehynds/jquery-ui-multiselect-widget/issues/157

Hello, I experienced performance problems when more than 2000 options. To took an average of four minutes to assemble the combo (bad machines), not to mention when you click on or search.

我還在研究看看, 怎麼解決這個問題.

javascript 副程式分享 rangeText 與 array 互轉

首先要定義 rangeText 是什麼, 例如:
1,2,8-10

首先透過副程式1號, 把 rangeText 放到 array 裡:
rangeText_to_array(list_string)

function rangeText_to_array(list_string){
    var return_array = new Array();
    if(list_string!="")
    {
        var listDataArray= new Array();
        listDataArray=list_string.split(",");
        for (var iPos=0; iPos<listDataArray.length; iPos++ )
        {
            var currentItem;
            currentItem=trim(listDataArray[iPos]);
            if(currentItem.indexOf("-")==-1){
                return_array.push(currentItem);
            }
            else
            {
                // range
                var range_begin=trim(leftField(currentItem,"-"));
                var range_end=trim(rightField(currentItem,"-"));
                for(var rangeIndex=parseInt(range_begin,10); rangeIndex<=parseInt(range_end,10); rangeIndex++)
                {
                    return_array.push(rangeIndex);
                }
            }
        }
    }
    return_array.sort();
    return return_array;
}

如果, 要把 array 裡的值轉成 rangeText:

function array_to_rangeText(E) {
    var val = "";
    if (E.length) {
        var last_value='';
        var is_queue_status=false;
        for (var iPos = 0; iPos < E.length; iPos++) {
            var my_value=E[iPos];
            if(last_value!="" && my_value!=""){
                if(isNextNumber(last_value,my_value)){
                    is_queue_status=true;
                }
                else
                {
                    if(is_queue_status){
                        if(val != "") val += "-";
                        val += last_value;
                    }
                    is_queue_status=false;
                }
            }
            if(!is_queue_status){
                if(val != "") val += ",";
                val += E[iPos];
            }
            // 記住上一個號碼.
            last_value = E[iPos];
        }
        if(is_queue_status){
            if(val != "") val += "-";
            val += last_value;
        }
    }
    return val;
}

// 判斷號碼是否連續.
function isNextNumber(num1, num2){
    var returnValue = false;
    if(isNumeric(num1) && isNumeric(num2)){
        if(parseInt(num2,10)-parseInt(num1,10)==1){
            returnValue = true;
        }
    }
    return returnValue;
}

//檢查是否為數字
function isNumeric(num) {
    if(isNaN(num)){
        return false;
    }
    return true;
}

為什麼要這樣子轉來轉去? 因為要把使用者看的數字(ex: 8-12) 做部份的刪除, 刪完後, 再要種新格式化成 rangeText 給使者用看.

還會需要用到2個 array function:
1. find item in array

function arrayFind(originalArray, itemToDetect) {
    var j = 0;
    while (j < originalArray.length) {
        if (originalArray[j] == itemToDetect) {
            return true;
        } else { j++; }
    }
    return false;
}

2. remove item (string or number) from an array

function arrayRemove(originalArray, itemToRemove) {
    var j = 0;
    while (j < originalArray.length) {
        if (originalArray[j] == itemToRemove) {
            originalArray.splice(j, 1);
            // remove first.
            break;
        } else { j++; }
    }
}

說明: 這裡會有, value 在 array 會不會重覆的問題, 假設不會重覆的情況下, 就只需要 remove first 即可.

array 的 append, 用 array.push 就完成了.

array 相減, 左邊是全部item, 右邊是要刪掉的item.

function array_remove_from_array(array_all, array_find){
    if(array_find.length>0){
        for(var iDataFind=0; iDataFind<array_find.length; iDataFind++){
            arrayRemove(array_all, array_find[iDataFind]);
        }
    }
}

2012年9月5日星期三

jQuery widget 外部存取 widget 內部的屬性或 method

最近使用 jQuery ui.multiselect 的 widget 實作了一個畫面:

現在 user 想知道, 有幾個 item 被選取, 要在 widget 外部存取 widget 內部的屬性或 method, 可以這樣子做:

var widget = $(".multiselect").data("multiselect");
alert(widget.count);

這樣子就拿到 widget object 裡自行定義的屬性 count 裡的值.

資料來源:
Accesing widget instance from outside widget
http://stackoverflow.com/questions/8506621/accesing-widget-instance-from-outside-widget

jQuery UI Multiselect
http://www.quasipartikel.at/multiselect/

特別感謝:

* Michael Aufreiter (quasipartikel.at)
* Yanick Rochon (yanick.rochon[at]gmail[dot]com)

心得:

這真的是一個 "超神奇" 的 jQuery Widget, 真是令人嘆為觀止.

查出來的資料, 透過 jQuery 反白關鍵字

某一個專案, 提供了 "查詢" 功能, 允許使用者輸入某些關鍵字, 並希望查出來的資料, 遇到 user 輸入的關鍵字時, 要反白(或高亮, hightlight) 顯示.

這有2個做法.
1. Server Side 解決: web server 丟出來的資料就反白好.
2. Client Side 解決: 透過 javascript 或 jQuery 解決.

這次要分享怎麼透過 client side 解決.

step1: include jQuery
step2: 隨便給要 highlight 的 block 一個 classname
step3: 呼叫下面的 javascript, 把 block 裡的 keyword highlight.
step4: 報告完畢.

範例 jQuery 如下:

<script language='javascript'>
var keyword;
keyword = '123';
$('.Title').html(function() {
    return $(this).html().replace(keyword,"<font color=\"red\">"+keyword+"</font>");
});
$('.tel').html(function() {
    return $(this).html().replace(keyword,"<font color=\"red\">"+keyword+"</font>");
});
$('.address').html(function() {
    return $(this).html().replace(keyword,"<font color=\"red\">"+keyword+"</font>");
});

</script>

說明:
1. 把所有 class='Title' 的 block 裡出來 '123' 都變成紅色字體.
2. 把所有 class='tel' 的 block 裡出來 '123' 都變成紅色字體.
3. 把所有 class='address' 的 block 裡出來 '123' 都變成紅色字體.

已知經緯度,如何查看Google Map

很多案子, 都有景點或坐標的資料, 希望 user 點了某一個 icon 就可以連到 google 去看地圖或街景:

這個 icon 的超連結要放什麼, 也很簡單, 1行就解決:

http://maps.google.com.tw/maps?gcx=w&q="& $Latitude & "%20" & $Longitude & "&um=1&ie=UTF-8&sa=N&hl=zh-TW&tab=wl

其中 URL 裡的 $Latitude 和 $Longitude 換成你要 google 指出的坐標的緯度 + 經度即可.

分享到 facebook, 分享到 google+ 的方法

1. 分享到 facebook, 1行 javascript 就搞定:

function Facebook() { void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)) )); }

但有一些情況會出錯, 就是你的網址裡使用的參數和 facebook 有衝突時, 例如 &lang=

2. 分享到 google+, 方法同上面的 facebook
分享的 URL 如下:

javascript:void(window.open("https://plus.google.com/share?ur\l="+encodeURIComponent(location), "Share to Google+","width=600,height=460,menubar=no,location=no,status=no"));

google+ 有另一個不錯的方法,加入這2行也ok, 而且提供的功能更多, 還可以看到 count, 如果 annotation 不要設成 none:

<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>

<g:plusone size='standard' annotation='none' align='right'></g:plusone>

2012年9月3日星期一

取經/緯度裡n公里裡的景點

孟諺同事提供的經/緯度運算如下:
赤道圓周=40,075.017km = 40075017m
兩極圓周=40,007.860km = 40007860m

但是因為我們的距離是 500m ~ 5000m,弧度影響甚小.所以可視為地球是平面.

360 經度 = 40075017 m ---> 每1m 為 0.000008983152770715 經度, 取10位 =0.0000089832

360 緯度 = 40007860 m ---> 每1m 為 0.000008998231847442 緯度, 取10位 =0.0000089982

因為台灣不會跨0, 直接加減就好了.

孟諺是建議型別使用: decimal(10,7)
我覺得, 其實也可以開到 decimal(18,8)

孟諺給的範例 SQL 如下:

SELECT *

FROM dbo.旅館座標表格

WHERE (經度 BETWEEN @基本經度 - @經度差距 AND @基本經度 + @經度差距)

AND (緯度 BETWEEN @基本緯度 - @緯度差距 AND @基本緯度 + @緯度差距)

我的情況是, 要把旅館(HotelInfo) 坐標的3.5公里裡的景點(RouteDetail) 資料取出來, 放到一個路線(RouteMain) 和旅館(HotelInfo) 的Mapping對應表(RouteHotel) 中.

insert into RouteHotel(RID,HotelInfoID)
SELECT distinct M.RID, H.hotelInfoID
FROM RouteMain M
inner join RouteDetail D on M.RID = D.RID
inner join HotelInfo H
on (D.DetailLongitude BETWEEN H.HotelLongitude - (0.0000089832 * 3500) AND H.HotelLongitude+ (0.0000089832 * 3500))
and (D.DetailLatitude BETWEEN H.HotelLatitude - (0.0000089832 * 3500) AND H.HotelLatitude + (0.0000089832 * 3500))

附上, 百大路線 + HotelInfo mapping Table schema.

CREATE TABLE [dbo].[RouteHotel](
    [RHID] [int] IDENTITY(1,1) NOT NULL,
    [RID] [int] NOT NULL,
    [HotelInfoID] [int] NOT NULL
 CONSTRAINT [PK_RouteHotel] PRIMARY KEY CLUSTERED
(
    [RID] ASC, [HotelInfoID] ASC
)
) ON [PRIMARY]

Max Coding BLOG. (^_^)y

2012年9月6日星期四

jquery-ui-multiselect-widget 遇到資料量大於 2000筆的 option

javascript 副程式分享 rangeText 與 array 互轉

2012年9月5日星期三

jQuery widget 外部存取 widget 內部的屬性或 method

查出來的資料, 透過 jQuery 反白關鍵字

已知經緯度,如何查看Google Map

分享到 facebook, 分享到 google+ 的方法

2012年9月3日星期一

取經/緯度裡n公里裡的景點

Facebook 留言板

2012年9月6日 星期四

2012年9月5日 星期三

2012年9月3日 星期一

Facebook 留言板

2012年9月6日星期四

2012年9月5日星期三

2012年9月3日星期一