自己用JS写的DataTable和ComboBox
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
//数据集
function KDataTable(source)
{
this.Source = source!=null?source:"";
this.Rows = new Array();
this.Init();
}
KDataTable.prototype.Init = function()
{
var aryRow = this.Source.split(";");
for(var i=0;i<aryRow.length;i++)
{
this.Rows = aryRow.split("|");
}
}
KDataTable.prototype.GetValue = function(rowIndex, columnName)
{
if(rowIndex>this.Rows.length || this.Source==""){return null;}
var colIndex = 0;
for(var i=0;i<this.Rows[0].length;i++)
{
if(columnName.toLowerCase()==unescape(this.Rows[0]).toLowerCase()){colIndex=i;break;}
}
return unescape(this.Rows[rowIndex][colIndex]);
}
KDataTable.prototype.AddRow = function()
{
var tmp = "";
for(var i=0;i<this.Rows[0].length;i++)
{
tmp += i>0?"|":"";
tmp += "";
}
this.Rows[this.Rows.length] = tmp.split("|");
}
KDataTable.prototype.ToString = function(blDecode)
{
var b = new StringBuilder();
b.append("");
for(var i=0;i<this.Rows.length;i++)
{
if(i>0){b.append(";");}
for(var j=0;j<this.Rows.length;j++)
{
if(j>0){b.append("|");}
b.append(blDecode?unescape(this.Rows[j]):this.Rows[j]);
}
}
return b.toString()
}
===========================================
//需要的JS文件
//KDataTable.js
//----------------------------------------使用示例----------------------------------------
//var selectData = new KDataTable("<%=Data %>");
//var myComboBox = new ComboBox("myComboBox", "aaa");
//myComboBox.ValueColumn = "ID";
//myComboBox.TextColumn = "TrueName";
//myComboBox.ItemHTML = "{TrueName}";
//myComboBox.DDLWidth = 300;
//myComboBox.InputHeight = 22;
//myComboBox.AddFilterColumn("TrueName");
//myComboBox.Init();
//myComboBox.SetSelectData(selectData);
//----------------------------------------------------------------------------------------
function $(id){return document.getElementById(id);}
//定义StringBuilder类
var StringBuilder = function(){this._sArray = new Array();}
StringBuilder.prototype.append = function(str){this._sArray.push(str);}
StringBuilder.prototype.toString = function(){return this._sArray.join('');}
//定义String的trim方法
String.prototype.trim = function(){return this.replace(/(^\s*)|(\s*$)/g, "");}
//===============ComboBox类=========================================
function ComboBox(instance, objId, dataSource)
{
this.Instance = instance;
this.Obj = $(objId);
this.DataSource = dataSource==null?null:dataSource;
this.Data = new KDataTable(this.DataSource==null?"":this.DataSource);
this.DivId = this.Instance + "divDDL";
this.DDLWidth = 140;//下拉选择框宽度
this.InputHeight = 20;//文本输入框高度
this.Text = "";//选中项目的文本
this.Value = "";//选中项目的值
this.Disabled = false;//是否禁用
this.CheckValue = true;//离开控件的时候是否检测数据有效性
this.TextColumn = "Name";//文本字段名
this.ValueColumn = "Id";//值字段名
this.FilterColumns = new Array();//过滤字段数组
this.FocusShowList = false;//输入框获得焦点的时候是否显示下拉列表
this.ItemHTML = "{Name}";//选择项目的HTML
this.SelectColor = "#0A246A";//选中的项目的背景颜色
this.CommonColor = "#FFFFFF";//普通项目的背景颜色
this.ItemColor = "#000000";//选择项目字体颜色
this.ItemOnColor = "#FFFFFF";//当前选择项目字体颜色
this.BorderColor = "#808080";//边框颜色
this.SplitColor = "#cccccc";//分割线颜色
this.ItemLineHeight = 22;//选择项样式字体高度
this.ItemHeight = 22;//选择项高度
}
//[ok]类初始化
ComboBox.prototype.Init = function()
{
if(this.Disabled)
{
this.Obj.disabled = true;
var dt = this.Data;
for(var i=1;i<dt.Rows.length;i++)
{
if(dt.GetValue(i, this.ValueColumn)==this.Value)
{
this.Text = dt.GetValue(i, this.TextColumn);
this.Obj.value = this.Text;break;
}
}
if(this.DataSource!=null){this.DataOnLoad();}
return;
}
this.Obj.disabled = false;
var strInstance = this.Instance;
//注册文本框事件
try{this.Obj.setAttribute("AUTOCOMPLETE", "OFF");}catch(e){}
this.Obj.onkeyup= function(){eval(strInstance + ".AutoComplete(event);");}
this.Obj.onkeydown = function(){if(event.keyCode==13) return false;}
this.Obj.onblur= function(){eval(strInstance + ".HideDDL();");}
if(this.FocusShowList)
{
this.Obj.onfocus = function(){eval(strInstance + ".AutoComplete(event);");}
}
this.Obj.style.height = this.InputHeight + "px";
if($(this.DivId)==null)
{
document.write("<iframe id=\""+this.DivId+"Iframe\" src=\"about:blank\" style=\"position:absolute;z-index:1;display:none;\"></iframe>");
document.write("<div id=\""+this.DivId+"\" style=\"overflow-y:auto;overflow-x:hidden;width:"+this.DDLWidth+"px;border:solid 1px "+this.BorderColor+";position:absolute;left:0px;top:0px;background-color:#ffffff;display:none;z-index:9999;\">");
document.write("<ul onclick=\""+strInstance+".SelectUser();\" id=\""+strInstance+"UlUsers\"></ul>");
document.write("</div>");
}
this.DataOnLoad();
}
//[ok]从服务器获取选择数据==可重写
ComboBox.prototype.SetSelectData = function(data)
{
this.Data = data==null?new KDataTable(""):data;
this.Init();
}
//[ok]数据加载完成后执行的操作
ComboBox.prototype.DataOnLoad = function()
{
if(this.Disabled)
{
var dt = this.Data;
for(var i=1;i<dt.Rows.length;i++)
{
if(dt.GetValue(i, this.ValueColumn)==this.Value)
{
this.Text = dt.GetValue(i, this.TextColumn);
this.Obj.value = this.Text;break;
}
}
return;
}
}
ComboBox.prototype.AddFilterColumn = function(columnName){this.FilterColumns[this.FilterColumns.length] = columnName;}
ComboBox.prototype.ClearFilterColumn = function(){this.FilterColumns=new Array();}
//[ok]自动完成
ComboBox.prototype.AutoComplete = function(e)
{
var div = $(this.DivId);
var iframe = $(this.DivId + "Iframe");
var obj = this.Obj;
if(div.style.display=="none")
{
var posX = obj.offsetLeft;
var posY = obj.offsetTop;
var objHeight = parseFloat(obj.style.height.replace("px", ""), 10);
var aBox = obj;//需要获得位置的对象
do
{
aBox = aBox.offsetParent;
posX += aBox.offsetLeft;
posY += aBox.offsetTop;
} while( aBox.tagName != "BODY" );
div.style.left = posX + "px";
div.style.top = (posY + objHeight) + "px";
div.style.display = "block";
iframe.style.display = "block";
}
//-----按键操作-----------------
var keyCode = document.all ? window.event.keyCode : e.which ;//获取键盘按键值
var objDDL = $(this.Instance + "UlUsers")
if((keyCode!=13 && keyCode!=38 && keyCode!=40) || objDDL.innerHTML=="")
{
//填充查询结果
var b = new StringBuilder();
b.append("");
var dt = this.Data;
var strInputValue = this.Obj.value.toLowerCase();
var aryColumns = dt.Rows[0];
var blIsTop = true;
for(var i=1;i<dt.Rows.length;i++)
{
var blOK = false;
for(var j=0;j<this.FilterColumns.length;j++)
{
blOK = blOK || dt.GetValue(i, this.FilterColumns[j]).toLowerCase().indexOf(strInputValue)>=0;
}
if(blOK)
{
var itemHtml = this.ItemHTML;
for(var j=0;j<aryColumns.length;j++)
{
var columnName = unescape(aryColumns[j]);
while(itemHtml.indexOf("{"+columnName+"}")>=0)
{
itemHtml = itemHtml.replace("{"+columnName+"}", dt.GetValue(i, columnName));
}
}
var style = "";
style += "clear:both;float:left;width:98%;height:"+this.ItemHeight+"px;line-height:"+this.ItemLineHeight+"px;margin-bottom:0px;padding-left:3px;";
style += blIsTop?"":"border-top:1px solid "+this.SplitColor+";";
style += "color:"+this.ItemColor+";cursor:pointer";
b.append("<li id=\""+this.Instance+"userIdm_"+i+"\" onmouseover=\""+this.Instance+".HoverUser(this)\" onmouseout=\""+this.Instance+".ItemOut()\" style=\""+style+"\">"+itemHtml+"</li>");
blIsTop = false;
}
}
b.append("");
objDDL.innerHTML = b.toString();
}
iframe.style.left = div.offsetLeft;
iframe.style.top = div.offsetTop;
iframe.style.width = div.offsetWidth;
iframe.style.height = div.offsetHeight;
if(objDDL.innerHTML==""){div.style.display="none";iframe.style.display="none";}
if(keyCode==13){this.SelectUser();return false;}
if(keyCode==38){this.ItemSelectPrev();return;}
if(keyCode==40){this.ItemSelectNext();return;}
}
//[ok]隐藏好友选择列表
ComboBox.prototype.HideDDL = function()
{
$(this.DivId).style.display='none';
$(this.DivId + "Iframe").style.display = "none";
if(!this.CheckValue){return;}//不需要检查数据有效性
if(this.Value==""){this.Obj.value="";}
var checkOk = false;
var dt = this.Data;
for(var i=1;i<dt.Rows.length;i++)
{
if(dt.GetValue(i, this.ValueColumn)==this.Value)
{
checkOk = dt.GetValue(i, this.TextColumn)==this.Text;
break;
}
}
checkOk = this.Text==this.Obj.value;
if(!checkOk){this.Obj.value="";}
}
//[ok]鼠标滑过选择项事件
ComboBox.prototype.HoverUser = function(obj)
{
this.Obj.onblur = function(){}
var items = obj.parentNode.getElementsByTagName("li");
for(var i=0;i<items.length;i++)
{
items.style.background=this.CommonColor;
items.style.color=this.ItemColor;
}
obj.style.background=this.SelectColor;
obj.style.color=this.ItemOnColor;
}
//[ok]键盘选择下一个事件
ComboBox.prototype.ItemSelectNext = function()
{
var onIndex = -1;
var objDDL = $(this.Instance + "UlUsers")
var items = objDDL.getElementsByTagName("li");
for(var i=0;i<items.length;i++)
{
if(items.style.background.toUpperCase()==this.SelectColor)
{
onIndex = i;
if(i<items.length-1)
{
items.style.background=this.CommonColor;
items.style.color=this.ItemColor;
}
break;
}
}
if(onIndex<items.length-1)
{
items[onIndex+1].style.background=this.SelectColor;
items[onIndex+1].style.color=this.ItemOnColor;
}
}
//[ok]键盘选择上一个事件
ComboBox.prototype.ItemSelectPrev = function()
{
var onIndex = 1;
var objDDL = $(this.Instance + "UlUsers")
var items = objDDL.getElementsByTagName("li");
for(var i=0;i<items.length;i++)
{
if(items.style.background.toUpperCase()==this.SelectColor)
{
onIndex = i;
if(i>0)
{
items.style.background=this.CommonColor;
items.style.color=this.ItemColor;
}
break;
}
}
if(onIndex>0)
{
items[onIndex-1].style.background=this.SelectColor;
items[onIndex-1].style.color=this.ItemOnColor;
}
}
//[ok]鼠标移出选择项事件
ComboBox.prototype.ItemOut = function()
{
var strInstance = this.Instance;
this.Obj.onblur = function(){eval(strInstance + ".HideDDL();");}
}
//[ok]选择选择项事件
ComboBox.prototype.SelectUser = function()
{
var objDDL = $(this.Instance + "UlUsers")
var items = objDDL.getElementsByTagName("li");
var dt = this.Data;
for(var i=0;i<items.length;i++)
{
if(items.style.background.toUpperCase()==this.SelectColor)
{
var index = parseInt(items.id.split("_")[1], 10)
this.Text = dt.GetValue(index, this.TextColumn);
this.Value = dt.GetValue(index, this.ValueColumn);
$(this.DivId).style.display='none';
$(this.DivId + "Iframe").style.display = "none";
break;
}
}
this.Obj.value = this.Text;
this.OnSelected();
}
//[ok]可选中某个选择项之后的自定义事件==可重写
ComboBox.prototype.OnSelected = function(){}