級聯菜單-初始化

級聯菜單已經做好了,可以要是編輯的時候,需要把之前數據的值用select表示出來。
思路如下:
用逗號分隔的String字符串表示初始化數據。能夠得到第一層的對象,然後賦初值。通過JS的操作得到第一層對象的下一個兄弟對象就是下一個Select,然後賦值。以些類推。
代碼如下:

var json = [{'id':'0','name':'河南',parentId:'-1',children:[
                    {'id':'01','name':'鄭州','parentId':'0','children':
                        [{'id':'011','name':'二七區',parentId:'-1',children:'-1'}]},
                    {'id':'02','name':'新鄉','parentId':'0','children':'-1'}]},
                {'id':'1','name':'江蘇',parentId:'-1',children:[
                    {'id':'11','name':'江蘇1','parentId':'1','children':'-1'},
                    {'id':'12','name':'江蘇2','parentId':'1','children':'-1'}]}];

    var Settings = {
            id:''
    };     
    var DyCacadeSelect = {
        init:function(id,json,path){
            Settings.id = id;
            var json = DyCacadeSelect.initJson(json);
            DyCacadeSelect.recursion(json);
            DyCacadeSelect.editInit(path);
        },
        initJson:function(json){
            //json作爲另一個json對象的屬性值 
            //失敗的操作有:
            //1:字符串轉成json
            //將json對象作爲字符串賦值  ----jsonRoot作爲字符串合併json----轉換JSON
            //用eval("("+jsonRoot")")轉換爲json 成功  
            //用$.parseJson("{"+jsonRoot+"}") 轉換失敗 
              //原因是$.parseJson必須是標準的json格式。例如必須用""括起來屬性與屬性值
            var jsonRoot = {'id':'-1','name':'',parentId:'-2','children':json};   
            return jsonRoot;
        },
        editInit:function(paths){
             var path = paths.split(",");
             $("#-2 option[value='"+path[0]+"']")
                .attr("selected",true);
             $("#-2").trigger("change");
             for(var repeat=0;repeat<path.length-1;repeat++){
                 $($("#-2").nextAll("select")[repeat])
                    .find("option[value='"+path[parseInt(repeat)+1]+"']")
                    .attr("selected",true);
                 if(parseInt(repeat)+1<path.length-1){
                     $($("#-2").nextAll("select")[repeat])
                     .trigger("change");
                 }
             }
        },
        isChildren:function(note){
            return note.children == '-1';
        },
        recursion:function(root){
            if(DyCacadeSelect.isChildren(root)){
                return ;
            } else {
                DyCacadeSelect.initSelect(root);
                $.each(root.children,function(index,comment){
                    DyCacadeSelect.initOption(root,comment);
                    DyCacadeSelect.initSelectChange(root,comment);
                });
            }
        },
        initSelect:function(note){
            $("#"+Settings.id).append("<select"+
                    " class='select small newselect' name='keyword' id='"+note['parentId']+"'>"+
                    "<option value=''>--請選擇--</option></select>");
        },
        initOption:function(note,comment){
            $("#"+note['parentId']).append("<option "+
                    "value='"+comment['id']+"'>"+comment['name']+"</option>");
        },
        initSelectChange:function(note,comment){
            $("#"+note['parentId']).bind("change",function(){
                if($("#"+note['parentId']).val()==''){
                    DyCacadeSelect.clearNextAllSelect(note);
                }
                if(comment['id'] == $("#"+note['parentId']).val()){
                    DyCacadeSelect.existNextSelectOperatorClear(note);
                    DyCacadeSelect.recursion(comment);
                } 
            });
        },
        existNextSelectOperatorClear:function(note){
            if(DyCacadeSelect.isExistNextSelect(note)){
                DyCacadeSelect.clearNextAllSelect(note);
                return true;
            }
            return false;
        },
        clearNextAllSelect:function(note){
            $("#"+note['parentId']).nextAll('select').remove();
        },
        isExistNextSelect:function(note){
            var selectLength = $("select[id="+note['parentId']+"]").length;
            if(selectLength>0){return true;}
            return false;
        }
    };
    //調用如下
    DyCacadeSelect.init("select",json,"0,01,011");
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章