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