Fixed table header
Column width can be adjusted
Click the column headers to sort
Double-click a cell to edit
bindable Data source
Look at the effect of it:
HTML-Template code:
Copy Code code as follows:
<table id= "Test" >
<tr class= "Header" >
<TD style= "width:100px" sort= ' true ' >
Name
</td>
<TD style= "width:100px" sort= ' true ' >
Gender
</td>
<TD style= "width:100px" sort= ' true ' >
Age
</td>
<TD style= "width:200px" sort= ' true ' >
Address
</td>
</tr>
<tr class= "ItemTemplate" >
<td editable= ' true ' >
Name
</td>
<td editable= ' true ' >
Gender
</td>
<td editable= ' true ' >
Age
</td>
<td editable= ' true ' >
Address
</td>
</tr>
</table>
Jsascript Code:
Copy Code code 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 ":" Big Joe "," gender ":" Female "," Age ":" 30 "," Address ":" Jiangdong "},{" name ":" Little Joe "," gender ":" Female "," Age ":" 28 "," Address ":" Jiangdong "},{" name ":" Caocao "," 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 ":" Big Joe "," gender ":" Female "," Age ":" 30 "," Address ":" Jiangdong "},{" name ":" Little Joe "," gender ":" Female "," Age ":" 28 "," Address ":" Jiangdong "}]} ';
Emptying data
$ (' #test '). Datagridclear ();
Set Line Style
$ (' #test '). Datagridsetitemclass ("TR1", "TR2", "Trhover");
Bind data and set width height
$ (' #test '). DataGrid ("100%", 200,datajsonstr);
STRUCTURE schematic:
How do I create a DataGrid entire structure from an HTML template?
1. First create the areas of the header body, and so on:
Copy Code code as follows:
Tablebody.addclass (' tablebody ');
Tablebody.wrap ("<div id= '" +mytableid+ "' class= ' houfeng-table ' ></div>");
var mytable=$ (' # ' +mytableid);
Tablebody.data (' MyTable ', MyTable);
Tablebody.before ("<table class= ' Tablehead ' ></table>");
var tablehead=mytable.find (". Tablehead ");
Tablebody.data (' Tablehead ', tablehead);
Tablebody.wrap (' <div class= ' Tablebodyarea "></div>");
Tablehead.wrap ("<div class= ' Tableheadarea ' onselectstart= ' return false; ') ></div> ");
var tablebodyarea=mytable.find ('. Tablebodyarea ');
var tableheadarea=mytable.find ('. Tableheadarea ');
Tablebody.data (' Tablebodyarea ', tablebodyarea);
Tablebody.data (' Tableheadarea ', tableheadarea);
In the upper generation, the red highlight tablebody is the table body, Tablehead is the table header
2. Create a table header
Copy Code code as follows:
Tablebody.find ('. Header '). Clone (). Prependto (Tablehead);
Tablebody is actually an HTML template table that moves the rows of the. Header to the table Header table as the header.
3. Create a table body
Create a table body, in fact, according to the data source and the template loop to create each row, here with the Repeater mentioned in the previous article to create, in detail, see Using JavaScript to achieve Repeater.
4. Handle the problem of horizontal scroll bar when too many columns
Copy Code code as follows:
Tablebodyarea.scroll (function () {
var ml=0-parseint (tablebodyarea.attr (' scrollleft '));
Tablehead.css (' margin-left ', ml);
});
Tablebodyarea is a div wrapped in tablebody outside
5. How to implement cell editing
When you double-click TD, dynamically insert a file in TD this box for the TD innerHTML to the text box, when the text focus is lost, the text box value to TD's innerHTML, will remove the text box code as follows:
Copy Code code as follows:
Tablebody.find (' TD '). Live (' DblClick ', function () {
var td=$ (this);
if (td.attr (' editable ') = = ' true ')
{
var text=td.text ();
var html= "<input type= ' text ' class= ' tdedittextbox ' value= '" +$.trim (text) + "'/>";
td.html (HTML);
Td.addclass ("tdediting");
//
$ (this). Find ('. Tdedittextbox '). focus (), focus (), focus (), focus ();
$ (this). Find ('. Tdedittextbox '). blur (function () {
var val=$ (this). Val ();
Td.html (Val);
Td.removeclass ("tdediting");
});
}
});
6. How to sort:
By the time question please let me let's!!
SOURCE Download:/201007/yuanma/datagrid.rar
Author: Houfeng
Source: http://houfeng.cnblogs.com
