Practical jquery (1)-self-built datagrid, with diagrams, truth, and source code

The compatibility of css in different browsers is a headache. First-mover Diagram
 
 
 
The basic idea is as follows:
 
1. The datagrid is enclosed in a large div, which contains the header, title, body, and footer departments. Each part is a div.
 
2. The title and content contain a table with the same col. Use the scroll function of the body to scroll the div of the title department to make the header and content look like a whole.
 
3. Set the image background to achieve the effect, but css does not support stretching. It is annoying to implement the image for each height.
 
Constructor:
 
 
/**
* DataGrid Class.
* @ Param setting table configuration, including Header title and column configuration, which can be further expanded
* @ Param id: ID of the table, ID in the dom;
* @ Param owner refers to the parent container of the table.
*
*/
$. DS. UI. DataGrid = function (setting, id, owner)
The table construction process is as follows:
 
 
DataGrid = new $. DS. UI. DataGrid ({
HeaderTitle: "borrowing book list ",
Columns :[
{Title: "book name", field: "bookname", width: 350 },
{Title: "Publication No.", field: "bookid", width: 250 },
{Title: "borrow date", field: "date", width: 200 },
{Title: "days overdue", field: "days", width: 430 },
{Title: "overdue charges", field: "Overdue", width: 430}
]}, "Gd_booklist", "# booklist ");

DataGrid. setJSONData ([
{Bookname: "", bookid: "KJ0001", date: "2011-10-10", days: "5", Expiration: "0 "},
{Bookname: "(1)", bookid: "KJ0002", date: "2011-10-10", days: "5", Expiration: "0 "},
{Bookname: "(2)", bookid: "KJ0002", date: "2011-10-10", days: "5", Expiration: "0 "},
{Bookname: "(3)", bookid: "KJ0002", date: "2011-10-10", days: "5", Expiration: "0 "},
{Bookname: "(4)", bookid: "KJ0002", date: "2011-10-10", days: "5", Expiration: "0 "},
{Bookname: "(5)", bookid: "KJ0002", date: "2011-10-10", days: "5", Expiration: "0 "}
]);
The complete code and css are as follows:
 
Js Code:
 
 
(Function ($ ){
If (! $. DS) $. DS = {};
If (! $. DS. UI) $. DS. UI = {};

$. DS. UI. defaultdatagridatagrietting = {

};

$. DS. UI. allDataGrid = {};

/**
* DataGrid Class.
* @ Param setting table configuration, including Header title and column configuration, which can be further expanded
* @ Param id: ID of the table, ID in the dom;
* @ Param owner refers to the parent container of the table.
*
*/
$. DS. UI. DataGrid = function (setting, id, owner ){
This. id = id;
If (! Id) id = "_ dg _" + Math. random ();

This. setting = $. extend ($. DS. UI. defaultdatagridatagridsetting, 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 Section
 
 
@ 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: simhei
}

From the column of DS