CRUD按鈕操作~

//定義操作,true意味著激活的按鈕.false意味著失效的按鈕.
var add = true ,            
    update = true,
    save = true,
    cancel = true,
    search = true,
    opeation = '';

$(function(){

    //初始化
    init();

    //add操作
    $("#form-add").click(function(){
        var add = false,
            update = false,
            search = false;
        buttonChange(add,update,save,cancel,search);
    });

    //update操作
    $("#form-update").click(function(){
        var add = false,
            update = false,
            search = false;
        buttonChange(add,update,save,cancel,search);
    });

    //save操作
    $("#form-save").click(function(){
        //save操作之後,與原始狀態相同
        init();
    });

    //cancel操作
    $("#form-cancel").click(function(){
        //cancel操作之後,與原始狀態相同
        init();
    });

    //search
    $("#form-search").click(function(){
        //點擊收縮后得到某些數據,update激活.
        var add = false,
            save = false,
            cancel = false,
            search = false;
        buttonChange(add,update,save,cancel,search);    
    });

    //操作按鈕初始化,一開始時只有add,search是激活的
    function init(){
        buttonActive('add');
        buttonUnactive('update');
        buttonUnactive('save');
        buttonUnactive('cancel'); 
        buttonActive('search');
    }

    //按鈕激活與失效轉換
    function buttonChange(add,update,save,cancel,search){
        //true的為激活,否則為失效
        add==true?buttonActive('add'):buttonUnactive('add');
        update==true?buttonActive('update'):buttonUnactive('update');       
        save==true?buttonActive('save'):buttonUnactive('save');
        cancel==true?buttonActive('cancel'):buttonUnactive('cancel');       
        search==true?buttonActive('search'):buttonUnactive('search');
    }

    //按鈕失效樣式
    function buttonUnactive(operation){
        $("#form-"+operation).css({"background-color":"#CCCCBB"});
        $("#form-"+operation).attr("disabled",'disabled');
    }

    //按鈕激活樣式
    function buttonActive(operation){
        $("#form-"+operation).css({"background-color":"#0CF"});
        $("#form-"+operation).removeAttr("disabled");
    }

    function drawTable(){

    }
});

标签：html