自己用JS写的DataTable和ComboBox

Code
//数据集 
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 οnclick=\""+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+"\" οnmοuseοver=\""+this.Instance+".HoverUser(this)\" οnmοuseοut=\""+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(){} 

转载于:https://www.cnblogs.com/ksoft/archive/2009/02/22/1396035.html