용테크
[Javascript] 댓글기능 구현하기 본문
포탈 개발중 댓글기능이 필요하다는 요구사항에따라 화면내 댓글기능 개발..
이미 어느정도 화면이 개발된 후 댓글기능이 추가되는 상황이라 별도의 HTML 파일을 사용하지않고 js 소스 안에 html5 문법을 작성하여 JQuery로 붙여넣는 방식을 사용하였다.
댓글의 입력 혹은 삭제시 댓글 입력 양식의 height값이 총 댓글의 개수에 따라 정해진다.
Table 구조는 REPLYID,SEQ가 PK이며, SEQ가 0이면 부모 댓글(최상위 댓글), 아니면 자식 댓글(대댓글)로 구분한다.
댓글 기능(댓글 등록, 수정, 삭제, 대댓글)
function initComment() {
var commentEmpty = $('div[ux-name="commentEmpty"]');
var comment = $this.findName('comment');
var userinfo;
$ux.data.query({
id: 'BMP_IDEA_VIEW.GET.COMMENT',
version: '00001',
parameter: {
IDEAID: IDEAID
},
reply: function(e) {
commentEmpty.html('');
var data = e.result;
for (var i = 0; i < data.length; i++) {
var user = data[i].DEPARTMENT + ' ) ' + data[i].USERNAME;
var content = data[i].CONTENT;
var time = data[i].CREATEDTIME;
var rid = data[i].REPLYID;
var seq = data[i].SEQ;
var isme;
if (data[i].USERID == $ux.user.id()) {
isme = 'Y';
} else {
isme = 'N';
}
if (data[i].SEQ == 0) {
commentEmpty.append(makeCommentTable(user, content, time, rid, isme));
} else {
commentEmpty.append(makeReReplytable(user, rid, content, time, isme, seq));
}
}
//totalCommentLabel.tool().setValue('전체 댓글 ' + $('div[ux-name="commentEmpty"] table').length + ' 건');
if (replyCount())
totalCommentLabel.tool().setValue('ㅤㅤ전체 댓글 ' + replyCount() + ' 건');
else
totalCommentLabel.tool().setValue('ㅤㅤ전체 댓글 0 건');
/*댓글 기능*/
$('button[btnType="reply"]').click(function(e) {
var parentTable = this.parentElement.parentElement.parentElement.parentElement;
var rid = parentTable.id.split('replyIdNo')[1];
$(parentTable).after(makeReReply(user, rid));
var length = $('div[ux-name="commentEmpty"] table').length;
var top = 60 * length + 855;
var orignTop = replyEmpty.tool().setTopPositionValue(top + 'px');
//대댓글달기 취소
$('button[btnType="reCancle"]').click(function(er) {
this.parentElement.parentElement.parentElement.parentElement.remove();
var length = $('div[ux-name="commentEmpty"] table').length;
var top = 60 * length + 855;
var orignTop = replyEmpty.tool().setTopPositionValue(top + 'px');
});
//대댓글 등록하기
$('button[btnType="reCommit"]').click(function(er) {
var rid = this.parentElement.parentElement.parentElement.parentElement.id.split('replyIdNo')[1];
var content = $('#commentCommit')[0].value;
$ux.cjMessage.confirm('댓글을 등록하시겠습니까?', null, function() {
$ux.request({
name: 'BmpIdeaSaveReComment',
value: {
REPLYID: rid,
CONTENT: content,
IDEAID: IDEAID
},
reply: function(e) {
initComment();
}
});
});
});
});
//댓글 수정하기
$('button[btnType="edit"]').click(function(err) {
var ta = this.parentElement.parentElement.querySelector('textarea');
var editBtn = this.parentElement.parentElement.querySelector('button[btnType="edit"]');
var cancleBtn = this.parentElement.parentElement.querySelector('button[btnType="reply"]');
var editBtnHidden = this.parentElement.parentElement.querySelector('button[btnType="editHidden"]');
var cancleBtnHidden = this.parentElement.parentElement.querySelector('button[btnType="replyHidden"]');
var delBtn = this.parentElement.parentElement.querySelector('button[btnType="del"]');
$(ta).addClass('bmp-idea-view-rere-textarea');
$(ta).removeClass('bmp-idea-view-common-textarea');
ta.readOnly = false;
$(delBtn.parentElement).hide();
$(editBtn.parentElement).hide();
$(cancleBtn.parentElement).hide();
//$(editBtnHidden).show();
//$(cancleBtnHidden).show();
$(editBtnHidden.parentElement).css('display', 'table-cell');
$(cancleBtnHidden.parentElement).css('display', 'table-cell');
$('button[btnType="replyHidden"]').click(function(errr) {
initComment();
});
$('button[btnType="editHidden"]').click(function(errr) {
var rid = this.parentElement.parentElement.parentElement.parentElement.id.split('replyIdNo')[1];
var content = $('#commonTextareaNo' + rid)[0].value;
$ux.cjMessage.confirm('수정하시겠습니까?', null, function() {
$ux.request({
name: 'BmpIdeaEditComment',
value: {
REPLYID: rid,
CONTENT: content,
IDEAID: IDEAID
},
reply: function(e) {
initComment();
}
});
});
});
});
//댓글 삭제하기
$('button[btnType="del"]').click(function(e) {
var rid = this.parentElement.parentElement.parentElement.parentElement.id.split('replyIdNo')[1];
var content = this.parentElement.parentElement.querySelector('textarea').value;
//var seq = this.parentElement.parentElement.querySelector('td#reSeq').innerText;
$ux.cjMessage.confirm('삭제하시겠습니까?', null, function() {
$ux.data.query({
id: 'BMP_IDEA_VIEW.REPLY.DELETE',
version: '00001',
parameter: {
IDEAID: IDEAID,
REPLYID: rid
},
reply: function(e) {
$ux.messageBox('삭제되었습니다.', '');
initComment();
}
});
});
});
//대댓글 수정하기
$('button[btnType="rereEdit"]').click(function(e) {
var ta = this.parentElement.parentElement.querySelector('textarea');
var editBtn = this.parentElement.parentElement.querySelector('button[btnType="rereEdit"]');
var delBtn = this.parentElement.parentElement.querySelector('button[btnType="rereDel"]');
var editBtnHidden = this.parentElement.parentElement.querySelector('button[btnType="rereEditHidden"]');
var cancleBtnHidden = this.parentElement.parentElement.querySelector('button[btnType="rereCancleHidden"]');
$(ta).addClass('bmp-idea-view-rere-textarea');
$(ta).removeClass('bmp-idea-view-common-textarea-re');
ta.readOnly = false;
$(editBtn.parentElement).hide();
$(delBtn.parentElement).hide();
$(editBtnHidden.parentElement).css('display', 'table-cell');
$(cancleBtnHidden.parentElement).css('display', 'table-cell');
//$(editBtnHidden).show();
//$(cancleBtnHidden).show();
$('button[btnType="rereCancleHidden"]').click(function(errr) {
initComment();
});
$('button[btnType="rereEditHidden"]').click(function(err) {
var rid = this.parentElement.parentElement.parentElement.parentElement.id.split('replyIdNo')[1];
var content = this.parentElement.parentElement.querySelector('textarea').value;
var seq = this.parentElement.parentElement.querySelector('td#reSeq').innerText;
$ux.cjMessage.confirm('수정하시겠습니까?', null, function() {
$ux.request({
name: 'BmpIdeaEditReComment',
value: {
REPLYID: rid,
CONTENT: content,
SEQ: seq,
IDEAID: IDEAID
},
reply: function(e) {
initComment();
}
});
});
});
});
//대댓글 삭제하기
$('button[btnType="rereDel"]').click(function(e) {
var rid = this.parentElement.parentElement.parentElement.parentElement.id.split('replyIdNo')[1];
var content = this.parentElement.parentElement.querySelector('textarea').value;
var seq = this.parentElement.parentElement.querySelector('td#reSeq').innerText;
$ux.cjMessage.confirm('삭제하시겠습니까?', null, function() {
$ux.request({
name: 'BmpIdeaDelReComment',
value: {
REPLYID: rid,
SEQ: seq,
IDEAID: IDEAID
},
reply: function(e) {
initComment();
}
});
});
});
var length = $('div[ux-name="commentEmpty"] table').length;
var top = 60 * length + 855;
var orignTop = replyEmpty.tool().setTopPositionValue(top + 'px');
}
});
replyCount();
}댓글 양식
/*댓글 양식*/
function makeCommentTable(user, content, time, rid, isme) {
var displayModiBtn;
if (isme == 'Y') {
displayModiBtn = 'inline-block';
} else {
displayModiBtn = 'none';
}
var commentTable = '<table id="replyIdNo' + rid + '" style="border:1px solid; height:60px; width:100%;box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);table-layout:fixed;\
border: solid 1.5px #d7dae2;\ background-color: #efefef;">\ <tr style="text-align:center;">\
<td style="width:7%;"><img src="/resource/bmp/Reply_User_Icon.png" width="40px" height="40px" style="margin-top:5px;"/></td>\
<td style="width:15%; color:#777777;font-family: CJONLYONENEWbodyRegular;font-size: 15px;">' + user + '</td>\
<td style="width:58%; color:#3a3a3a;text-align:left !important;"><textarea readonly class="bmp-idea-view-common-textarea" id="commonTextareaNo' + rid + '">' + content + '</textarea></td>\
<td style="width:10%; color:#777777;font-family: CJONLYONENEWbodyRegular;font-size: 15px;">' + time + '</td>\
<td style="width:5%;"><button class="bmp-idea-comment-button" style="margin-right:8px;display:' + displayModiBtn + '" btnType="edit">수 정</button></td>\
<td style="width:5%;"><button class="bmp-idea-comment-button" style="margin-right:16px; margin-left:8px;" id="repleBtnNo' + rid + '" btnType="reply">답 글</button></td>\
<td style="width:5%;"><button class="bmp-idea-comment-button" style="margin-right:16px; margin-left:8px;display:' + displayModiBtn + '" id="repleBtnNo' + rid + '" btnType="del">삭 제</button></td>\
<td style="width:5%; display:none;"><button class="bmp-idea-comment-button" style="margin-right:8px;" btnType="editHidden">등 록</button></td>\
<td style="width:5%; display:none;"><button class="bmp-idea-comment-button" style="margin-right:16px; margin-left:8px;" btnType="replyHidden">취 소</button></td>\ <td hidden>' + rid + '</td>\</tr>\</table>';
return commentTable;
}
대댓글 양식
/*대댓글 양식*/
function makeReReplytable(user, rid, content, time, isme, seq) {
var displayModiBtn;
if (isme == 'Y') {
displayModiBtn = 'inline-block';
} else {
displayModiBtn = 'none';
}
var commentTable = '<table id="replyIdNo' + rid + '" style="border:1px solid; height:60px; width:100%;box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);table-layout:fixed;\
border: solid 1.5px #d7dae2;\ background-color: #f2f6fe;">\ <tr style="text-align:center;">\
<td style="width:3%"></td>\
<td style="width:3%;padding-bottom:15px"><img src="/resource/bmp/Reply_Comment_line.png" width="30" height="30"/></td>\
<td style="width:3%;"><img src="/resource/bmp/Reply_Comment User_Icon.png" width="40px" height="40px"style="margin-top:5px;"/></td>\
<td style="width:15%; color:#777777;font-family: CJONLYONENEWbodyRegular;font-size: 15px;">' + user + '</td>\
<td style="width:50%; color:#3a3a3a;text-align:left !important;"><textarea readonly class="bmp-idea-view-common-textarea-re" id="commonRETextareaNo' + rid + '">' + content + '</textarea></td>\
<td style="width:20%; color:#777777;font-family: CJONLYONENEWbodyRegular;font-size: 15px;">' + time + '</td>\
<td style="width:5%;"><button class="bmp-idea-comment-button" style="margin-left:4px;display:' + displayModiBtn + '" btnType="rereEdit">수 정</button></td>\
<td style="width:5%;"><button class="bmp-idea-comment-button" style="margin-left:4px;display:' + displayModiBtn + '"btnType="rereDel">삭 제</button></td>\
<td style="width:5%; display:none;"><button class="bmp-idea-comment-button" style="margin-left:4px;" btnType="rereEditHidden">등 록</button></td>\
<td style="width:5%; display:none; "><button class="bmp-idea-comment-button" style="margin-left:4px;" btnType="rereCancleHidden">취 소</button></td>\
<td hidden>' + rid + '</td>\
<td hidden id="reSeq">' + seq + '</td>\
</tr>\
</table>';
$($('button[btnType="rereCancleHidden"]').parentElement).hide();
$($('button[btnType="rereEditHidden"]').parentElement).hide();
return commentTable;
}대댓글 입력 양식
/*대댓글 입력 양식*/
function makeReReply(user, rid) {
$ux.data.query({
id: 'BMP_IDEA_VIEW.GET.REPLY.USER.INFO',
version: '00001',
parameter: {
USERID: $ux.user.id()
},
async: false,
reply: function(e) {
user = e.result[0].DEPARTMENT + ' ) ' + e.result[0].USERNAME;
}
})
var commentTable = '<table id="replyIdNo' + rid + '" style="border:1px solid; height:60px; width:100%;box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);table-layout:fixed;\
border: solid 1.5px #d7dae2;\ background-color: #f2f6fe;">\ <tr style="text-align:center;">\
<td style="width:3%"></td>\
<td style="width:3%;padding-bottom:15px"><img src="/resource/bmp/Reply_Comment_line.png" width="30" height="30"/></td>\
<td style="width:3%;"><img src="/resource/bmp/Reply_Comment User_Icon.png" width="40px" height="40px"style="margin-top:5px;"/></td>\
<td style="width:15%; color:#777777;font-family: CJONLYONENEWbodyRegular;font-size: 15px;">' + user + '</td>\
<td style="width:56%; color:#3a3a3a;text-align:left !important;"><textarea class="bmp-idea-view-rere-textarea" placeholder="여기에 댓글을 입력해주세요. 권리침해, 욕설 및 특정 대상을 비하하는 내용을 게시할 경우 이용약관 및 관련 법률에 의해 제재될 수 있습니다" id="commentCommit"></textarea></td>\
<td style="width:20%; color:#777777;font-family: CJONLYONENEWbodyRegular;font-size: 15px;"></td>\
<td style="width:5%;"><button class="bmp-idea-comment-button" style="margin-right:8px;" btnType="reCommit">등 록</button></td>\
<td style="width:5%;"><button class="bmp-idea-comment-button" style="margin-right:8px;margin-left:4px;"btnType="reCancle">취 소</button></td>\
<td hidden>' + rid + '</td>\
</tr>\
</table>';
return commentTable;
}결과
'Javascript > Javascript' 카테고리의 다른 글
| [Javascript] focus, blur Event 처리 (0) | 2020.10.27 |
|---|---|
| [Javascript] replace, replaceAll (0) | 2020.07.30 |
| [Javascript] 변수 var, let, const 차이점 (0) | 2020.07.29 |
| [Javascript] Javascript - 동적인 클라이언트측 스크립트언어 (0) | 2020.07.29 |
Comments