級聯菜單已經做好了,可以要是編輯的時候,需要把之前數據的值用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");