데이터 소스를 바인딩할 수 있는 jQuery 데이터 테이블 플러그인-JS 튜토리얼-php.cn

데이터 소스를 바인딩할 수 있는 jQuery 데이터 테이블 플러그인

WBOY

풀어 주다： 2016-05-16 18:22:57

원래의

1182명이 탐색했습니다.

고정 테이블 헤더
열 너비 조정 가능
정렬하려면 열 헤더 클릭
수정하려면 셀을 두 번 클릭하세요
데이터 소스 바인딩 가능

효과 살펴보기:
HTML - 템플릿 코드:

코드 복사 코드는 다음과 같습니다.

/td>	성별	연령	td>
	{성별}		{주소}

jsascript 코드:

코드 복사

코드는 다음과 같습니다.

//데이터 테스트

var dataJsonStr='{tablename:"",rows:[{"이름":"Cao Cao","Gender":"남성","Age":"51","Address": "Xuchang"},{"이름" :"Zhuge Liang","성별":"남성","Age":"40","주소":"Nanyang"},{"이름":"Zhou Yu", "성별":"남성","나이":"40","주소":"Jiangdong"},{"이름":"Da Qiao","성별":"여성","나이":"30" ,"주소":"Jiangdong"},{ "이름": "Xiao Qiao", "성별": "여성", "Age": "28", "주소": "Jiangdong"}, {"이름": "조조", "성별": "남성" ,"나이":"51","주소":"쉬창"},{"이름":"제갈량","성별":"남성","나이 ":"40","주소":"난양" },{"이름":"Zhou Yu","성별":"남성","나이":"40","주소":"Jiangdong"}, {"이름":"Da Qiao","성별": "여성", "나이": "30", "주소": "Jiangdong"}, {"이름": "Xiao Qiao", "성별": " 여성", "나이": "28", "주소" :"江东"}]}'; //데이터 지우기$('#test').DataGridClear(); // 행 스타일 설정$('#test') .DataGridSetItemClass("tr1","tr2","trhover") //데이터 바인딩 및 너비와 높이 설정$('#test ').DataGrid("100%",200,dataJsonStr ; 🎜>

코드 복사


 코드는 다음과 같습니다.


TableBody.addClass('TableBody'); 
TableBody.wrap( "
") 
var MyTable =$('#' MyTableId); 

TableBody.data(' MyTable',MyTable)
TableBody.before("

"); 🎜>var TableHead=MyTable.find(".TableHead");
TableBody.data('TableHead',TableHead) 데이터 소스를 바인딩할 수 있는 jQuery 데이터 테이블 플러그인

TableBody.wrap('

')
TableHead.wrap("

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

TableBody.data('TableBodyArea',TableBodyArea); TableHeadArea', 위 세대에서 빨간색으로 강조표시된 TableBody는 테이블입니다. 본체, TableHead는 테이블 헤더입니다2. 테이블 헤더를 생성합니다

코드 복사

 코드는 다음과 같습니다.

TableBody.find('.header').clone().prependTo(TableHead); 
 
TableBody는 실제로 .header 행을 테이블 헤더로 이동하는 HTML 템플릿입니다. 
3. 테이블 본문 만들기 
 테이블 본문을 만들기 위해 실제로 만듭니다. 각 행은 데이터 소스와 템플릿 루프를 기반으로 생성됩니다. 자세한 내용은 javascript Repeater 구현 
4. 열이 너무 많습니다

코드 복사

코드는 다음과 같습니다. TableBodyArea.scroll(function ( ){ var ml=0-parseInt(TableBodyArea.attr('scrollLeft'))

TableHead.css('margin-left',ml)

TableBodyArea는 TableBody를 감싸는 Div입니다.
5. 셀 편집 구현 방법
td를 더블클릭하면 td에 파일을 동적으로 삽입합니다. 텍스트 포커스가 손실되면 텍스트 상자 값을 td의 innerHTML에 할당하고 텍스트 상자를 제거하는 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

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. 정렬 방법:
시간 문제로 인해 다음번에 분해하도록 해주세요! !
소스 코드 다운로드:
/201007/yuanma/DataGrid.rar작성자: houfeng
출처: http://houfeng.cnblogs.com