js플러그인, jquery 질문입니다. 채택완료
jquery의 sortable을 이용하여 테이블 td를 드래그 앤 드롭으로 순서룰 변경하고
colResizable플러그인을 이용하여 td넓이를 드래그를 통해 변경하는 기능을 구현했습니다.
각 기능이 따로따로 동작할때는 문제가 없지만 sortable 기능이 작동 한 후에 colResizable 기능에 넓이 조정하는 지점이 문제가 생겨 제대로 동작이 되지 않는 것 같습니다.
td순서 변경 후 colResizable을 다시 초기화를 해도 같은 현상이 일어납니다.
관련 지식이 있으신 분들의 도움을 구합니다.
http://www.bacubacu.com/colresizable/">colResizable-1.6.min.js 링크
아래는 작성한 코드입니다.
</p>
<p><html>
<head>
<script src="<a href="http://code.jquery.com/jquery-1.7.js"" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.7.js"</a> type="text/javascript"></script>
<script src="<a href="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script></a>
<script src="colResizable-1.6.min.js"></script>
<script>
$(function () {
//-- table td drag and drop
let start_index = 0;
let stop_index = 0;
$("#sortable").sortable({
items: 'th',
start: function (event, ui) {
start_index = ui.item.context.cellIndex;
},
stop: function (event, ui) {
stop_index = ui.item.context.cellIndex;
let $table = $('#sortable');
let $tr = $table.find("tbody").find("tr");
$.each($tr, function (index, el) {
let current_tr = $(this);
let $tds = current_tr.find("td");
let move_td = $tds.get(start_index);
let arrive_td = $tds.get(stop_index);</p>
<p> if (start_index > stop_index) {
arrive_td.before(move_td);
} else {
arrive_td.after(move_td);
}
});
// colResizable();
}
});
$("#sortable").disableSelection();
//-- table td drag and drop</p>
<p> colResizable();
});
//-- table 넓이 조절
var colResizable = function(){
$("table").colResizable({
liveDrag: true,
// minWidth: 50,
resizeMode:'overflow'
});
};
</script>
<style>
table {border-collapse: collapse;}
table tr th, td {border: solid 1px #AAAAAA;}
</style>
</head>
<body>
<table id="sortable" class="tbl_head01">
<thead>
<tr>
<th>th1</th>
<th>th2</th>
<th>th3</th>
<th>th4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</tbody>
</table>
</body>
</html></p>
<p>답변 2개
아래 코드를 실행해 보면 무엇을 해야하는지 알 수있을 겁니다
핵심은 이동 후 기존 셀 위치 정보들을 삭제하고 재설정 해야 리사이징이 작동 가능하겠죠
$(function () {
$("#sortable").sortable({
items: 'th', update: function (event, ui) { tbl_Resizable(); }
});
function tbl_Resizable(){
$(".JCLRgrips").remove();
$("#sortable").colResizable({
liveDrag:true, postbackSafe:true, partialRefresh:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging", resizeMode:'fit'
});
}
tbl_Resizable();
});
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인