초보자용 Jquery 플러그인 제작 : SageCRM_jquery의 쿼리 화면에서 일부 행을 숨기는 기능

해결 방법:
1. 사용자가 클릭할 수 있도록 제목에 [—][ ] 기호를 추가합니다.
2. 사용자의 화면 축소 및 확대 행위는 쿠키에 저장됩니다. 페이지가 다시 로드되거나 사용자가 시스템에 다시 로그인하더라도 사용자의 행동은 여전히 ​​기억될 수 있습니다.
　
장점: 1. Jquery 플러그인 형태로 되어 있어 확장이 용이하다. 구현하기 쉽습니다.
　2. 쿠키에 저장된 동작은 구현하기 쉽고 작업량을 줄이며 사용자가 수용할 수 있습니다. 데이터베이스에 저장하면 페이지 로드가 증가합니다.
단점: 각 페이지마다 별도의 동작을 사용할 수 없습니다. 즉, 모든 사용자의 축소 및 확장은 시스템에서 전역적으로 수행됩니다. 그리고 다른 컴퓨터에 로그인하거나 캐시를 지운 후에는 사용자의 작업을 기억할 수 없습니다.
　
먼저 js 함수를 이용하여 구현해 보세요. 그런 다음 Jquery 플러그인으로 변경합니다. 코드

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

/*
* TableToggle 0.1
* Copyright (c) 2011 Novus_lee http://www.cnblogs.com/novus
* 날짜: 2011-12-23
* 일부 행을 숨기는 기능 SageCRM 쿼리 화면
*/
(function($){
$.fn.TableToggle = function(options){
var defaults = {
plussrc : "/upload/201112/20111226224658296 .gif", //--[ ] 그림
minussrc : "/upload/201112/20111226224658809.gif",
line : 2
}
var options = $.extend(defaults, options );
var Flip = 0, i = 0;
this.each(function(){
var $thisTable = $(this);
var claName = "btntoggle" i;
// --테이블 위에 그림 버튼 추가
var $Title = $thisTable.parent().parent().parent().find("td.PANEREPEAT")
$Title.prepend ("< ;a href='javascript:void(0);' class='" claName "' style='cursor:pointer;padding-right:10px;'>");
var trlen = $thisTable.find("tr").length;
options.line = (options.line > trlen ? trlen : options.line)
$Title.find("a." claName).click(function () {
$thisTable.find("tr:gt(" options.line ")" ).toggle (뒤집기 );
if (뒤집기 % 2 == 0)
{
$Title.find("img[src*='smallplus']").attr("src", options.minussrc );
$.cookie(claName, "plus");
}
else
{
$Title.find("img[src*='smallminus']" ).attr ("src",options.plussrc);
$.cookie(claName, "smallminus");
}
}); "smallminus" || $.cookie(claName) == "" || $.cookie(claName) == null)
{
$("a." claName).click(); }
i ;
});
};
})(jQuery)


이 플러그인은 jquery Cookie 플러그인도 호출합니다.

메서드 호출:

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

효과는 아래와 같습니다.

축소:

확장:

PS: SageCRM은 IE7 및 IE8만 지원합니다. 따라서 여기 플러그인은 브라우저 호환성을 테스트하지 않습니다.