Javascript實現GridView

1. GridView.js

/**/ /********************************************
 *
 * Script表格對象
 * 作者：limin_he(limin_he@maxnse.com)
 * 日期：2006-11-03
 *
 ********************************************/

// 列表單元格結構
function  DataCellStruct(value,css)
... {
    this.text = value;
    this.className = css;
}

//  將text格式化成DataCellStruct(列表單元格結構)的數組
//  css : 樣式數組
//  text: 字符串
//  split: 字符串的分割符
function  DataCellFormat(css,text,split)
... {
    var items = new Array();
    var chars = text.split(split);
    for(var i=0; i<chars.length; i++)
    ...{
        items[i] = new DataCellStruct(chars[i],css[i]);
    }
    return items;
}
//  將表形式的字符串格式化成數組形式
function  DataViewFormat(css,text,rowsplit,celsplit)
... {
    var items = new Array();
    var rows = text.split(rowsplit);
    for(var i=0; i<rows.length; i++)
    ...{
        items[i] = DataCellFormat(css,rows[i],celsplit);
    }
    return items;
}

    
// Script表格對象
function  GridView(sender)
... {
    this.panel = sender;                                //對象容器
    this.object = null;                                    //當前對象
    
    this.headerItem = null;                                //表頭數據源
    this.DataSource = null;                                //數據源
    
    this.CssClass = null;                                //樣式 
    this.HeaderCss = null;                                //表頭樣式
    this.ItemCss = null;                                //列表項樣式
    this.AlternatingItemCss = null;                        //單列表項樣式
    this.Rules = "all";                                    //表格的rules
    this.Cellpadding = "0px";                            //表格的cellpadding
    this.Cellspacing = "0px";                            //表格的cellspacing
    this.Border = "1px";                                //表格的border
    this.Summary = "";                                  //表格的summary
    this.Width = null;                                    //表格寬
}
// 初使化
GridView.prototype.Init  =   function ()
... {
    this.panel.innerHTML = "";
}
// 加載
GridView.prototype.Load  =   function ()
... {
    this.Init();
    this.CreateChildControls();
}
// 創建子控件
GridView.prototype.CreateChildControls  =   function ()
... {
    var sender = this;
    
    var table = document.createElement("TABLE");
    table.rules = this.Rules;
    table.border = this.Border;
    table.cellPadding = this.Cellpadding;
    table.cellSpacing = this.Cellspacing;
    table.summary = this.Summary;
    table.className = this.CssClass;
    table.DataSource = this.DataSource;
    if(this.Width!=null) table.width = this.Width;
    var tbody = document.createElement("TBODY");
    table.appendChild(tbody);
    this.object = table;
    
    CreatateHeader();
    CreateBody();
    
    this.panel.appendChild(table);
    
    //創建表頭
    function CreatateHeader()
    ...{
        if(sender.headerItem!=null)
        ...{
            var row = new HeaderList();
            row.itemSource = sender.headerItem;
            row.Load();
            var header = row.object;
            header.className = sender.HeaderCss;
            tbody.appendChild(header);
        }
    }
    //創建主體
    function CreateBody()
    ...{
        if(sender.DataSource!=null)
        ...{
            for(var i=0; i<sender.DataSource.length; i++)
            ...{
                var row = new ItemList();
                row.itemSource = sender.DataSource[i];
                row.Load();
                var itemrow = row.object;
                itemrow.className = sender.ItemCss;
                if(sender.AlternatingItemCss!=null)
                ...{
                    if(i%2==1) itemrow.className = sender.AlternatingItemCss;
                }
                tbody.appendChild(itemrow);
            }
        }
    }
}

// 表頭對象
function  HeaderList()
... {
    this.itemSource = null;            //數據源(為Array類型)
    this.object = null;                //當前對象(為TR)
}
// 加載
HeaderList.prototype.Load  =   function ()
... {
    if(this.itemSource!=null)
    ...{
        var row = document.createElement("tr");
        for(var i=0; i<this.itemSource.length; i++)
        ...{
            var cell = document.createElement("td");
            cell.className = this.itemSource[i].className;
            cell.innerHTML = this.itemSource[i].text;
            row.appendChild(cell);
        }
        this.object = row;
    }
}


// 列表項對象
function  ItemList()
... {
    this.itemSource = null;            //數據源(為Array類型)
    this.object = null;                //當前對象(為TR)
    
}
// 加載
ItemList.prototype.Load  =   function ()
... {
    this.CreateChildControls();
}
// 創建子控件
ItemList.prototype.CreateChildControls  =   function ()
... {
    if(this.itemSource!=null)
    ...{
        var row = document.createElement("tr");
        row.itemSource = this.itemSource;
        for(var i=0; i<this.itemSource.length; i++)
        ...{
            var cell = document.createElement("td");
            cell.className = this.itemSource[i].className;
            cell.innerHTML = this.itemSource[i].text;
            row.appendChild(cell);
        }
        this.object = row;
    }
}

 2. 調用

< style  type ="text/css" > ...
    .tableCss
    {...}{
        border: 0px solid menu;
        color:#000000;
        background-color: #999999;
        font-size:11px;
    }
    .HeaderCss
    {...}{
        background-color: #FFCC33;
        color:#000000;
        font-size:12px;
        text-align: center;
    }
    .ItemCss
    {...}{
        background-color: #FFFF99;
        color:#000000;
        font-size:11px;
    }
    .AlternatingItemCss
    {...}{
        background-color: #CCCCCC;
        color:#000000;
        font-size:11px;
    }
    .headcell1
    {...}{
        background-color: #FF9900;
        color:#000000;
        font-size:11px;
    }
    .cell1
    {...}{
        background-color: #FF9900;
        color:#FFFFFF;
        font-size:11px;
        text-align: center;
        width:150px;
    }
    .cell3
    {...}{
        background-color: #FFFFCC;
        color:#000000;
        font-size:11px;
        text-align: center;
        width:80px;
    }
</ style >


window.onload = function()
{
    var headercss = new Array("headcell1","","","","");
    var strHeader = "展覽日期|地址|人物|內容|編輯";
    var bodycss = new Array("cell1","","","","cell3");
    var strBody = "2006-10-10 < , > 長沙 < , > 利民 < , > 呵呵 < , > 修改 < | > 2006-10-10 < , > 長沙 < , > 利民 < , > 呵呵 < , > 修改 < | > 2006-10-10 < , > 長沙 < , > 利民 < , > 呵呵 < , > 修改 < | > 2006-10-10 < , > 長沙 < , > 利民 < , > 呵呵 < , > 修改 < | > 2006-10-10 < , > 長沙 < , > 利民 < , > 呵呵 < , > 修改";

    var view = new GridView(document.getElementById("ClientList"));
    view.headerItem = DataCellFormat(headercss,strHeader,"|");
    view.DataSource = DataViewFormat(bodycss,strBody," < | > "," < , > ");
    view.CssClass = "tableCss";
    view.HeaderCss = "HeaderCss";
    view.ItemCss = "ItemCss";
    view.Rules = "all";
    view.Border = "0px";
    view.Cellspacing = "1px";        
    view.Cellpadding = "4px";    
    view.Width = "600px";
    view.Load();
    
}

< div  id ="ClientList" ></ div >

3. 樣圖