PHP-Z

前端

javascript xml为数据源的下拉框控件

2016-9-4 09:14 发布者: 大熊猫
JavaScript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


此控件以xml为数据源,可以进行输入的多属性自动适配
例如,当你在输入框中输入张三或是长沙,或是湖南,都会出现张三让你选择,输入18,将同时出现张三李四 
测试数据源如下: 
 
<?xml version="1.0" encoding="utf-8" ?> 
<students> 
<student> 
<id>s1</id> 
<name>张三</name> 
<province>湖南</province> 
<city>长沙</city> 
<age>18</age> 
</student> 
<student> 
<id>s2</id> 
<name>李四</name> 
<province>湖北</province> 
<city>武汉</city> 
<age>18</age> 
</student> 
<student> 
<id>s3</id> 
<name>王五</name> 
<province>四川</province> 
<city>成都</city> 
<age>20</age> 
</student> 
</students> 

//---------------------------------------------DropDownListx.js------------------------ 
function DropDownListx(parent,id) 

this.id = id; 
var i; 
var me = this; 
this.parent = parent; 
var e = this.parent; 
var y = e.offsetTop; 
var x = e.offsetLeft; 
this.text = e.value; 
while (e = e.offsetParent) 

y += e.offsetTop; 
x += e.offsetLeft; 

this.parentInfo = {x:0,y:0}; 
this.parentInfo.x = x; 
this.parentInfo.y = y; 
//外观 
this.width = this.parent.offsetWidth; 
this.height = 150; 
this.disabled = false; 
this.visibility = "hidden"; 
this.attributed = false;//数据是否以属性表示,也可以用node来表示 
this.mainText = "";//要显示的字段名字 
this.mainValue = "";//要返回的值的字段名字 
this.selectedIndex = -1;//被選中的索引 
this.mouseoverIndex = -1;//鼠標懸停時的索引 
this.mouseoutIndex = -1;//鼠標離開時的索引 
this.selectedValue = ""; 
this.selectedText = ""; 
this.value = ""; 
this.text = ""; 
this.drawed = false;//表示是否重繪過 
this.table = null; 
//数据源 
this.dataSource = null; 
try 

for(i = 6;i>0;i--) 

try 

this.dataSource = new ActiveXObject("MSXML2.DOMDocument." + i + ".0"); 
break; 

catch(ex1){;}; 


catch(ex2){;}; 
this.dataSource.async = false; 
this.dataSource.setProperty("SelectionLanguage", "XPath"); 
var sh = function(){if(me.visibility == "hidden")me.show();}; 
this.parent.attachEvent("onfocus",function(){window.setTimeout(sh,100);}); 
this.parent.attachEvent("onchange",function(){me.filter(me.parent.value);}); 
this.parent.attachEvent("onkeyup",function(){me.filter(me.parent.value);}); 
this.parent.attachEvent("onclick",function(){if(event.button == "1")window.setTimeout(sh,10);}); 
this.parent.style.cursor = "hand"; 
//事件 
this.onSelected=null; 
this.onmouseover = null; 
this.onmouseout = null; 
this.onhide = null; 
window.document.attachEvent("onclick",function() 

//有可能e不在最上層,所以要找到牠的區域 
if(event.x < me.parentInfo.x || 
event.x > me.parentInfo.x + me.parent.offsetWidth || 
event.y < me.parentInfo.y || 
event.y > me.parentInfo.y + me.parent.offsetHeight) 

if(me.visibility == "visible") 
me.hide(); 

}); 

//重新獲取位置,因爲parent的位置可能變動 
DropDownListx.prototype.getPosition=function() 

var e = this.parent; 
var y = e.offsetTop; 
var x = e.offsetLeft; 
while (e = e.offsetParent) 

y += e.offsetTop; 
x += e.offsetLeft; 

this.parentInfo = {x:0,y:0}; 
this.parentInfo.x = x; 
this.parentInfo.y = y; 
this.width = this.parent.offsetWidth; 

//画出列表 
DropDownListx.prototype.show=function() 

this.getPosition(); 
var me = this; 
//画一个div 
var divid = this.id + "_div_" + this.parent.id; 
var d = document.getElementById(divid); 
if(d==null) 

d = document.createElement("div"); 
d.style.position = "absolute"; 

d.style.borderLeft = "black 1px groove"; 
d.style.borderTop = "black 1px groove"; 
d.style.borderRight = "black 1px groove"; 
document.body.appendChild(d); 
d.setAttribute("id",divid); 
d.style.borderBottom = "black 1px groove"; 
d.style.backgroundColor = "white"; 
d.style.left = this.parentInfo.x + "px"; 
if(document.body.clientHeight < this.parentInfo.y + this.parent.offsetHeight + this.height) 
d.style.top = (this.parentInfo.y - this.height) + "px"; 
else 
d.style.top = (this.parentInfo.y +( this.parent.offsetHeight==""?20:this.parent.offsetHeight)) + "px"; 
d.style.overflowX = "hidden"; 
d.style.overflowY = "auto"; 
d.style.zIndex = 999; 
d.style.visibility = "visible"; 
d.style.borderWidth = "1px"; 
this.visibility = "visible"; 
this.listData(); 
this._selectByName(this.parent.value); 

DropDownListx.prototype.listData=function() 

var e = this.parent; 
var Base = this; 
//显示数据 
if(this.nodeList == null) 
this.nodeList = this.dataSource.documentElement.childNodes; 
var str="<table id = \"" + this.id + "_table_" + e.id + "\" width=\"" + (this.width) + "px\" height=\"24px\">"; 
for(var i = 0;i<this.nodeList.length;i++) 

var text = (base.attributed?this.nodeList.item(i).getAttribute(this.mainText):this.nodeList.item(i).selectSingleNode(this.mainText).text); 
str = str + "<tr><td id = \"" + this.id + "_td_" + i + "_" + e.id + "\" style=\"border-bottom: black 1px dotted;cursor:hand\" >" + text + "</td></tr>"; 

str += "</table>"; 
var div = document.getElementById( this.id + "_div_" + e.id); 
div.innerHTML = str; 
var table = document.getElementById( this.id + "_table_" + e.id); 
this.table = table; 
if(table.offsetHeight < this.height) 
div.style.height = table.offsetHeight + 3; 
else 
div.style.height = this.height + 3; 
div.style.width = table.offsetWidth; 
for(var j = 0;j<this.nodeList.length;j++) 

var d = document.getElementById(this.id + "_td_" + j + "_" + e.id ); 
d.attachEvent('onclick',function() 

var _td = document.getElementById(base.id + "_td_" + base.selectedIndex + "_" + e.id); 

关注微信公众号

扫一扫关注微信公众号

PHP-Z_COM