A jQuery data table plug-in that can bind a data source _ jquery

This article implements a jQuery table plug-in jQuery. DataGrid. For more information, see. Fixed Header
Adjustable column width
Click the column header to sort
Double-click cells to edit
Data sources that can be bound

Let's see the effect:
HTML-template code:

The Code is as follows:

Name	Gender	Age	Address
{Name}	{Gender}	{Age}	{Address}

Jsascript code:

The Code is as follows:

// Test Data
Var dataJsonStr = '{tablename: "", rows: [{"name": "Cao", "gender": "male", "Age": "51 ", "Address": "xuchang" },{ "name": "Zhuge Liang", "gender": "male", "Age": "40", "Address ": "Nanyang" },{ "name": "Zhou Yu", "gender": "male", "Age": "40", "Address": "Jiangdong "}, {"name": "daqiao", "gender": "female", "Age": "30", "Address": "Jiangdong" },{ "name ": "Xiao Qiao", "gender": "female", "Age": "28", "Address": "Jiangdong" },{ "name": "Cao ", "gender": "male", "Age": "51", "Address": "xuchang" },{ "name": "Zhuge Liang", "gender ": "male", "Age": "40", "Address": "Nanyang" },{ "name": "Zhou Yu", "gender": "male ", "Age": "40", "Address": "Jiangdong" },{ "name": "daqiao", "gender": "female", "Age ": "30", "Address": "Jiangdong" },{ "name": "Xiaoqiao", "gender": "female", "Age": "28 ", "Address": "Jiangdong"}]} ';
// Clear data
$ ('# Test'). DataGridClear ();
// Set the row style
$ ('# Test'). Maid ("tr1", "tr2", "trhover ");
// Bind data and set the width and height
$ ('# Test'). DataGrid ("100%", 200, dataJsonStr );

Structure:

How to create the entire DataGrid structure based on the HTML template?
1. First, create a table header subject and other regions:

The Code is as follows:

TableBody. addClass ('tablebody ');
TableBody. wrap ("

");
Var MyTable =$ ('#' + MyTableId );
TableBody. data ('mytable', MyTable );
TableBody. before (" ");
Var TableHead = MyTable. find (". TableHead ");
TableBody. data ('tablehead', TableHead );
TableBody. wrap ('

');
TableHead. wrap ("

");
Var TableBodyArea = MyTable. find ('. TableBodyArea ');
Var TableHeadArea = MyTable. find ('. tableheadare ');
TableBody. data ('tablebodyregion', TableBodyArea );
TableBody. data ('tableheadare', TableHeadArea );

In the previous generation, red highlighted TableBody is the table body, And TableHead is the table header.
2. Create a header

The Code is as follows:

TableBody. find ('. head'). clone (). prependTo (TableHead );

TableBody is actually an HTML template Table, which moves the rows of. header to the header Table as the header.
3. Create a table subject
Creating a table subject is actually creating each row cyclically based on the data source and template. Here we use the Repeater mentioned in the previous article. For details, see implementing Repeater with javascript.
4. deal with the problem of horizontal scroll bars when there are too many columns

The Code is as follows:

TableBodyArea. scroll (function (){
Var ml = 0-parseInt (TableBodyArea. attr ('rollleft '));
TableHead.css ('margin-left', ml );
});

TableBodyArea is a Div wrapped outside TableBody.
5. How to edit Cells
Double-click td to dynamically insert a file in td. The text box is to assign the text box value to the innerHTML of td when the text focus is lost, the code for removing the text box is as follows:

The Code is as follows:

TableBody. find ('td '). live ('dblclick', function (){
Var td = $ (this );
If (td. attr ('editable') = 'true ')
{
Var text = td. text ();
Var html ="";
Td.html (html );
Td. addClass ("tdediting ");
//
$ (This). find ('. TdEditTextBox'). focus ();
$ (This). find ('. TdEditTextBox'). blur (function (){
Var val = $ (this). val ();
Td.html (val );
Td. removeClass ("tdediting ");
});
}
});

6. How to sort:
Due to time issues, please let me break it down next time !!
Download source code:/201007/yuanma/DataGrid.rar
Author: houfeng
Source: http://houfeng.cnblogs.com