::SANKAI::

精選名稱：Select box manipulation

授權模式：MIT & GPL

精選名稱：JQuery Colorize

授權模式：MIT & GPL

精選名稱：JQuery Timers

授權模式：WTFPL

精選名稱：JQuery Alert Dialogs

授權模式：GPL

Display(展示)：Project Homepage (English) | 插件首頁 (中文)

Download(下載)：tablepager v1.0.0

Changelog(更新記錄)：

有時候我們必需要動態產生下拉式選單時，用以前的Javascript去寫實在太麻煩了，不過自從有了jquery，一切都簡單多了。所以我自己寫了一個dynamicSelector.js的程式，來方便完成下拉式選單的動作。這次的寫法，每個選單都是用Ajax的方式取得。而且可以套用在多層下拉式選單，只要定義明確都可以運作。 在HTML部分所以，<select>的title屬性定義了三個變數。

url：資料來源，此選單是讀取來源網址回傳的json資料

parent：父層名稱，表示此選單會依照此父層的改變而一起變動

在前篇文章中提到將會補充這個方法，趁現在有時候我就快速的發表一下吧。首先在原始檔flexgrid.js搜尋關鍵字addRowProp，你會發現在這個addRowProp:funciton()包含了多個熟悉的事件，像是【.click】、【.mousedown】、【.mouseup】，是的，我們所要增加的事件，正是【.dblclick】，將下列程式碼加至$(this)之後

//after $(this) 
.dblclick(
    function (e) { 
        var rowData = new Object();
        $.each($(this).find('div'),function(i){
            $(rowData).data(p.colModel[i].name,$(this).text());
        });
        if (p.onRowDblclick) p.onRowDblclick($(rowData));
    }
) 

之後你就可以在執行時，給予onRowDblclick: somefunc的自訂函式選項。以上只是範例，你可以自行增加你所欠缺的事件

這個檔差點就被我刪掉了= =，好險有找到，我看還是PO在網誌比較安心一點

$('#EmployeeGrid').flexigrid({
        //表格寬度(注意在IE不能使用100%之類字串)
        width:$(window).width()-2,
        //表格高度(注意在IE不能使用100%之類字串)
        height:480,
        //資料列雙色交差
        striped:true,
        //欄位雙色交差
        novstripe:false,
        //最小寬度
        minwidth:400,
        //最小高度
        minheight:200,
        //是否可調整視窗大小
        resizable:true,
        //遠端伺服的網址
        url:'server/employee.php',
        //資料送出模式
        method:'POST',
        //回傳的資料類型
        dataType:'xml',
        //連結資料失敗時的訊息
        errormsg:'連線資料庫失敗',
        //啟用分頁器
        usepager:true,
        //不重疊
        nowrap:true,
        //預設的頁數
        page:1,//currentpage
        //總頁數
        total:1,//totalpages
        //使用分頁大小選擇器
        useRp:true,
        //預設的分頁大小(筆數)
        rp:15,//resultsperpage
        //可選用的分頁大小
        rpOptions:[10,15,20,25,40],
        //標題
        title:false,
        //分頁器的顯示資訊
        pagestat:'檢視{from}到{to}，全部共有{total}筆資料',
        //讀取時的訊息
        procmsg:'資料讀取中，請稍後…',
        //搜尋時送出附加自訂的query
        query:'',
        //搜尋自訂附加的欄位，請搜尋
        //"addsearchbutton"參考原始碼那段
        qtype:'',
        //空資料時的訊息
        nomsg:'找不到符合絛件的資料',
        //隱藏欄位數不得少於?
        minColToggle:1,
        //顯示或關閉隱藏欄位的開啟器
        showToggleBtn:true,
        //預設排序的欄位
        sortname:'basic_name',
        //預設排序的方式
        sortorder:'asc',
        //送出時隱藏
        hideOnSubmit:false,
        //限定單選
        singleSelect:true,
        //不得調整視窗寬度
        nohresize:true
        //自動讀取資料
        autoload:true,
        //區塊透明
        blockOpacity:0.5,
        //顯示隱藏欄位時呼叫的自訂函式
        onToggleCol:false,
        //改變排序方式時呼叫的自訂函式
        onChangeSort:false,
        //執行成功後呼叫的自訂函式
        onSuccess:false,
        //資料送出時呼叫的自訂函式
        onSubmit:false,
        //錯誤時呼叫的自訂函式
        onError:false,
        //當分頁大小選擇器被選擇時呼叫自訂函式
        onRpChange:false,
        //是否顯示右上角縮小視窗的按鈕
        showTableToggleBtn:true,
        //定義欄位資訊(以下為範例)
        colModel:[
                //第一個欄位
                {display:'身份證字號',
                 name:'basic_unicode',
                 width:75,
                 sortable:true,
                 align:'center',
                 hide:false},
                //第二個欄位
                {display:'姓名',
                 name:'basic_unicode',
                 width:75,
                 sortable:true,
                 align:'center',
                 hide:false}
        ],
        //自訂的參數(以下為範例)
        params:[
                //參數1(陣列型)
                {name:'viewFields',value:['id','basic_unicode','basic_name']},
                //參數2(單一型)
                {name:'action',value:'view'}
                /*
                附註：另外以下為預設一定會送出去
                的物件參數，注意不要取同名
                var param={
                        page:p.newp,
                        rp:p.rp,
                        sortname:p.sortname,
                        sortorder:p.sortorder,
                        query:p.query,
                        qtype:p.qtype
                };
                */
        ],
        //定義功能欄的按鈕資訊(以下為範例)
        buttons:[
                {name:'新增',bclass:'add',onpress:null},
                {name:'刪除',bclass:'delete',onpress:null},
                {separator:true}
        ],
        //定義搜尋欄位資訊(以下為範例)
        searchitems:[
                {display:'身份證字號',name:'basic_unicode'},
                {display:'聯絡手機',name:'contact_mobile'},
                {display:'姓名',name:'basic_name',isdefault:true}
        ]
});

另外官方原始碼沒有寫到「onRowDblclick」事件，也就是在欄位上連點兩下時呼叫的自訂函式，所以我在原始碼追加了一些程式碼(強化XD)，讓他有這個效果，不過方法就等下篇再寫吧，不然會混在一起太亂

昨天從Ajaxian網站看到這篇文章，後來連結到文章所提到的BigTarget官方blog網頁。滿好奇這個jquery的plugin是什麼東西，所以就努力的開始趴官方文，好笑的是官方所列出的Example，我一開始竟然看不出什麼意思？

趁著記憶還在的時間，我把排列組合產生器改成Javascript版本了，改版過程多虧了有php.js這個函式庫 讓我減少了大部分必需修改的，不過有些Javascript比較特殊的地方，還真花了我不少時間，像是 函式的變數初始值，我參考了網路上的資源，有下列三種做法

//第1種(bad)，if vairable=null,variable=false
  variable = variable || defaultValue;
//第2種(bad)，if vairable=null,variable=false
  variable ? variable : variable = defaultValue;
//第3種(good)，if vairable=null,variable=defaultValue
  if(variable == null) { variable = defaultValue;}

試用的結果，第1和2種有一種小漏洞，如果傳入的值是false，那麼 系統以為你沒有傳值，所以你所傳入的將不是false，而是變成預設值 第3種就沒有這種問題了，這點使用上要稍注意一下 再來就是二維列陣，Javascript沒辦法像PHP那樣的寫法

//錯誤的方法(error)
var a = new Array();
var b = new Array(1,2,3);
a[0] = b;

上面的寫法是錯的，應該改成下面的寫法

//正確的方法(correct)
var a = new Array();
var b = new Array(1,2,3);
a[0] = new Array();
for(var i=0; i<b.length; i++){
    a[0][i] = b[i];
}

好了，廢話不再說了，Javascript版程式碼如下： 注意這個程式碼有使用到php.js的函式庫，你必需先載入此檔後才能正常運作 下載網址在程式碼的註解中有提到

/* **************************************************************
 *  Web: http://doublekai.org/blog/
 *  Licenses: MIT and GPL
 *  source: http://www.php.happycodings.com/Algorithms/code21.html
 *  modifier: sankai
 *  date:2008-08-25
 *  NOTE: It's must include the php.js library
 *              http://kevin.vanzonneveld.net/code/php_equivalents/php.js
 * **************************************************************/
function permutations(letters,num,repeatPick){
    if(repeatPick == null){
        repeatPick = true;
    }
    var result = new Array();
    if(is_string(letters)){
        var letters = letters.split('');
        var returnType = 'string';
    } else {
        var returnType = 'array';
    }
        if(is_array(letters)){
        var last = array_fill(0,num-1,letters[0]);
                while(count(array_diff(last,array_fill(0,num,letters[count(letters)-1]))) != 0){
            if(repeatPick){
                if(returnType == 'string'){
                    array_push(result,join('',last));
                } else {
                    var key = result.length++;
                    result[key] = new Array();
                    for(var i=0; i<last.length; i++){
                        result[key][i] = last[i];
                    }
                }
                        } else{
                                if(count(array_count_values(last)) == num){
                    if(returnType == 'string'){
                        array_push(result,join('',last));
                    } else {
                        var key = result.length++;
                        result[key] = new Array();
                        for(var i=0; i<last.length; i++){
                            result[key][i] = last[i];
                        }
                    }
                                }
                        }
                        last = char_add(letters,last,(num-1));
                }
                if(repeatPick){
            if(returnType == 'string'){
                array_push(result,join('',last));
            } else {
                var key = result.length++;
                result[key] = new Array();
                for(var i=0; i<last.length; i++){
                    result[key][i] = last[i];
                }
            }
                } else{
                        if(count(array_count_values(last)) == num){
                                if(returnType == 'string'){
                    array_push(result,join('',last));
                } else {
                    var key = result.length++;
                    result[key] = new Array();
                    array_push(result[key],last);
                }
                        }
                }
                return result;
        } else {
        return new Array();
    }
}
function char_add(letters,last,index){
    if(last[index] != letters[count(letters)-1]){
        last[index] = letters[eval(array_search(last[index],letters))+1];
        return last;
    }else{
        last = changeall(last,letters[0],index);
        return char_add(letters,last,index-1);
    }
}
function changeall(array,element,start,end){
    if(start == null){
        start = 0;
    }
    end = end || count(array)-1;
    for(var i=start; i<=end; i++){
        array[i] = element;
    }
    return array;
}

另外提醒：目前這個函式在IE會出現問題，主要原因是因為IE不支援array.forEach的方式，因為php.js中的array_count_values()會使用到這個，這算是array_count_values()的bug，我已經向原作者提出回報，當作者完成修復後，我會再補上修補的方法。 NOTE:the function can't run in IE broswer,because IE can't support the method "array.forEach" that be used for array_count_value() in php.js library. I alredy report the bug to author.I will post the patch detail,if the bug be fixed. 【2008-09-04補充】 php.js中的array_count_value()的相關作者Kevin已經於2008年8月27日修復上述的BUG，重新再下載php.js(v1.37)以上就可以了^_^，你可以從下列連結確認資料來源，在最下面的回應中有提到修復的訊息 The bug had fixed by Kevin on 27 August 2008.Try to download the latest "php.js" that version >= 1.37 again.info link