在项目中遇到最多的就是级联菜单的实现。省级-市级-县级等等。如果将这些数据放到数据库中,每一次访问数据都要链接数据库。目前项目中的做法是select的每一次change事件都要查询一次。我觉得此次操作有些多余。先不说这些数据从哪里得到,或者要不要放到缓存中,或者这些数据是不易改变,还是时常改变。我自我感觉有两点不好:1、代码与页面的耦合性不好 2、会使页面的速度变慢。
所以,我就用JQuery简单实现了级联菜单的实现。为了避免有类似的问题,特将代码附上,以便以后查看。共勉!
var json = {'id':'-1','name':'',parentId:'-2','children':[
{'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){
Settings.id = id;
DyCacadeSelect.recursion(json);
},
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='lSelect' 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);