A jQuery data table plug-in that can bind data sources

A jQuery data table plug-in that can bind data sources_jquery

WBOY

Release： 2016-05-16 18:22:57

Original

1243 people have browsed it

Fixed table header
Column width can be adjusted
Click the column header to sort
Double-click the cell to edit
Can bind data source

Look at the effect:
HTML - Template code:

Copy code The code is as follows:

 
< td editable='true'> 
{Gender} 

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

jsascript code:

Copy code The code is as follows:

 
//Test data
var dataJsonStr='{tablename:"",rows:[{"Name":"Cao 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":"Da Qiao","Gender":"Female","Age":"30","Address":"Jiangdong"},{ "Name": "Xiao Qiao", "Gender": "Female", "Age": "28", "Address": "Jiangdong"}, {"Name": "Cao 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":"Da Qiao","Gender": "Female", "Age": "30", "Address": "Jiangdong"}, {"Name": "Xiao Qiao", "Gender": "Female", "Age": "28", "Address" :"江东"}]}'; 
//Clear data
$('#test').DataGridClear(); 
//Set row style
$('#test') .DataGridSetItemClass("tr1","tr2","trhover"); 
//Bind data and set the width and height
$('#test').DataGrid("100%",200,dataJsonStr ; 🎜>

Copy code

A jQuery data table plug-in that can bind data sources_jquery

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('.TableHeadArea '); 
TableBody.data('TableBodyArea',TableBodyArea); 
TableBody.data('TableHeadArea',TableHeadArea); 


The red highlighted TableBody in the above generation is the table The main body, TableHead is the table header
2. Create the table header




Copy the code

The code is as follows:

TableBody.find('.header').clone().prependTo(TableHead); TableBody is actually the HTML template Table, which moves the .header rows to the header table As the table header. 3. Create the table body To create the table body, it actually creates each row based on the data source and template loop. The Repeater mentioned in the previous article is used to create it. For details, please see Using javascript Implement Repeater. 4. Deal with the problem of horizontal scroll bars when there are too many columns

Copy code

The code is as follows:

TableBodyArea.scroll(function (){ var ml=0-parseInt(TableBodyArea.attr('scrollLeft')); TableHead.css('margin-left',ml); });
TableBodyArea is a Div wrapped around TableBody
5. How to implement cell editing
Dynamically insert a file in td when double-clicking td. This box is to give the innerHTML of td to the text box, when the text focus is lost. , assign the text box value to the innerHTML of td, and the code to remove the text box is as follows:

Copy the code 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().focus().focus().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 allow me to break it down next time! !
Source code download: /201007/yuanma/DataGrid.rar
Author: houfeng
Source: http://houfeng.cnblogs.com