实战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 = {
        /**
       &n

补充：web前端 , JavaScript ,