You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
235 lines
11 KiB
235 lines
11 KiB
/** |
|
* jquery.fixFormTable.js |
|
* |
|
* |
|
* TagFilter.java 에 문서생성시 garbage 요소 제거하는 removeGarbageElements() 메서드 추가해뒀으니, 이 스크립트는 최소한으로만 사용할 것. |
|
* |
|
* |
|
* @version 1.0 |
|
* @author youngjun cho |
|
* @description 사용자가 입력하는 서식테이블의 레이아웃을 정돈한다. |
|
* @date 2014.10.01 |
|
* |
|
* 엑셀이나 한글에서 표를 복사하여 에디터에 붙여넣은 뒤 저장하게 되면, table 내에 garbage 요소들이 존재한다. |
|
* java 에서 붙여넣은 테이블을 DB에 저장하기 전에 필요없는 요소들을 제거하는 방법이 최선이긴 하지만, |
|
* 고치기가 쉽지않아 jquery 로 테이블의 레이아웃을 정리하는 후처리 방식으로 진행해본다. |
|
* 페이지 로드가 완료되었을때("$(document).ready(...)") 호출하는 것을 기준으로 한다. |
|
* |
|
* 잘 맹글었는건지는 모르겠는데... 잘 실행되길... |
|
* |
|
* 전제조건 |
|
* - 호출하는 파일에 jquery core library 가 반드시 삽입되어 있어야 한다. |
|
* |
|
* 사용 예 |
|
* $(document).ready(function() { |
|
* $.fixRegistFormTable( $("#formDiv").find("table"), {}); |
|
* |
|
* OR |
|
* |
|
* $.fixRegistFormTable( $("form[name='dform']").find("table"), {}); |
|
* }); |
|
*/ |
|
|
|
|
|
"use strict"; |
|
|
|
(function ($) { |
|
|
|
$.fixFormTable = { |
|
defaults : { |
|
/** |
|
* fixFormTable 옵션 |
|
*/ |
|
useFix : true // true : 테이블표 정돈 사용 , false : 테이블표 정돈 사용안함 (false 로 변경할 경우 소스내에 fixFormTable 의 함수를 호출해도 실행되지 않는다.) |
|
, indicator : true // true : indicator 사용 , false : indicator 미사용 |
|
, debug : false // true : console.log 로 debug 메세지 출력, false : debug 메세지 출력 안함. |
|
, indicatorObj : "#ajax_indicator_fix_table" // indicator's DOM. |
|
, indicatorBackgroundColor : "transparent" // indicator 배경색 : transparent, #000000, #FFFFFF, ... |
|
, indicatorBackgroundZIndex : 1000 // indicator 배경 z-index |
|
, indicatorBackgroundOpacity : 1.0 // indicator 배경 opacity |
|
, indicatorWidth : "230px" // indicator 전경 width |
|
, indicatorHeight : "32px" // indicator 전경 height |
|
, indicatorTop : "50%" // indicator 전경 top |
|
, indicatorLeft : "50%" // indicator 전경 left |
|
, indicatorMargin : "-16px 0 0 -115px" // indicator 전경 margin |
|
, indicatorPadding : "10px 0 10px 0" // indicator 전경 padding |
|
, indicatorZindex : 1001 // indicator 전경 z-index |
|
, indicatorImageUrl : "/totsys/common/js/img/ajax-loader1.gif" // indicator 전경 이미지 |
|
, indicatorColor : "#000000" // indicator 전경 배경색 transparent, #000000, #FFFFFF, ... |
|
, indicatorOpacity : 0.5 // indicator 전경 opacity |
|
, indicatorFontColor : "#FFFFFF" // indicator 전경 폰트색상 |
|
, indicatorFontWeight : "bold" // indicator 전경 폰트스타일 |
|
, indicatorFontFamily : "dotum" // indicator 전경 폰트종류 |
|
, indicatorFontSize : "13px" // indicator 전경 폰트크기 |
|
, indicatorText : "서식표를 정리 중입니다..." // indicator 전경 텍스트 |
|
}, |
|
checkIndicator : function() { |
|
/** |
|
* indicator element 가 존재하는지 체크. |
|
*/ |
|
var isExistIndicator = false; |
|
try { |
|
if($.fixFormTable.defaults.indicator === true) { |
|
isExistIndicator = $("#ajax_indicator_fix_table").length > 0 ? true : false; |
|
} |
|
} catch(e) { |
|
$.fixFormTable._log("checkIndicator",e); |
|
} |
|
return isExistIndicator; |
|
}, |
|
showIndicator : function() { |
|
/** |
|
* indicator element 를 body 에 추가하고, show. |
|
*/ |
|
try { |
|
if($.fixFormTable.defaults.indicator === true) { |
|
if ($.fixFormTable.checkIndicator() === false) { |
|
var ajaxIndicatorHtml = ""; |
|
ajaxIndicatorHtml = ajaxIndicatorHtml + "<div id='"+$.fixFormTable.defaults.indicatorObj.replace("#","")+"' style='display: none; position: absolute; z-index: "+$.fixFormTable.defaults.indicatorBackgroundZIndex+"; top: 0; left: 0; width: 100%; height: 100%; background-color: "+$.fixFormTable.defaults.indicatorBackgroundColor+"; opacity: "+$.fixFormTable.defaults.indicatorBackgroundOpacity+"; filter:Alpha(opacity="+($.fixFormTable.defaults.indicatorBackgroundOpacity * 100)+");'>"; |
|
ajaxIndicatorHtml = ajaxIndicatorHtml + " <div style='position: absolute; display: inline-block; width: "+$.fixFormTable.defaults.indicatorWidth+"; height: "+$.fixFormTable.defaults.indicatorHeight+"; top: "+$.fixFormTable.defaults.indicatorTop+"; left: "+$.fixFormTable.defaults.indicatorLeft+"; margin: "+$.fixFormTable.defaults.indicatorMargin+"; padding: "+$.fixFormTable.defaults.indicatorPadding+"; text-align: center; z-index: "+$.fixFormTable.defaults.indicatorZindex+"; background-color: "+$.fixFormTable.defaults.indicatorColor+"; opacity: "+$.fixFormTable.defaults.indicatorOpacity+"; filter:Alpha(opacity="+($.fixFormTable.defaults.indicatorOpacity * 100)+"); color: "+$.fixFormTable.defaults.indicatorFontColor+"; font-weight: "+$.fixFormTable.defaults.indicatorFontWeight+"; font-family: "+$.fixFormTable.defaults.indicatorFontFamily+"; font-size: "+$.fixFormTable.defaults.indicatorFontSize+";'>"; |
|
ajaxIndicatorHtml = ajaxIndicatorHtml + " <img src='"+$.fixFormTable.defaults.indicatorImageUrl+"'> "+$.fixFormTable.defaults.indicatorText+""; |
|
ajaxIndicatorHtml = ajaxIndicatorHtml + " </div>"; |
|
ajaxIndicatorHtml = ajaxIndicatorHtml + "</div>"; |
|
|
|
$("body").append(ajaxIndicatorHtml); |
|
$($.fixFormTable.defaults.indicatorObj).show(); |
|
} else { |
|
$($.fixFormTable.defaults.indicatorObj).show(); |
|
} |
|
} |
|
} catch(e) { |
|
$.fixFormTable._log("showIndicator",e); |
|
} |
|
}, |
|
hideIndicator : function() { |
|
/** |
|
* indicator element 를 hide. |
|
*/ |
|
try { |
|
//$($.fixFormTable.defaults.indicatorObj).hide(); |
|
$($.fixFormTable.defaults.indicatorObj).fadeOut(); |
|
} catch(e) { |
|
$.fixFormTable._log("hideIndicator",e); |
|
} |
|
}, |
|
_log : function(_position, _msg) { |
|
/** |
|
* console.log 출력 함수. |
|
*/ |
|
try { |
|
if ($.fixFormTable.defaults.debug === true) { |
|
var logMsg = "====> [:: jquery.fixFormTable.js ::] " + _position + ", " + _msg; |
|
|
|
if (typeof console == "object") { |
|
console.log(logMsg); |
|
} else { |
|
alert(logMsg); // console.log 를 지원하지 않는 브라우저 (IE8 이하) |
|
} |
|
} |
|
} catch(e) {} |
|
} |
|
}; |
|
|
|
/** |
|
* 등록/수정 페이지에서 서식테이블 정리에 사용. |
|
* opts(options) 은 파라미터로 받을 수 있게 선언만 해둠. |
|
* @param {type} targetObj |
|
* @param {type} opts |
|
* @returns {undefined} |
|
*/ |
|
$.fixRegistFormTable = function (targetObj, opts) { |
|
if ($.fixFormTable.defaults.useFix === true) { |
|
try { |
|
$.fixFormTable.showIndicator(); // indicator 실행. |
|
|
|
/** |
|
* input element 다음(next)에 오는 garbage element 를 삭제(remove)한다. |
|
* 단, input, a, img 는 제외(not)한다. |
|
* |
|
* - loop 로 탐색하는 방법 |
|
* $.each(tableObj.find("input").next().not("input,a,img"), function() { |
|
* $(this).remove(); |
|
* }); |
|
* |
|
*/ |
|
targetObj.find("input").next().not("input,a,img").hide(); |
|
|
|
/** |
|
* input element 바로 앞(prev)에 a 태그로 감싸진 달력 버튼(img) 가 있다면, input 의 width 를 100% 에서 70% 로 변경한다. |
|
* input 의 width 가 100% 로 되어있어서, td 내에서 개행이 발생한다. |
|
* |
|
* - loop 로 탐색하는 방법 |
|
* $.each(tableObj, function() { |
|
* if ($(this).find("input").prev("a").find("img").length > 0) { |
|
* $(this).find("input").css("width","70%"); |
|
* } |
|
* }); |
|
* |
|
*/ |
|
targetObj.find("td a img").parent().next("input").css("width","70%"); |
|
|
|
/** |
|
* select 의 width 를 100% 로 변경하고, select 다음(next) 요소를 숨긴다. 단, input, a, img 은 제외(note) 한다. |
|
*/ |
|
targetObj.find("td center select").css({ |
|
"width":"100%", |
|
"text-align":"center" |
|
}).parent().next().not("input,a,img").hide(); |
|
} catch (e) { |
|
$.fixFormTable._log("fixRegistFormTable",e); |
|
} finally { |
|
$.fixFormTable.hideIndicator(); // indicator 종료. |
|
} |
|
} |
|
}; |
|
|
|
/** |
|
* 태그 하위 자식태그들에서 '<?xml:namespace prefix = "o" ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>' 를 찾아서 제거한다. |
|
* @param {type} targetObj |
|
* @param {type} opts |
|
* @returns {undefined} |
|
*/ |
|
$.fixViewFormTableForXMLNameSpace = function (targetObj, opts) { |
|
if ($.fixFormTable.defaults.useFix === true) { |
|
try { |
|
$.fixFormTable.showIndicator(); // indicator 실행. |
|
|
|
$.each(targetObj, function() { |
|
if ($(this).html().indexOf("xml:namespace") > -1) { |
|
// xml:namespace 문자열이 있다면 제거한다. |
|
$(this).hide(); //$(this).remove(); |
|
} |
|
}); |
|
} catch(e) { |
|
$.fixFormTable._log("fixViewFormTableForXMLNameSpace",e); |
|
} finally { |
|
$.fixFormTable.hideIndicator(); |
|
} |
|
} |
|
}; |
|
|
|
/** |
|
* td 태그 하위 자식태그들에서 '<P class=0 style="mso-pagination: none; mso-padding-alt: 0pt 0pt 0pt 0pt"></P>' 를 찾아서 제거한다. |
|
* @param {type} targetObj |
|
* @param {type} opts |
|
* @returns {undefined} |
|
*/ |
|
$.fixViewFormTable_PTag = function (targetObj, opts) { |
|
if ($.fixFormTable.defaults.useFix === true) { |
|
try { |
|
$.fixFormTable.showIndicator(); // indicator 실행. |
|
|
|
$.each(targetObj.next("p"), function() { |
|
if ($(this).html() === "") { |
|
// p 태그의 내용이 없으면 remove. |
|
$(this).hide(); //$(this).remove(); |
|
} |
|
}); |
|
} catch(e) { |
|
$.fixFormTable._log("fixViewFormTable_PTag",e); |
|
} finally { |
|
$.fixFormTable.hideIndicator(); |
|
} |
|
} |
|
}; |
|
})(jQuery);
|
|
|