实战jquery(1)-自建datagrid，有图有真相有源码

css在不同浏览器的兼容性让人头痛。先发图
 
 
 
基本思路如下：
 
1、datagrid包裹在一个大的div中，里面包括header、title、body、footer几个部门，每个部分都是一个div
 
2、标题和内容都包含一个具有相同col的table，通过body的scroll函数滚动标题部门的div，使表头和内容看起来是一个整体
 
3、设置图片背景实现效果，但是css不支持拉伸，要为每个高度实现图片是个讨厌的事情。
 
构造函数：
 
 
/** 
 * DataGrid Class. 
 * @param setting 表格配置，包括表头标题，列配置等，可以继续扩展 
 * @param id      表的ID，dom中的ID； 
 * @param owner   表的父容器。 
 *  
 */ 
$.DS.UI.DataGrid = function(setting, id, owner) 
构造表的过程如下：
 
 
dataGrid = new $.DS.UI.DataGrid({ 
    headerTitle:"借阅书籍列表", 
    columns:[ 
        {title:"书籍名称", field:"bookname", width:350}, 
        {title:"书刊号", field:"bookid", width:250}, 
        {title:"借阅日期", field:"date", width:200}, 
        {title:"过期天数", field:"days", width:430}, 
        {title:"逾期费用", field:"fee", width:430} 
        ]},"gd_booklist","#booklist"); 
         
dataGrid.setJSONData([ 
    {bookname:"金刚葫芦娃之奥特曼大战孙悟空哪咤打小怪物", bookid:"KJ0001", date:"2011-10-10", days:"5", fee:"0"}, 
    {bookname:"豆豆龙(1)", bookid:"KJ0002", date:"2011-10-10", days:"5", fee:"0"}, 
    {bookname:"豆豆龙(2)", bookid:"KJ0002", date:"2011-10-10", days:"5", fee:"0"}, 
    {bookname:"豆豆龙(3)", bookid:"KJ0002", date:"2011-10-10", days:"5", fee:"0"}, 
    {bookname:"豆豆龙(4)", bookid:"KJ0002", date:"2011-10-10", days:"5", fee:"0"}, 
    {bookname:"豆豆龙(5)", bookid:"KJ0002", date:"2011-10-10", days:"5", fee:"0"} 
]); 
完整代码和css如下：
 
js代码：
 
 
(function($){ 
    if( !$.DS ) $.DS = {}; 
    if( !$.DS.UI ) $.DS.UI = {}; 
     
    $.DS.UI.defaultDataGridSetting = { 
         
    }; 
     
    $.DS.UI.allDataGrid = {}; 
     
    /** 
     * DataGrid Class. 
     * @param setting 表格配置，包括表头标题，列配置等，可以继续扩展 
     * @param id    表的ID，dom中的ID； 
     * @param owner   表的父容器。 
     *  
     */ 
    $.DS.UI.DataGrid = function(setting, id, owner){ 
        this.id = id; 
        if( !id ) id = "_dg_"+Math.random(); 
         
        this.setting = $.extend($.DS.UI.defaultDataGridSetting, setting); 
         
        this.frame = $("<DIV id=/""+id+"/"></div>"); 
        this.frame[0]._jobj = this; 
        this.frame.addClass("datagrid-frame"); 
        this.frame.append("<div id=/"_dg_header/">"+setting.headerTitle+"</div>" + 
                "<div id=/"_dg_title/"/>" + 
                "<div id=/"_dg_body/"/>" + 
                "<div id=/"_dg_footer/">footer</div>"); 
                 
        thisthis.header = this.frame.find("#_dg_header"); 
        this.header.addClass("datagrid-header"); 
         
        thisthis.title = this.frame.find("#_dg_title"); 
        this.title.addClass("datagrid-title"); 
         
        thisthis.body = this.frame.find("#_dg_body"); 
        this.body.addClass("datagrid-body"); 
         
        var _title = this.title; 
        var _body = this.body; 
          
        _frame = this; 
         
        this.body.scroll(function(obj){ 
            _frame.title.offset({left:_frame.content.offset().left}); 
        }); 
         
        thisthis.footer = this.frame.find("#_dg_footer"); 
        this.footer.addClass("datagrid-footer"); 
         
        this.columns(setting.columns); 
         
        this.owner(owner); 
    }; 
     
    $.DS.UI.DataGrid.prototype = { 
        /** 
         * @param parent null=getter not null=setter 
         */ 
        owner:function(owner){ 
            if( null === owner ) return this._owner; 
            if( $(owner) === this._owner ) return this._owner; 
            //remove from current parent;  
            if(this._owner) _owner.remove(this.id);  
            this._owner = $(owner); 
            this._owner.append(this.frame); 
            this.updateDisplay(); 
        }, 
         
        columns:function(columns){ 
            if( null === columns ) return this._columns; 
              
            this._columns = columns; 
            this.title.empty(); 
            var title = ""; 
            var cols = ""; 
            var testTB = ""; 
            var columnslength = 0; 
            for (var i=0;i<this._columns.length;i++){ 
                var field = this._columns[i]; 
                columnslength += field.width; 
                //title += "<div style=/"width:"+(field.width)+"/" class=/"datagrid-title-cell/"><p>"+field.title+"</P></div>"; 
                title += "<td>"+field.title+"</td>"; 
                cols += "<col width=/""+(field.width)+"/"/>"; 
                //testTB += "<td>asdfasdf</td>"; 
            } 
             
            this.title.width(columnslength+1000); 
            title = "<table style=/"float:left/" width=/""+(columnslength)+"/" cellspacing=/"0/" cellpadding=/"0/" border=/"0/">"+cols+"<tr>"+title+"</tr></table>"; 
            title += "<table style=/"float:left/" width=/"900/"  cellspacing=/"0/" cellpadding=/"0/" border=/"0/"><tr><td width=/"900/">　</td></tr></table>"; 
            this.title.html(title); 
             
            var tab = "<table width=/""+columnslength+"/" cellspacing=/"0/" cellpadding=/"0/" border=/"0/" id=/"_dg_contant/">"+cols+"<tbody/></table>"; 
            this.body.html(tab); 
            thisthis.content = this.body.find("#_dg_contant"); 
            //this.content.find(">tbody").append("<tr>"+testTB+"</tr>"); 
        }, 
         
        loadData:function(url){ 
              
        }, 
         
        updateDisplay:function(){ 
            this.body.width(this.body.parent().width()- 2); 
            this.body.height(this.body.parent().height() - this.header.height()  
                - this.title.height() - this.footer.height() ); 
        }, 
         
        setJSONData:function(data){ 
            this.content.find(">tbody").empty(); 
            var html = ""; 
            for(var j=0; j < data.length; j++){ 
                html = "<tr class=/"datagrid-body-row-"+ (j%2) +"/">" 
                for (var i=0;i<this._columns.length;i++){ 
                    var field = this._columns[i]; 
                    value = data[j][field.field] || ' '; 
                    html += "<td>"+value+"</td>"; 
                } 
                html += "</tr>"; 
                this.content.find(">tbody").append(html); 
            } 
        }, 
         
        setDatasource:function(datasource){ 
             
        } 
    } 
     
    $.DS.UI.findDataGrid = function(id){ 
        return $.DS.UI.allDataGrid[id]; 
    } 
})(jQuery) 
css部分
 
 
@CHARSET "UTF-8"; 
 
.datagrid-frame{ 
    border-bottom: 1px solid #999999; 
    border-top: 1px solid #ffffff; 
    border-left: 1px solid  #ffffff; 
    border-right: 1px solid #999999; 
     
    width:99%; 
    height:99%; 
    text-align: left; 
    overflow: hidden 
} 
 
.datagrid-header{ 
    font-size: 20; 
    padding:2 2 2 2; 
    font-family: 黑体; 
    overflow: hidden 
} 
 
.datagrid-title-viewport{ 
    width:100%; 
    position: relative; 
    list-style: none; 
    overflow: hidden 
} 
 
.datagrid-title{ 
    left: 0; 
    border-bottom: 1px solid #999999; 
    border-top: 1px solid #eeeeee; 
                     
    position: relative; 
    overflow:hidden  
} 
 
.datagrid-title td{ 
    border-bottom: 1px solid #666666; 
    border-top: 1px solid #ffffff; 
    border-left: 1px solid  #ffffff; 
    border-right: 1px solid #666666; 
     
    font-size: 28; 
    text-align: center; 
    font-weight: bold; 
    cursor: pointer; 
    background-color: #999 
} 
 
.datagrid-title-cell{ 
    position: relative; 
    float:left; 
    /*padding: 0 5 0 5;*/ 
    cursor: pointer; 
    border-bottom: 1px solid #999999; 
    border-top: 1px solid #ffffff; 
    border-left: 1px solid  #ffffff; 
    border-right: 1px solid #999999; 
 
    background-color: #aaaaaa; 
    font-weight: bold; 
    font-size: 26; 
} 
 
.datagrid-body{ 
    overflow:auto; 
    border-bottom: 1px solid #999999 
} 
 
.datagrid-body td{ 
 
    border-bottom: 1px solid #666666; 
    border-top: 1px solid #ffffff; 
    border-left: 1px solid  #ffffff; 
    border-right: 1px solid #666666; 
   
    font-size: 25; 
} 
 
.datagrid-body-row-0{ 
    background: #111 
} 
 
.datagrid-body-row-1{ 
    background: #223 
} 
 
.datagrid-body-cell{ 
     
} 
 
.datagrid-footer{ 
    font-size: 30; 
    font-family: 黑体 
} 

摘自 DS的专栏