테이블의 동일한 셀을 병합하기 위한 jquery 플러그인 공유(매우 간소화됨)_jquery

// 这里写成了一个jquery의 형식
$('#process').mergeCell({
// 目前只有cols这么一个配置项, 从0开始
//根据指정기来处理(합并)상동内容单원格
열: [0, 3]
});

;(function($) {
// jquery 소스 코드를 살펴본 후 $.fn이 $.prototype임을 알 수 있습니다. jQuery는 이전 버전의 플러그와의 호환성을 위해서만 유지됩니다. -in
// 프로토타입의 형태
$.fn.mergeCell = function(options) {
return this.each(function() {
var cols = options.cols;
for ( var i = cols.length - 1; cols[i] != 정의되지 않음; i--) {
// 콘솔 디버깅 수정
// console.debug(cols[i])
mergeCell($(this), cols [i]);
}
dispose($(this))
})
}// 확실히 이해했다면 JavaScript의 클로저와 범위 개념 중 내부적으로 사용되는 Private 메소드 플러그인입니다
// 자세한 내용은 이전 에세이에서 소개한 책을 참조하세요
function mergeCell($table, colIndex) {
$table.data('col-content', ''); // 셀 내용 저장
$table.data('col-rowspan', 1) // 계산된 rowspan 값 저장, 기본값은 다음과 같습니다. 1
$table.data('col-td' , $()); // 이전 행과 다른 발견된 첫 번째 td(jQuery로 캡슐화됨)를 저장하고 기본값은 "빈" jquery 객체입니다.
$table.data('trNum', $( 'tbody tr', $table).length); //처리할 테이블의 총 행 수, 마지막 행이 특수 처리되는지 판단하는 데 사용됩니다.
//핵심은 데이터의 각 행을 "스캔"하는 것입니다. 이는 col-td와 해당 행 범위를 찾는 것입니다.
$('tbody tr', $table).each(function(index) {
// td:eq의 colIndex는 열 인덱스입니다.
var $td = $('td:eq(' colIndex ')', this)
// 셀의 현재 내용을 가져옵니다.
var currentContent = $td.html();
// 먼저 다음 번에 이 분기를 가져옵니다.
if ($table.data('col-content') == '') {
$ table.data('col-content', currentContent);
$table.data('col-td', $td);
} else {
// 이전 행의 내용은 다음과 같습니다. 현재 행
if ($table.data('col-content') == currentContent) {
// 이전 행의 내용이 현재 행과 동일하면 col-rowspan이 누적되고 새 값이 저장됩니다.
var rowspan = $table.data('col-rowspan') 1
$table.data(' col-rowspan', rowspan)// 주목할 가치가 있습니다. $td.remove()를 사용하면 다른 열의 처리에 영향을 미칩니다.
$td.hide()
// 마지막 줄의 상황은 조금 특별합니다
// 예를 들어 마지막 두 줄의 td 내용이 동일하다면 이때 col-td에 저장된 td는 마지막 줄의 rowspan으로 설정해야 합니다.
if ( index = = $table.data(' trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'))
} else { // 이전 행이 현재 행과 다릅니다
// col-rowspan의 기본값은 1입니다. 계산된 col-rowspan이 변경되지 않은 경우 처리되지 않습니다.
if ($table.data('col-rowspan' ) != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'))
}
// 저장 첫 번째 다른 콘텐츠가 포함된 td와 해당 콘텐츠가 나타나면 col-rowspan
$table.data('col-td', $td)
$table.data('col-content', $ td.html());
$table.data('col-rowspan', 1);
}
}
})
}
// 메모리 정리 함수
function dispose($table) {
$table.removeData();
}
})(jQuery)


주요 지침 코드는 비교적 간단하지만 개선이 필요한 부분이 있습니다