헤더 수정(jquery를 사용한 구현 원칙 소개)_jquery

테이블 헤더 수정은 자주 사용하는 기능이어야 합니다. 인터넷에서 몇 가지 예를 참조했지만 일반적으로 사용되는 여러 브라우저에서는 표시가 완벽하지 않습니다. 게다가 고정된 테이블을 기반으로 하는 경우가 많아 코딩할 때 고정된 헤더를 작성해야 하기 때문에 컬럼 수를 알 수 없는 동적으로 생성된 테이블로 시작하기가 어렵습니다. 게다가 대부분의 예제는 높이 제한만 충족할 수 있으므로 너비가 제한되어 있으면 가로 스크롤 막대가 나타나도 도움이 되지 않습니다.

제 목적은 jquery-ui처럼 페이지에 존재하는 테이블을 찾아 헤더를 수정하는 기능을 구현하는 메서드를 호출하는 것입니다. jquery 플러그인 작성 방법을 배울 수 있는 기회를 활용하여 고정 헤더가 있는 플러그인을 작성했습니다.
사용 방법은 jquery-ui의 플러그인과 동일합니다. $('#table1').fixHeader({height:100})

다음 브라우저 테스트를 통과했습니다
IE7 IE8 firefox16.0 chrome22.0
현재 IE9에서는 다음을 정렬할 수 없는 것으로 알려져 있습니다. 현재 디버깅할 수 있는 IE9가 없습니다. 나중에 해결하기 위해.

참고:
1개의 jquery가 필요하며, 개발 및 테스트에는 jquery-1.8.2가 사용되며, 다른 버전은 작아야 합니다.
2 헤더 부분은
에 작성해야 합니다. 3 너비 제한 없이 테이블 너비에 자동으로 적응합니다. (스크롤 막대 너비가 20px라고 가정할 때 실제 너비는 테이블 너비 20px입니다.)
4 다중 너비 지원 줄 헤더 고정
5 일반적으로 테이블의 모든 열이 표시되며 가로 스크롤바는 없으며 세로 스크롤바 기능만 필요합니다. 이 플러그인은 제한된 너비 조건에서 테이블 헤더 수정을 지원합니다.
6 너비와 높이를 제한하는 조건으로 테이블 헤더를 고정할 경우 CSS만으로는 구현이 불가능하며 js로 구현해야 하며 약간의 깜박임이 발생합니다. 7 테이블, th 및 td의 테두리가 고려되었습니다. -width가 다른 값으로 설정되었습니다
8 헤더에 바인딩된 이벤트가 고려되었으며 원래 헤더에 바인딩된 이벤트는 계속 유지됩니다


특별한 주의: IE 브라우징 브라우저에서 테이블의 td와 th의 테두리 너비를 설정해야 합니다. 그렇지 않으면 열 너비를 올바르게 설정할 수 없으며 헤더와 데이터 부분도 잘못 정렬됩니다. 사용법:
높이 제한: $('#table1').fixHeader({height:100})
높이 및 너비 제한: $('#table3').fixHeader({ height:100,width:500});

전체 코드는 다음과 같습니다

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

/*!
* fixHeader 1.0.0
* Copyright 2012 chokobo
*
* 테이블 헤더를 고정
*
* 주의 사항: IE에서 th,id 테두리 너비 설정
*
* 테스트된 브라우저: IE7 IE8 firefox16.0 chrome22.0
*/
(function( $, undefine ) {

$.fn.fixHeader = function(options){
var defaults = {
너비: '',
높이: ''

};

options = $.extend({}, 기본값, 옵션); >var elem = this;

if(options.height == ''){
return this;
}

var thead = elem.find('thead') ;
var fixTable = elem.clone().empty().removeAttr('id')
//헤드 기본 배경색 설정
if(fixTable.css('Background-color') == '투명' || fixTable.css('배경색') == ''){
fixTable.css('배경색', '#fff')
}
fixTable .css({
'위치': '절대',
'top': '0px',
'border-bottom': $('tr:eq(0)', thead).find ('th:eq(0), td:eq(0)').css('테두리 하단 너비')
})


$('tr:eq( 0)', thead).find('th, td').each(function(){
var col = $(this);

if($.browser.mozilla){
col.width(col.width());
}
else if($.browser.chrome){
var colBorderWidth =parseInt(col.css('border-width'));
col.width(col.width() colBorderWidth);
}
else if($.browser.msie){
var colBorderWidth =parseInt(col.css('border-width'));
if(colBorderWidth){
col.width(col.width() colBorderWidth colBorderWidth/2);//IE7??
}
}
});

//헤드 만들기
var dummyHead = thead.clone();
thead.appendTo(fixTable);
dummyHead.prependTo(elem);


var tbodyWrapper = elem.wrap('

').parent();
var tableWrapper = tbodyWrapper.wrap('

').parent();
setTableWidth();
setWrapperSize();

fixTable.prependTo(tableWrapper);

이것을 돌려주세요;

function setTableWidth(){
if($.browser.mozilla){
elem.width(elem.width());
fixTable.css('너비',elem.css('너비'));
}
else if($.browser.chrome){
elem.width(elem.outerWidth());
fixTable.width(elem.outerWidth());
}
else if($.browser.msie){
elem.width(elem.outerWidth());
fixTable.width(elem.outerWidth());
}
else{
elem.width(elem.outerWidth());
fixTable.width(elem.outerWidth());
}
}
function setWrapperSize(){
var elemWidth = elem.outerWidth(true);
var elemHeight = elem.outerHeight(true);
var scrollBarWidth = 20;

if(options.width == ''){
tbodyWrapper.css({
'width': (elemWidth scrollBarWidth) 'px',
'height': options.height ,
'overflow-x': '숨김',
'overflow-y': '자동'
});
}
else{
if(elemWidth tbodyWrapper.css({
'width': options.width 'px',
'height ': options.height,
'overflow-x': 'hidden',
'overflow-y': 'auto'
});
}
else{
tableWrapper.css({
'width': options.width,
'height': options.height,
'overflow': 'auto'
});
tableWrapper.scroll(function(){
fixTable.css('top',tableWrapper.scrollTop() 'px');
});
}
}
}
};

})( jQuery );

复代码 代码如下:

/*
기능: 미터 헤더를 고정합니다.
컨테이너의 ID를 사용하여 $("#div").chromatable({width: "100%", height: "100%", scrolling: "yes"})
테이블에는 <가 포함되어야 합니다. ; thead>label
매개변수: 없음.
*/
(function($){
$.chromatable = {
기본값: {
width: "900px", //확장할 컨테이너 너비 설정
높이 : "300px", //확장할 컨테이너 높이 설정
scrolling: "yes" //yes IE 스크롤 막대를 사용하여 슬라이드, no는 페이지에 고정되고 컨테이너 스크롤 막대만 슬라이드
}
} ;
$.fn.chromatable = function(options){
var options = $.extend({}, $.chromatable.defaults, options)
return this.each(function () {
var $divObj = $(this);
var $tableObj = $divObj.find("table")
var $uniqueID = $tableObj.attr("ID") (" 래퍼" );
var $class = $tableObj.attr("class");
var $tableWidth = $tableObj.width();
var top = $("#" $tableObj.attr (" ID" )).offset().top;
var left = $("#" $tableObj.attr("ID")).offset().left
$divObj.append("< ;테이블 클래스= '" $class "' id='" $uniqueID "' 스타일='position:absolute;top:" 상단 "px;left:" 왼쪽 "px;' width='" $tableWidth "' border= '0 'cellspacing ='0' cellpadding='0'>" $("#" $tableObj.attr("ID")).find("thead").html() " thead> ");

$.each($("#" $tableObj.attr("ID")).find("thead th"), function(i,item) {
$("#" $uniqueID).find("thead th").eq(i).width($(item).width())
$(item).width($( 항목) .width ())
});

if(options.scrolling === "yes")
{
scrollEvent($tableObj.attr("ID") , $ UniqueID) ;
}
resizeEvent($tableObj.attr("ID"), $uniqueID)
})

function scrollEvent(tableId, UniqueID)
{
var 요소 = $("#" UniqueID);
$(window).scroll(function(){
var top = $("#" tableId).offset().top;
var scrolls = $(this).scrollTop();

if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position : " 고정" ,
top: 0
})
} else {
element.css({
top: 스크롤
}); }else {
element.css({
위치: "절대",
상단: 상단
})

});

function resizeEvent(tableId, UniqueID)
{
var element = $("#" UniqueID)
$(window).resize(function(){
var top = $ (" #" tableId).offset().top;
var scrolls = $(this).scrollTop()
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
위치: "고정",
상위: 0
})
} else {
element.css({
상위: 스크롤
} );
}
}else {
element.css({
위치: "절대",
상단: 상단
})
});
}
})(jQuery);