对下拉可选框的总结

最近的项目里用了自己做的下拉可选矿

 中间有部分是级联查询的 代码还有优化的空间 只是将代码摘抄出来 未来得及整理

//获得对象的位置信息
function getInfo(o){

		   var to=new Object();
		   to.left=to.right=to.top=to.bottom=0;
		 
		   var twidth=o.offsetWidth;
		   var theight=o.offsetHeight;	
		   while(o!=document.body){
		     to.left+=o.offsetLeft;
		     to.top+=o.offsetTop;
		     o=o.offsetParent;
		   }
		     to.right=to.left+twidth;
		     to.bottom=to.top+theight;
		   return to;
		}
//隐藏筛选	
function cancelShaixuan(){
	//$("shaixuan").style.display="none";
	hideAllShaixuan();
	
}
//列表转换成树可用jso	
function changeListToTreejso(list,args){
	var arr=new Array();
	arr[0] = {
		LEVEL : 1,
		CHECKED : 0,
		PARENT : -1,
		ID : 1,
		NAME : "全选",
		NUM : 0
	}
	if((typeof (list))=='undefined'){
		alert(args[0]);
	}
	for(var i=0;i<list.length;i++){
		arr[i+1]={};
		arr[i+1].LEVEL=1;
		arr[i+1].CHECKED=0;
		arr[i+1].PARENT=1;
		arr[i+1].ID=list[i][args[0]];
		arr[i+1].NAME=list[i][args[1]];
		arr[i+1].NUM=i+1;
	}
	
	return arr;
}

//对象转换成树可用jso	
function changeObjToTreejso(obj, args) {
	var arr = new Array();
	/*for (var i = 1; i > 0; i++) {
		if (obj[i]) {
			var t = {};
			t.LEVEL =1;
			t.CHECKED = 0;
			t.PARENT = 1;
			t.ID = obj[i];
			t.NAME = obj[i];
			t.NUM = i;
			arr[i - 1] = t;
		} else {
			break;
		}
	}*/
	arr[0] = {
		LEVEL : 1,
		CHECKED : 0,
		PARENT : -1,
		ID : 1,
		NAME : "全选",
		NUM : 0
	}
	var i=1;
	for(var o in obj){
		if(obj[o]=="--请选择--")
		continue;
		var t = {};
			t.LEVEL =1;
			t.CHECKED = 0;
			t.PARENT = 1;
			t.ID =obj[o];
			t.NAME = obj[o];
			t.NUM = i;
			arr[i ] = t;
			i++;
	}
	return arr;
}

//显示权限树
function showTree(cdfString) {
	
	document.getElementById("TreeDiv").style.display = "block";
	
	if (treeObj != null) {
		document.getElementById("TreeDiv").innerHTML = "";
		//_changeTreeItemChecked(cdfString, treeObj, "_tree");
		//treeObj = _showMultiCheckTree(cdfString, "TreeDiv", "_tree");
	} else {
	//	treeObj = _showMultiCheckTree(cdfString, "TreeDiv", "_tree");
	}
	treeObj = _showMultiCheckTree(cdfString, "TreeDiv", "_tree");
	// lm.hide();
	
}

//开始筛选
function makeShaixuan(){
	hideAllShaixuan();
	/*var permisionStr =treeObj[currentType].getAllChecked();
	if(permisionStr!=null && permisionStr!='')
	permisionStr=permisionStr.replace("1,","");
	if(permisionStr=="1"){
		permisionStr="";
	}*/
	// 控制按钮
	setButton();
	var searchJSO = changeFormToJSO($("projectsearch"));
	userSearchName = searchJSO.SITENAME1;
	//searchCon = searchJSO;
	searchJSO.SITENAME = searchJSO.SITENAME1;
	
	
	for(var i=0;i<shaixuan_ids.length;i++){
		try{
		searchJSO[shaixuan_ids[i]]=treeObj[shaixuan_ids[i]].getAllChecked();
		}catch(e){
			alert(treeObj["BRANCH_IDS"].getAllChecked());
		alert("获得查询条件时候报错"+shaixuan_ids[i]);
	
		}
	}
	
	/*if(currentType=="业务区"){
			
		searchJSO.BRANCH_IDS=permisionStr;
		selected_branch_ids=permisionStr;
	}else
	//searchJSO.BRANCH_IDS="";
	
	if(currentType=="站点建设状态"){
		searchJSO.JSSTATES=permisionStr;
	}else
		//searchJSO.JSSTATES="";
	if(currentType=="工程阶段"){
		searchJSO.GC_PHASES=permisionStr;
	}else
	//searchJSO.GC_PHASES="";
	if(currentType=="项目名称"){
		searchJSO.PROJECT_NAMES=permisionStr;
	}else
	//searchJSO.PROJECT_NAMES="";
	
	if(currentType=="铁塔设计文本"){
		searchJSO.IS_UPLOAD_NAMES=permisionStr;	
	}else
	//searchJSO.IS_UPLOAD_NAMES="";
	if(currentType=="项目编号"){
		searchJSO.PROJECT_CODES=permisionStr;	
		
	}else
	//searchJSO.PROJECT_CODES="";	
	if(currentType=="县市"){
		searchJSO.COUNTRY_NAMES=permisionStr;	
		
	}//else 
	//	searchJSO.COUNTRY_NAMES="";
	
	*/
	searchCon = searchJSO;
	
	
	mygrid.setSearchPar(searchJSO);
	mygrid.beginPageLoad();

	if (winSearch != null) {
		winSearch.hide();
	}
	//document.getElementsByName("allItem")[1].checked = false;
	
	//permisionStr += "," + permisionTreeObj.getAllPartiallyChecked();
	
	//$("shaixuan").style.display="none";
}
//初始筛选的数据结构
function initShaixuan(){//alert("初始化筛选");
BoWxPlanSiteService.getColumnRecords({'COLUMNNAME':'PROJECT_NAME,PROJECT_CODE,IS_UPLOAD_NAME,GC_PHASE,COUNTRY_NAME'},function(jso){
	treeData.PROJECT_NAME=jso.PROJECT_NAME;
	treeData.PROJECT_CODE=jso.PROJECT_CODE;
	treeData.IS_UPLOAD_NAME=jso.IS_UPLOAD_NAME;
	treeData.GC_PHASE=jso.GC_PHASE;
	treeData.COUNTRY_NAME=jso.COUNTRY_NAME;
	
	//treeData={};
	 treeObj={};
	// treeData = {};

	var id =shaixuan_ids[0];
	createShaixuanDiv(id);
 	treeData[id]=changeListToTreejso( treeData.ywq ,args);
	treeObj[id] = _showMultiCheckTree(treeData[id], "TreeDiv"+id, "_tree"+id);
 	
	id =shaixuan_ids[1];
	createShaixuanDiv(id);
 	treeData[id]=changeListToTreejso(treeData.COUNTRY_NAME,["COUNTRY_NAME","COUNTRY_NAME"]);
 	treeObj[id] = _showMultiCheckTree(treeData[id], "TreeDiv"+id, "_tree"+id);

 
 	id =shaixuan_ids[2];
	createShaixuanDiv(id);
	treeData[id]=changeObjToTreejso(JSSTATE_ALL,["JSSTATE","JSSTATE"]);
	treeObj[id] = _showMultiCheckTree(treeData[id], "TreeDiv"+id, "_tree"+id);
 	
	id =shaixuan_ids[3];
 	createShaixuanDiv(id);
 	treeData[id]=changeListToTreejso(treeData.GC_PHASE,["GC_PHASE","GC_PHASE"]);
 	treeObj[id] = _showMultiCheckTree(treeData[id], "TreeDiv"+id, "_tree"+id);
	
	id =shaixuan_ids[4];
	createShaixuanDiv(id);
 	//treeData["铁塔设计文本"]=changeListToTreejso(treeData.GC_PHASE,["GC_PHASE","GC_PHASE"]);
	/*var data = [{"IS_UPLOAD_NAME":"已设计"},{"IS_UPLOAD_NAME":"未设计"}];
	alert(data[0].IS_UPLOAD_NAME);*/
 	treeData[id]=changeListToTreejso([{"IS_UPLOAD_NAME":"已上传"},{"IS_UPLOAD_NAME":"未上传"}],["IS_UPLOAD_NAME","IS_UPLOAD_NAME"]);
 	treeObj[id] = _showMultiCheckTree(treeData[id], "TreeDiv"+id, "_tree"+id);
	
	
 	
 	id =shaixuan_ids[5];
 	createShaixuanDiv(id);
   	treeData[id]=changeListToTreejso(treeData.PROJECT_NAME,["PROJECT_NAME","PROJECT_NAME"]);
   	treeObj[id] = _showMultiCheckTree(treeData[id], "TreeDiv"+id, "_tree"+id);
 	
   id =shaixuan_ids[6];
 	createShaixuanDiv(id);
 	treeData[id]=changeListToTreejso(treeData.PROJECT_CODE,["PROJECT_CODE","PROJECT_CODE"]);
 	treeObj[id] = _showMultiCheckTree(treeData[id], "TreeDiv"+id, "_tree"+id);
 	
 	pagemask.hide();
 	});
}
//展示筛选框
function showShaiXuan(type){;
	event.cancelBubble=true; 
	hideAllShaixuan();
	 if(type=="县市"){
	 	var selected_branch_ids= treeObj["BRANCH_IDS"].getAllChecked();
	 	if(selected_branch_ids!=""){
	 		
	 	}else{
	 		_alert("请先选择业务区!");
	 		return;
	 	}
		var searchJSO = changeFormToJSO($("projectsearch"));
		userSearchName = searchJSO.SITENAME1;
		searchCon = searchJSO;
		searchJSO.SITENAME = searchJSO.SITENAME1;
		searchJSO.BRANCH_IDS=selected_branch_ids;
		searchJSO.COLUMNNAME='COUNTRY_NAME';
		BoWxPlanSiteService.getColumnRecords(searchJSO,function(jso){
		treeData.COUNTRY_NAME=jso.COUNTRY_NAME;
		var id ="Xs";
		treeData[id]=changeListToTreejso(treeData.COUNTRY_NAME,["COUNTRY_NAME","COUNTRY_NAME"]);
		treeObj[id] = _showMultiCheckTree(treeData[id], "TreeDiv"+id, "_tree"+id);
		});
	}
	//alert(args[0]);
	currentType=type;
	var id ="";
	if(currentType=="业务区"){
		currentType=id =id =shaixuan_ids[0];
	}else if(currentType=="站点建设状态"){
		currentType=id =shaixuan_ids[2];
	}else if(currentType=="工程阶段"){
		currentType=id =shaixuan_ids[3];
	}else if(currentType=="项目名称"){
		currentType=id =shaixuan_ids[5];
	}else if(currentType=="铁塔设计文本"){
		currentType=id =shaixuan_ids[4];
	}else if(currentType=="项目编号"){
		currentType=id =shaixuan_ids[6];
	}else if(currentType=="县市"){
		currentType=id =shaixuan_ids[1];
		$("TreeDiv"+id).innerHTML="";
	}
	
	$("shaixuan"+id).style.display="block";
	var o=getInfo(window.event.srcElement.parentNode);
	$("shaixuan"+id).style.left=o.left;
	$("shaixuan"+id).style.top=o.bottom;
}
//创建筛选div
function createShaixuanDiv(id){
	var div =document.createElement("DIV");
	div.className="excel_search";
	div.id="shaixuan"+id;
	div.style.display="none";
	
	div.innerHTML="<div name='' id='centerFrame' style='width:100%;height:100%'>"+
			"<div id='TreeDiv"+id+"' style='background-color:#ffffff;width:100%;overflow:auto'></div>"+
			"<table id='_tree"+id+"' style='display:none' >"+
				"<tr>"+
					"<td isChecked='CHECKED' enableThreeStateCheck='true' img='/acwsui/js/xtree/imgs/csh_vista/' id='ID' parentId='PARENT'>"+
						"NAME"+
					"</td>"+
				"</tr>"+
			"</table>"+
			"</div>"+
			"<div>"+
				"<ul>"+
					"<li>"+
						"<input type='button' style='width:50px' οnclick='makeShaixuan(\""+id+"\")' value='确定' ></input>"+
						"<input type='button' style='width:50px' οnclick='cancelShaixuan(\""+id+"\")' value='取消'></input>"+
						"</li>"+
					"</ul>"+
			"</div>";
	document.body.appendChild(div);
		
}
//隐藏筛选框
function hideAllShaixuan(){
	for(var i=0;i<shaixuan_ids.length;i++){
		try{
		$("shaixuan"+shaixuan_ids[i]).style.display="none";
		}catch(e){
			
		alert(shaixuan_ids[i]);
		alert($("shaixuan"+shaixuan_ids[i]));
		}
	}
}