データをバインドできる jQuery データテーブルプラグイン

データをバインドできる jQuery データテーブルプラグイン_jquery

WBOY

リリース： 2016-05-16 18:22:57

オリジナル

1214 人が閲覧しました

固定テーブルヘッダー
列幅を調整できます
列ヘッダーをクリックして並べ替えます
編集するセルをダブルクリックします
データソースをバインドできます

効果を見てください:
HTML - テンプレートコード:

コードをコピーコードは次のとおりです:

 
{年齢} 
 ;/td> 
 名前
 /td> 
 
性別
 sort='true' > 
年齢
 
住所
 
{名前} 
  
{性別} 
  
{アドレス} 
 
jsascript コード: 

コードをコピー

コードは次のとおりです:

//テストデータvar dataJsonStr='{tablename:"",rows:[{"名前":"曹操","性別":"男性","年齢":"51","住所": "許昌"},{"名前":"諸葛亮","性別":"男性","年齢":"40","住所":"南陽"},{"名前":"周瑜", "性別":"男性","年齢":"40","住所":"江東"},{"名前":"大喬","性別":"女性","年齢":"30" ,"住所":"江東"},{ "名前": "小喬", "性別": "女性", "年齢": "28", "住所": "江東"}, {"名前": "曹操", "性別": "男性" ,"年齢":"51","住所":"許昌"},{"名前":"諸葛孔明","性別":"男性","年齢":"40","住所":"南陽" },{"名前":"周瑜","性別":"男性","年齢":"40","住所":"江東"}, {"名前":"大喬","性別": "女性"、"年齢": "30"、"住所": "江東"}, {"名前": "小喬"、"性別": "女性", "年齢": "28", "住所" :"江东"}]}'; //データをクリア$('#test').DataGridClear(); //行スタイルを設定$('#test') .DataGridSetItemClass("tr1","tr2","trhover");

//データをバインドし、幅と高さを設定します

$('#test ').DataGrid("100%",200,dataJsonStr ; 🎜>

コードをコピー

 コードは次のとおりです:

TableBody.addClass('TableBody');

TableBody.wrap( "

"); =$('#' MyTableId);
TableBody.data(' MyTable',MyTable);
TableBody.before("

"); 🎜>var TableHead=MyTable.find(".TableHead"); データをバインドできる jQuery データテーブルプラグイン_jquery

TableBody.data('TableHead',TableHead);
TableBody.wrap('

');
TableHead.wrap("

");
var TableBodyArea=MyTable.find('. TableBodyArea');

var TableHeadArea=MyTableHeadArea '); TableBody.data('TableBodyArea',TableHeadArea); > 上記の生成で赤く強調表示されている TableBody がテーブル本体、TableHead がテーブルヘッダーです2. テーブルヘッダーを作成します

コードをコピーします

 コードは次のとおりです。

TableBody.find('.header').clone().prependTo(TableHead); 
 
TableBody は実際には HTML テンプレート Table であり、.header 行をテーブルヘッダーとしてヘッダーテーブルに移動します。 
3. テーブル本体を作成します 
 テーブル本体を作成するには、実際に作成します。データ ソースとテンプレート ループに基づいて各行を作成します。詳細については、「JavaScript を使用してリピーターを実装する」を参照してください。
4. 水平スクロール バーの問題を解決します。列が多すぎます

コードをコピーします

コードは次のとおりです。 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