jquery(라이트 버전)_jquery를 기반으로 테이블의 동일한 셀을 병합하기 위한 플러그인

效果如下

原表格:

col0	col1	col2	col3
SuZhou	11111	22222	SuZhouCity
SuZhou	33333	44444	SuZhouCity
SuZhou	55555	66666	SuZhouCity
ShangHai	77777	88888	ShangHaiCity
ShangHai	uuuuu	hhhhh	ShangHaiCity
ShangHai	ggggg	ccccc	ShangHaiCity
GuangZhou	ttttt	eeeee	GuangZhouCity
GuangZhou	ppppp	qqqqq	GuangZhouCity

处理之后的样子:

col0	col1	col2	col3
SuZhou	11111	22222	SuZhouCity
	33333	44444
	55555	66666
ShangHai	77777	88888	ShangHaiCity
	uuuuu	hhhhh
	ggggg	ccccc
GuangZhou	ttttt	eeeee	GuangZhouCity
	ppppp	qqqqq

效果出来, 看上去比较简单, 下面先看下页面

复主代码 代码如下:

머리>


















































테이블>

核心代码:

复主代码 代码如下:

// 这里写成了一个jquery插件式
$('#process').mergeCell({
// 目前只有cols这么一个配置项, 用数组表示列的索引,从0开ㅋㅋㅋ
// 然后根据指定列来处理(합并)상동内容单원格
cols: [0, 3]
});

下side看看这个小插件的完整代码:

复主代码 代码如下:

;(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)


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

•처리할 테이블 내용은 tbody부터 검색됩니다. 경우에는 보다 일반적인 해결 방법이 제공되어야 합니다. 🎜 >•for ( var i = cols.length - 1; cols[i] != undefine; i--)... 테이블 데이터의 양이 많고 처리되는 열이 많은 경우 여기에서 최적화하지 못하면 다음이 발생합니다. 브라우저 문제 스레드 차단 위험이 있으므로 setTimeout 사용을 고려해 볼 수 있습니다
• 개선할 가치가 있는 다른 부분도 많고, 많이 있어야 한다고 생각합니다

col0	col1	col2	col3
쑤저우	11111	22222	쑤저우시
쑤저우	33333	44444	쑤저우시
쑤저우	55555	66666	쑤저우시
상하이	77777	88888	상하이시
상하이	uuuuu	오오오오오	상하이시
상하이	ggggg	ccccc	상하이시
광저우	ttttt	아아아아	광저우시
광저우	ppppp	qqqqq	광저우시