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 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
Angular2之二级路由详解
Aug 31 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
JavaScript动态生成表格的示例
Nov 02 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
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
javascript实现yield的方法
2013/11/06 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
js实现3D旋转效果
2020/08/18 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
python threading模块操作多线程介绍
2015/04/08 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
python中对数据进行各种排序的方法
2019/07/02 Python
django迁移数据库错误问题解决
2019/07/29 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
vue如何清除浏览器历史栈
2022/05/25 Vue.js