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


Posted in Javascript onJuly 07, 2009

例如,当你在输入框中输入张三或是长沙,或是湖南,都会出现张三让你选择,输入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;//鼠??彝?r的索引
this.mouseoutIndex = -1;//鼠?穗x??r的索引
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);
if(_td)
{
_td.style.backgroundColor = "";
_td.style.color = "";
}
base.selectedIndex = event.srcElement.parentElement.rowIndex;
document.getElementById(base.id + "_div_" + base.parent.id ).style.visibility="hidden";
base.selectedValue = (base.attributed?base.nodeList.item(base.selectedIndex).getAttribute(base.mainValue):base.nodeList.item(base.selectedIndex).selectSingleNode(base.mainValue).text);
base.selectedText = (base.attributed?base.nodeList.item(base.selectedIndex).getAttribute(base.mainText):base.nodeList.item(base.selectedIndex).selectSingleNode(base.mainText).text);
base.value = base.selectedValue;base.text = base.selectedText;
if(base.onSelected != null)
base.onSelected.apply(base);
return false;
});
d.onmouseover=function()
{
base.mouseoverIndex =parseInt(event.srcElement.id.split("_td_")[1].split("_")[0]);
try
{
event.srcElement.style.backgroundColor='gray';
event.srcElement.style.color='white';
e.value = event.srcElement.innerText;
if(base.onmouseover != null)
base.onmouseover.apply(base);
}
catch(ex){};
};
d.onmouseout = function()
{
base.mouseoutIndex = parseInt(event.srcElement.id.split("_td_")[1].split("_")[0]);
if(event.srcElement.id == base.id + "_td_" + base.selectedIndex + "_" + e.id)
{
event.srcElement.style.backgroundColor='red';
event.srcElement.style.color='blue';
}
else
{
event.srcElement.style.backgroundColor='';
event.srcElement.style.color='';
}
if(base.onmouseout != null)
base.onmouseout.apply(base);
}
}
this.drawed = true;
}
DropDownListx.prototype.hide=function()
{
var d = document.getElementById(this.id + "_div_" + this.parent.id);
if(d)
d.style.visibility = "hidden";
this.visibility = "hidden";
this._select(this.selectedIndex);//为了防止有筛选的数据,要先选择
this.nodeList = this.dataSource.documentElement.childNodes;
if(this.onhide != null)
this.onhide.apply(this);
}
DropDownListx.prototype.setSource=function(d)
{
this.dataSource.loadXML(d.xml);
this.nodeList = d.documentElement.childNodes;
this.drawed = false;
}
DropDownListx.prototype.setChildNodes=function(nodes)
{
this.dataSource.loadXML("<?xml version=\"1.0\" encoding=\"utf-8\" ?><options></options>");
var node = this.dataSource.documentElement;
for(var i = 0;i<nodes.length;i++)
{
var opt = doc.createNode(1,"option","");
var r = nodes.item(i).childNodes
for(var j = 0;j<r.length;j++)
{
var att = doc.createNode(1,r.item(j).nodeName,"");
att.text = r.item(j).text;
opt.appendChild(att);
}
node.appendChild(opt);
}
this.drawed = false;
}
DropDownListx.prototype.filter=function(text)
{
if(text==null || text =="")
{
this.reset();
}
else
{
var _text = text.split(" ");
var str = "./*[contains(.,'" + _text[0] + "')";
for(var i=1;i<_text.length;i++)
{
str = str + " and contains(.,'" + _text[i] + "')"
}
str = str + "]";
this.nodeList = this.dataSource.documentElement.selectNodes(str);
}
this.listData();
}
//根据查询选中的节点的子节点的值
DropDownListx.prototype.getNodeValue=function(nodeName)
{
if(nodeName == null || nodeName == "")
return this.value;
return (this.attributed?this.nodeList.item(this.selectedIndex).getAttribute(nodeName):this.nodeList.item(this.selectedIndex).selectSingleNode(nodeName).text);
}
DropDownListx.prototype.reset=function()
{
this.nodeList = this.dataSource.documentElement.childNodes;
var _td = document.getElementById(this.id + "_td_" + this.selectedIndex + "_" + this.parent.id);
if(_td)
{
_td.style.backgroundColor = "";
_td.style.color = "";
}
this.selectedIndex = -1;
this.selectedValue = "";
this.selectedText = "";
this.value = "";
this.text = "";
this.parent.value = "";
}
DropDownListx.prototype.select=function(index)
{
if(index == -1)
this.reset();
else
{
var _td = document.getElementById(this.id + "_td_" + this.selectedIndex + "_" + this.parent.id);
if(_td)
{
_td.style.backgroundColor = "";
_td.style.color = "";
}
this.nodeList = this.dataSource.documentElement.childNodes;
this.selectedIndex = index;//被?中的索引
this.selectedValue = this.attributed?this.nodeList.item(index).getAttribute(this.mainValue):this.nodeList.item(index).selectSingleNode(this.mainValue).text;
this.selectedText = this.attributed?this.nodeList.item(index).getAttribute(this.mainText):this.nodeList.item(index).selectSingleNode(this.mainText).text;
this.value = this.selectedValue;
this.text = this.selectedText;
this.parent.value = this.selectedText;
try
{
this.table.rows.item(index).cells.item(0).focus();
this.table.rows.item(index).cells.item(0).style.backgroundColor = "red";
this.table.rows.item(index).cells.item(0).style.color = "blue";
this.parent.focus();
}catch(ex){}
if(this.onSelected != null)
this.onSelected.apply(this);
}
}
DropDownListx.prototype.selectByName=function(name)
{
if(name == null || name == "")
{
this.reset();
return;
}
for(var i = 0;i<this.nodeList.length;i++)
{
var _name = this.attributed?this.nodeList.item(i).getAttribute(this.mainText):this.nodeList.item(i).selectSingleNode(this.mainText).text;
if(_name == name) break;
}
if(i != this.nodeList.length)
{
this.select(i);
}
else
this.reset();
}
DropDownListx.prototype.selectByValue=function(value)//不???录?母北
{
if(value == null || value == "")
{
this.reset();
return;
}
for(var i = 0;i<this.nodeList.length;i++)
{
var _value = this.attributed?this.nodeList.item(i).getAttribute(this.mainValue):this.nodeList.item(i).selectSingleNode(this.mainValue).text;
if(_value == value) break;
}
if(i != this.nodeList.length)
{
this.select(i);
}
else
this.reset();
}
DropDownListx.prototype._select=function(index)//不???录?母北
{
if(index == -1)
this.reset();
else
{
var _td = document.getElementById(this.id + "_td_" + this.selectedIndex + "_" + this.parent.id);
if(_td)
{
_td.style.backgroundColor = "";
_td.style.color = "";
}
//this.nodeList = this.dataSource.documentElement.childNodes;
this.selectedIndex = index;//被?中的索引
this.selectedValue = this.attributed?this.nodeList.item(index).getAttribute(this.mainValue):this.nodeList.item(index).selectSingleNode(this.mainValue).text;
this.selectedText = this.attributed?this.nodeList.item(index).getAttribute(this.mainText):this.nodeList.item(index).selectSingleNode(this.mainText).text;
this.value = this.selectedValue;
this.text = this.selectedText;
this.parent.value = this.selectedText;
try
{
this.table.rows.item(index).cells.item(0).focus();
this.table.rows.item(index).cells.item(0).style.backgroundColor = "red";
this.table.rows.item(index).cells.item(0).style.color = "blue";
this.parent.focus();
}catch(ex){}
}
}
DropDownListx.prototype._selectByName=function(name)//不???录?母北
{
if(name == null || name == "")
{
this.reset();
return;
}
for(var i = 0;i<this.nodeList.length;i++)
{
var _name = this.attributed?this.nodeList.item(i).getAttribute(this.mainText):this.nodeList.item(i).selectSingleNode(this.mainText).text;
if(_name == name) break;
}
if(i != this.nodeList.length)
{
this._select(i);
}
else
this.reset();
}
DropDownListx.prototype._selectByValue=function(value)//不???录?母北
{
if(value == null || value == "")
{
this.reset();
return;
}
for(var i = 0;i<this.nodeList.length;i++)
{
var _value = this.attributed?this.nodeList.item(i).getAttribute(this.mainValue):this.nodeList.item(i).selectSingleNode(this.mainValue).text;
if(_value == value) break;
}
if(i != this.nodeList.length)
{
this._select(i);
}
else
this.reset();
}
//---------------------------------------------DropDownListx-vsdoc.js------------------------
/// <reference name="MicrosoftAjax.js"/>
function DropDownListx(parent, id)
{
/// <summary>
/// 自定义的下拉框类
/// </summary>
/// </param>
/// <param name="parent" type="Objec">
/// 下??虻母缚丶??荒苁俏谋臼淙肟蛟??
/// </param>
/// </param>
/// <param name="id" type="String">
/// 下拉框的ID的文本
/// </param>
}
DropDownListx.prototype =
{
getPosition: function()
{
/// <summary>
/// 重新获取下拉框的位置,因为parent的位置可能会变动
/// </summary>
},
show: function()
{
/// <summary>
/// 显示下拉框
/// </summary>
},
listData: function()
{
/// <summary>
/// 绘制下拉框
/// </summary>
},
hide: function()
{
/// <summary>
/// 隐藏下拉框
/// </summary>
},
setSource: function(d)
{
/// <summary>
/// 设置下拉框xml数据源
/// </summary>
/// <param name="d" type="Objec">
/// 要指定的下拉框的xml数据源
/// </param>
},
setChildNodes: function(nodes)
{
/// <summary>
/// 设置下拉框xml数据源
/// </summary>
/// <param name="nodes" type="Objec">
/// 要指定的下拉框的xml节点集
/// </param>
},
filter: function(text)
{
/// <summary>
/// 对下拉框进行全局筛选
/// </summary>
/// <param name="text" type="String">
/// 要查找的文枉
/// </param>
},
getNodeValue: function(nodeName)
{
/// <summary>
/// 返回选中节点对应的子节点的值
/// </summary>
/// <param name="nodeName" type="String">
/// 子节点名
/// </param>
},
reset: function()
{
/// <summary>
/// 重置下拉框
/// </summary>
},
select: function(index)
{
/// <summary>
/// 按索引进行选择
/// </summary>
/// <param name="index" type="Int">
/// 索引值
/// </param>
},
selectByName:function(name)
{
/// <summary>
/// 按文本进行选择
/// </summary>
/// <param name="name" type="String">
/// 要选择的文本,此值将会与mainText属性所对应的节点进行对比
/// </param>
},
selectByValue:function(value)
{
/// <summary>
/// 按值进行选择
/// </summary>
/// <param name="value" type="String">
/// 要选择的值,此值将会与mainValue属性所对应的节点进行对比
/// </param>
},
_select:function(index)
{
/// <summary>
/// 按索引进行选择,select方法不响应事件的副本
/// </summary>
/// <param name="index" type="Int">
/// 索引值
/// </param>
},
_selectByName:function(name)
{
/// <summary>
/// 按文本进行选择,selectByName方法不响应事件的副本
/// </summary>
/// <param name="name" type="String">
/// 要选择的文本,此值将会与mainText属性所对应的节点进行对比
/// </param>
},
_selectByValue:function(value)
{
/// <summary>
/// 按值进行选择,selectByValue方法不响应事件的副本
/// </summary>
/// <param name="value" type="String">
/// 要选择的值,此值将会与mainValue属性所对应的节点进行对比
/// </param>
}
}
Javascript 相关文章推荐
javascript getElementsByClassName函数
Apr 01 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 #Javascript
javascript 选择文件夹对话框(web)
Jul 07 #Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 #Javascript
javascript 新浪背投广告实现代码
Jul 07 #Javascript
JavaScript 对象、函数和继承
Jul 07 #Javascript
js 日期转换成中文格式的函数
Jul 07 #Javascript
javascript 面向对象思想 附源码
Jul 07 #Javascript
You might like
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
机器学习python实战之决策树
2017/11/01 Python
Python中文件的读取和写入操作
2018/04/27 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
python如何读取bin文件并下发串口
2019/07/05 Python
python将数组n等分的实例
2019/12/02 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Python常用库大全及简要说明
2020/01/17 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Python实现弹球小游戏
2020/08/01 Python
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
浪费资源的建议书
2014/03/12 职场文书
材料员岗位职责范本
2015/04/11 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript