无限级联 下拉框的实现 ... 呜呜呜 __init_xu js 又增加了一个widget

<script>
var json__categories = <?php echo $json__categories; ?> ;
//log(json__categories);

//查找分类
function findcg(id){
	var cg = null , hadFind = false;
	xu.array.each(json__categories['refs'],function(item,index){
		if (hadFind) return ;
		if (item.id == id)	cg = item ;
	});
	return cg ;
}
//改变分类
function chcg(o){
	if (!xu.verify._obj(o)) return ;
	//首先取得选中的id,,再查该id下是否存在子节点
	var cid = o.value;log(cid);
	if (!cid) { // 缺省值时清空节点尾部所有select
		$eo(o).removeAfterAll();
	}
	
	//在json中定位该id所对应的节点
	var categorie = findcg(cid);//log(categorie);
	
	if (!categorie) return ;
	
	//查当前节点的父节点,这个似乎不用考虑,每个节点只用管理其直接子节点
	
	//查当前节点下是否存在子节点,存在'sons'说明有子节点,创建一个下拉框并追加到尾部
	if (categorie['sons']){
		//清空创建的子select对象		
		var subCategories = categorie['sons'];		
		$new_slt = $eo.create('select');		
		$new_slt.on('change',function(){
			// this <-> $new_slt
			chcg(this);
		});
		
		add_opt($new_slt.ele,'选择子分类','',0);
		
		var start = 1;// 选项计数
		xu.array.each(subCategories,function(item){
			add_opt($new_slt.ele,item.name,item.id,start);
			start ++ ;
		});
		$eo(o).removeAfterAll().insertAfter($new_slt.ele);
	}else {
		$eo(o).removeAfterAll();
	}
}
function add_opt(slt_obj,opt_txt,opt_value,index){
	slt_obj.options[index] = new Option(opt_txt,opt_value);
}
function clear_opts(slt_obj){
	// 原有选项计数
	var len = slt_obj.options.length;
	for (var i=0; i < len; i++)
		slt_obj.options[0] = null;// 移除当前选项
}

xu.ready(function(){
	//设置分类的项 -- 首先设置初值项,取第一级分类
	(function(){
		if (!xu.verify._obj(json__categories)) {
			chcg = function(){} ;return ;
		}
		var start = 1;// 选项计数
		xu.array.each(json__categories['tree'],function(item){
			add_opt($eo('article-categorie').ele,item.name,item.id,start);
			start ++ ;
		});
	})();
	
});
</script>

 今天没有时间 抽出来了,下周抽出来 ... 我我我我

 

 

评论

3 楼 vb2005xu 2009-12-21  

var json__categories = <?php echo $json__categories; ?> ;
//log(json__categories);

//查找分类
function findcg(id){
	var cg = null , hadFind = false;
	xu.array.each(json__categories['refs'],function(item,index){
		if (hadFind) return ;
		if (item.id == id)	cg = item ;
	});
	return cg ;
}
//改变分类
function chcg(o){ // o -> select
	if (!xu.verify._obj(o)) return ;
	//首先取得选中的id,,再查该id下是否存在子节点
	var cid = o.value;//log(cid);
	if (!cid) { // 缺省值时清空节点尾部所有select
		$eo(o).removeAfterAll();
		//设置categorie_id的 值,向左找相邻的且选中的分类项		
		var previousSlt = o.previousSibling;
		if (!previousSlt){
			$eo('categorie_id').ele.value = null ;
		}else {
			$eo('categorie_id').ele.value = previousSlt.options[previousSlt.selectedIndex].value ;
		}
		return ;
	}
	//在json中定位该id所对应的节点
	var categorie = findcg(cid);//log(categorie);	
	if (!categorie) return ;
	
	//设置categorie_id的 值
	$eo('categorie_id').ele.value = cid ;
	
	//每个节点只管理其直接子节点,存在'sons'说明有子节点,创建一个下拉框并追加到尾部
	if (categorie['sons']){
		//清空创建的子select对象		
		var subCategories = categorie['sons'];		
		$new_slt = $eo.create('select');		
		$new_slt.on('change',function(){
			// this <-> $new_slt
			chcg(this);
		});
		
		add_opt($new_slt.ele,'选择子分类','',0);		
		add_opts($new_slt.ele,subCategories,1);		
//		log($new_slt.ele.options);
		
		$eo(o).removeAfterAll().insertAfter($new_slt.ele);
		return $new_slt.ele ;
	}else {
		$eo(o).removeAfterAll();
	}
}
function add_opt(slt_obj,opt_txt,opt_value,index){
	slt_obj.options[index] = new Option(opt_txt,opt_value);
}
function find_opt(slt_obj,opt_value){
	var len = slt_obj.options.length;
	for (var i=0; i < len; i++)
		if (slt_obj.options[i].value == opt_value)
			return slt_obj.options[i] ;
}

function clear_opts(slt_obj){
	// 原有选项计数
	var len = slt_obj.options.length;
	for (var i=0; i < len; i++)
		slt_obj.options[0] = null;// 移除当前选项
}
function add_opts(slt_obj,categories,start,slted_value,callback){
	if (slt_obj && slt_obj['options'] && xu.verify._obj(categories)){
		clear_opts(slt_obj); //清除原
		add_opt(slt_obj,'选择子分类','',0);
		
		var start = start || 1 ;// 选项计数		
		xu.array.each(categories,function(item){
			add_opt(slt_obj,item.name,item.id,start);
			start ++ ;
		});
		var opt = find_opt(slt_obj,slted_value);
		if (opt){
			opt.selected = true ;
		}
	}
}
function trigger_opt(slt_obj,slted_value,callback){
	//触发事件
	var opt = find_opt(slt_obj,slted_value);
	if (opt){
		opt.selected = true ; 
		return chcg(slt_obj);//log("选中的opt: ",opt);
	}
}

xu.ready(function(){
	//设置分类的项 -- 首先设置初值项,取第一级分类
	(function(){
		if (!xu.verify._obj(json__categories)) {
			chcg = function(){} ;return ;
		}
		
		//构建顶级分类,然后根据选择构建子级的slt<向右>
		add_opts($eo('categorie').ele,json__categories['tree'],1);	
		
		//文章修改模式 先构建自身slt,然后构建父级的slt<向左>
		if ($eo('categorie_id').ele.value && (this_ctg = findcg($eo('categorie_id').ele.value))){			
			//查当前节点的父节点
			var up_ctgs = [] ;			
			do {
				up_ctgs.push(this_ctg);//从里到外,级别递增
				this_ctg = findcg(this_ctg['parent_id']);
			}while(this_ctg) ;
			
			// 数组长度>1,不处于顶级;<=1,处于顶级
			var slt_obj = $eo('categorie').ele ;
			do {
				var item = up_ctgs.pop();
				slt_obj = (item) ? trigger_opt(slt_obj,item.id) : null;					
			}while(slt_obj) ;
		}
	})();
	
});

2 楼 vb2005xu 2009-12-21  

var callback = (callback && xu.verify._func(callback))? callback : function(){} ;

1 楼 vb2005xu 2009-12-21  

修正版,解决所有可能出现的问题:

var json__categories = <?php echo $json__categories; ?> ;
//log(json__categories);

//查找分类
function findcg(id){
	var cg = null , hadFind = false;
	xu.array.each(json__categories['refs'],function(item,index){
		if (hadFind) return ;
		if (item.id == id)	cg = item ;
	});
	return cg ;
}
//改变分类
function chcg(o){ // o -> select
	if (!xu.verify._obj(o)) return ;
	//首先取得选中的id,,再查该id下是否存在子节点
	var cid = o.value;//log(cid);
	if (!cid) { // 缺省值时清空节点尾部所有select
		$eo(o).removeAfterAll();
		//设置categorie_id的 值,向左找相邻的且选中的分类项		
		var previousSlt = o.previousSibling;
		if (!previousSlt){
			$eo('categorie_id').ele.value = null ;
		}else {
			$eo('categorie_id').ele.value = previousSlt.options[previousSlt.selectedIndex].value ;
		}
//		log($eo('categorie_id').ele.value);
		return ;
	}
	//在json中定位该id所对应的节点
	var categorie = findcg(cid);//log(categorie);	
	if (!categorie) return ;
	
	//设置categorie_id的 值
	$eo('categorie_id').ele.value = cid ;
//	log('选择的文章分类: ' , $eo('categorie_id').ele.value);
	
	//每个节点只管理其直接子节点,存在'sons'说明有子节点,创建一个下拉框并追加到尾部
	if (categorie['sons']){
		//清空创建的子select对象		
		var subCategories = categorie['sons'];		
		$new_slt = $eo.create('select');		
		$new_slt.on('change',function(){
			// this <-> $new_slt
			chcg(this);
		});
		
		add_opt($new_slt.ele,'选择子分类','',0);
		
		add_opts($new_slt.ele,subCategories,1);		
//		log($new_slt.ele.options);
		
		$eo(o).removeAfterAll().insertAfter($new_slt.ele);
		return $new_slt.ele ;
	}else {
		$eo(o).removeAfterAll();
	}
}
function add_opt(slt_obj,opt_txt,opt_value,index,slted){
	slt_obj.options[index] = new Option(opt_txt,opt_value);
	var slted = slted || false;
	if (slted){
		slt_obj.options[index].selected = slted ;
		return slt_obj.options[index] ;
	}
}
function find_opt(slt_obj,opt_value){
	var len = slt_obj.options.length;
	for (var i=0; i < len; i++)
		if (slt_obj.options[i].value == opt_value)
			return slt_obj.options[i] ;
}

function clear_opts(slt_obj){
	// 原有选项计数
	var len = slt_obj.options.length;
	for (var i=0; i < len; i++)
		slt_obj.options[0] = null;// 移除当前选项
}
function add_opts(slt_obj,categories,start,slted_value,callback){
	if (slt_obj && slt_obj['options'] && xu.verify._obj(categories)){
		clear_opts(slt_obj); //清除原
		add_opt(slt_obj,'选择子分类','',0);
		
		var start = start || 1 ;// 选项计数
		var callback = callback || function(){} ;
		xu.array.each(categories,function(item){
			var opt = add_opt(slt_obj,item.name,item.id,start,slted_value == item.id);
			if (opt){				
				callback(slt_obj);
			}
			start ++ ;
		});
	}
}
function trigger_opt(slt_obj,slted_value){
	//触发事件
	var opt = find_opt(slt_obj,slted_value);
	if (opt){
		opt.selected = true ; 
		return chcg(slt_obj);//log("选中的opt: ",opt);
	}
}

xu.ready(function(){
	//设置分类的项 -- 首先设置初值项,取第一级分类
	(function(){
		if (!xu.verify._obj(json__categories)) {
			chcg = function(){} ;return ;
		}
		
		//构建顶级分类,然后根据选择构建子级的slt<向右>
		add_opts($eo('categorie').ele,json__categories['tree'],1);	
		
		//文章修改模式 先构建自身slt,然后构建父级的slt<向左>
		if ($eo('categorie_id').ele.value && (current_categorie = findcg($eo('categorie_id').ele.value))){			
			//查当前节点的父节点
			var parent_categories = [] ;
			
			var parent_categorie = findcg(current_categorie['parent_id']);
			while(parent_categorie) {				
				parent_categories.push(parent_categorie);//从里到外,级别递增
				parent_categorie = findcg(parent_categorie['parent_id']);
			}
			
			// 数组长度>0,不处于顶级;<0,处于顶级
			var item = (parent_categories.length) ? parent_categories.pop() : current_categorie;
			var slt_obj = trigger_opt($eo('categorie').ele,item.id);
			if (slt_obj){//不处于顶级,触发事件会返回新建的slt对象
				while((item = parent_categories.pop())){
					slt_obj = trigger_opt(slt_obj,item.id);
				}
				//选中自身
				trigger_opt(slt_obj,current_categorie.id);
			}
		}
	})();
	
});