자바스크립트 Treeview 클릭시 페이지 이동 또는 페이지 정보 변경 방법? 채택완료
카알주
5년 전
조회 2,321
</p>
<p><link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"</a> />
<script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></a>
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script></a></p>
<p><script>
$(document).ready(function(){
var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());
$('#folder_jstree').jstree({
"core" : {
"data" : folder_jsondata,
"multiple": false
}
}).bind("select_node.jstree", function (e, data) {
var href = data.node.url.href;
var parentId = data.node.url.parent_id;
if(href == '#')
return '';
window.open(href);</p>
<p></script></p>
<p>
</p>
<p>$row = array();</p>
<p>$row[0]['id'] = 1; $row[0]['name'] = "회사명"; $row[0]['parentid'] = 0; $row[0]['url'] = "<a href="https://1google.com";" target="_blank" rel="noopener noreferrer">https://1google.com";</a>
$row[1]['id'] = 2; $row[1]['name'] = "서울지점"; $row[1]['parentid'] = 1; $row[1]['url'] = "<a href="https://2google.com";" target="_blank" rel="noopener noreferrer">https://2google.com";</a>
$row[2]['id'] = 3; $row[2]['name'] = "부산지점"; $row[2]['parentid'] = 1; $row[2]['url'] = "<a href="https://3google.com";" target="_blank" rel="noopener noreferrer">https://3google.com";</a>
$row[3]['id'] = 4; $row[3]['name'] = "물류창고"; $row[3]['parentid'] = 3; $row[3]['url'] = "<a href="https://4google.com";" target="_blank" rel="noopener noreferrer">https://4google.com";</a>
$row[4]['id'] = 5; $row[4]['name'] = "제1공장"; $row[4]['parentid'] = 2; $row[4]['url'] = "<a href="https://5google.com";" target="_blank" rel="noopener noreferrer">https://5google.com";</a>
$row[5]['id'] = 6; $row[5]['name'] = "A"; $row[5]['parentid'] = 5; $row[5]['url'] = "<a href="https://6google.com";" target="_blank" rel="noopener noreferrer">https://6google.com";</a>
$row[6]['id'] = 7; $row[6]['name'] = "B"; $row[6]['parentid'] = 2; $row[6]['url'] = "<a href="https://7google.com";" target="_blank" rel="noopener noreferrer">https://7google.com";</a>
$row[7]['id'] = 8; $row[7]['name'] = "C"; $row[7]['parentid'] = 5; $row[7]['url'] = "<a href="https://8google.com";" target="_blank" rel="noopener noreferrer">https://8google.com";</a>
$row[8]['id'] = 9; $row[8]['name'] = "D"; $row[8]['parentid'] = 9; $row[8]['url'] = "<a href="https://9google.com";" target="_blank" rel="noopener noreferrer">https://9google.com";</a>
$row[9]['id'] = 10; $row[9]['name'] = "E"; $row[9]['parentid'] = 9; $row[9]['url'] = "<a href="https://10google.com";" target="_blank" rel="noopener noreferrer">https://10google.com";</a>
$row[10]['id'] = 11; $row[10]['name'] = "F"; $row[10]['parentid'] = 10; $row[10]['url'] = "<a href="https://11google.com";" target="_blank" rel="noopener noreferrer">https://11google.com";</a>
$row[11]['id'] = 12; $row[11]['name'] = "G"; $row[11]['parentid'] = 8; $row[11]['url'] = "<a href="https://12google.com";" target="_blank" rel="noopener noreferrer">https://12google.com";</a></p>
<p> </p>
<p>$folders_arr = array();
for ($i=0; $i < count($row); $i++) {
$parentid = $row[$i]['parentid'];</p>
<p> if($parentid == '0') { $parentid = "#"; }
$selected = false;
$opened = false;</p>
<p> </p>
<p> $folders_arr[] = array(
"id" => $row[$i]['id'],
"parent" => $parentid,
"text" => $row[$i]['name'],
"url" => $row[$i]['url'],
"state" => array("selected" => $selected, "opened"=>$opened)
);
}</p>
<p>
</p>
<p><div id="folder_jstree"></div></p>
<p>
위와 같은 코드가 있습니다. 근데 클릭시 URL로 이동 하고 싶은데 안되는 군요.
클릭하면 폴더 목록 펼쳐지고 닫히고는 잘됩니다.
어떻게 해야 하면 클릭시 해당 각 사이트로 이동할 수 있을까요?
또는 같은 페이지의 <div>Branch information</div> 태그의 정보를 바꿀수 있을까요?
자바스크립트를 잘 몰라서 이것 저것 보고 있는데 어렵네요. T.T
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
5년 전
페이지 변화 없이 이런것도 가능합니다. 매우 유용합니다.
$.ajax({
type: "POST",
url: "/home/admin_info.php",
data: "ADMINID=admin&AdminGrade=1",
cache: false,
success: function(msg){
document.getElementById('htmlBasket').innerHTML=msg;
}
});
msq로 받아온 결과 값은 다양하게 페이지에 넣거나 출력가능하구요.
파일 업로드 이외도 아주 유용합니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
5년 전
한참을 찾던중 해결책을 찾았습니다.
</p>
<p>$("#folder_jstree").bind( "select_node.jstree", function(evt, data){
var dataType = data.node.original.url;
location.href=dataType;
}).jstree();</p>
<p>jQuery의 jstree()에 .bind를 이용하여 추가된 json 정보의 값을 불러와 페이지 이동을 완성했습니다.
이번 프로젝트가 끝나면 jQuery를 좀더 공부해봐야겠습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
나인보스
5년 전
�
카알주
5년 전
@나인보스 님께서 말씀하신 jquery.form.js 주로 파일 업로드 관련해서 사용하는군요.
페이지 변경 없이 파일업로드가 되는 기능이라 편할 것 같습니다.
jQuery 책한권 사서 전체적으로 파악해봐야겠네요. 편한게 적용할 곳이 많아 보이군요.
댓글 감사합니다.
이번 한주도 즐거운 한주 보내세요.
페이지 변경 없이 파일업로드가 되는 기능이라 편할 것 같습니다.
jQuery 책한권 사서 전체적으로 파악해봐야겠네요. 편한게 적용할 곳이 많아 보이군요.
댓글 감사합니다.
이번 한주도 즐거운 한주 보내세요.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
jquery는 정말 편리하고 좋습니다, jquery,form.js 도 좋아요.