트리뷰 구조 홈페이지 제작 mysql ,php json
-
게시물 수정 , 삭제는 로그인 필요
질문입니다.
프로그래밍 문외한입니다.
제가 만들고싶던 사이트는 저런 트리뷰사이트인데 능력이안되서 겨우 저 예제를 찾았는데
서울 대전 부산 대구 같이 지역명에 구,동까지 트리뷰로 만드려다보니 노가다로 저걸 채워넣기 엄두가 안나서 저기 중간에 적힌
이제 DB 연동해서 PHP 로 굴릴려면 PHP 에서 DB 값 출력해올때
JSON 데이터로 넘겨줄때 위 방식대로만 넘겨주면 됩니다.
를 수행하면 sql에 엑셀처럼 입력후 저기에 자동으로 적용되는건지 궁금합니다. 만약적용된다면
닷홈 무료호스팅으로 저 페이지까지 올려놓긴했는데 sql을 어떻게 json으로해서 저걸 연결할지 좀 알려주세요
2023.06.09.조회수 25
딱 간단하게 개발하기 좋은 샘플이어서 이걸 참고했습니다.
제가 필요한 기능대로 bstreeview.min.js 를 약간 수정했습니다.
조직도를 만들려고 했는데요.
현재 저 상태로는 div 아무곳이나 클릭을해도 열렸다 닫혔다 기능이 작동 되는데,
저는 그럴필요없었고 그냥 화살표쪽을 눌렀을때 열렸다 닫혔다가 필요했습니다.
그리고 div 를 클릭했을때엔 클릭한 값을 받아오는게 필요했습니다.
그래야 클릭한 부서별로 인원 구성을 보여줄수 있으니까요
또 현재는 초기화면 진입시 2단 3단이 다 닫혀있는 상태로 보이는데 저는 다 열려있는 상태로 보길 원했습니다.
bstreeview.min.js 에서 수정한 내용은
줄마다 id 를 부여해서 제가 선택한 tree 리스트가 뭔지 알수 있게끔 추가를 해주었고,
부서번호는 data-deptid 라고해서 별도로 부여를 해줬습니다.
또 onclick attr 을 추가도 해주었구요
또 collapse 가 기본값이었는데 show 라는 class 를 추가해줘서 계속 펼쳐진 상태로 보여지게 만들었습니다.
그리고 앞에 i 아이콘을 클릭했을때만 펼쳐지고 닫히게 해줬구요.
js a.extend 부분
init:
function(
) {
this.tree = [];
this.nodes = [];
this.settings.data && (
this.settings.data = a.parseJSON(
this.settings.data),
this.tree = a.extend(!
0, [],
this.settings.data),
delete
this.settings.data);
a(
this.element).addClass(
"bstreeview");
this.initData({
nodes:
this.tree
});
var b =
this;
this.build(a(
this.element),
this.tree,
0);
a(
".bstreeview").on(
"click",
".list-group-item > .state-icon",
function (
) {
//펼쳐보이는 아이콘 조정
a(
this).toggleClass(b.settings.collapseIcon).toggleClass(b.settings.expandIcon)
//a(".state-icon", this).toggleClass(b.settings.expandIcon).toggleClass(b.settings.collapseIcon)
})
},
js 파일 build : function 부분
build:
function(
b, f, h) {
var c =
this,
g =
"1.25rem;";
0 < h && (g = (c.settings.indent + h * c.settings.indent).toString() +
"rem;");
h +=
1;
a.each(f,
function (
f, d) {
//받아오는 seq 혹시 없다면 0으로 고정
if (!d.seq || d.seq ==
"undefined" || d.seq ==
"") {
d.seq =
0;
}
//목록별 id 추가 및 data-deptid 추가
var e = a(
'<div href="#itemid" id="tree_'+ d.nodeId +
'" data-deptid="'+d.seq+
'" class="list-group-item list-group-item-action" ></div>').attr(
"style",
"padding-left:" + g);
//자식 요소 존재여부 확인
if (d.nodes) {
// attr onClick 추가 자식 노드가 있을땐 Y 인자값
e.attr(
"onClick",
"node_select(" + d.nodeId +
",'Y')");
// i 아이콘 클릭했을때만 펼치고 닫히게하기
var k = a(
'<i class="state-icon" data-child="Y" data-toggle="collapse" href="#'+ c.itemIdPrefix + d.nodeId+
'"></i>').addClass(c.settings.expandIcon);
e.append(k)
}
else {
// attr onClick 추가 자식 노드가 있을땐 N 인자값
e.attr(
"onClick",
"node_select(" + d.nodeId +
",'N')");
}
d.icon && (k = a(
'<i class="item-icon"></i>').addClass(d.icon), e.append(k));
e.append(d.text);
d[
"class"] && e.addClass(d[
"class"]);
b.append(e);
//계속 펼쳐보이게 하기
d.nodes && (e = a(
'<div class="list-group collapse show" id="itemid"></div>').attr(
"id", c.itemIdPrefix + d.nodeId), b.append(e), c.build(e, d.nodes, h))
})
}
트리구조 데이터
$(
function(
) {
var json = [{
text:
"회사",
icon:
"fa fa-building",
seq:
99999,
nodes: [{
text:
"부서1",
icon:
"fa fa-users",
nodes: [{
icon:
"fa fa-user-friends",
text:
"영업1팀",
seq:
11231,
nodes: [{
icon:
"fa fa-user-friends",
text:
"영업1-1팀",
seq:
11231,
}, {
icon:
"fa fa-user-friends",
text:
"영업1-2팀",
seq:
2123123,
}]
},
{
icon:
"fa fa-user-friends",
text:
"영업2팀",
seq:
9999,
}
]
},
{
icon:
"fa fa-users",
text:
"기술부"
},
{
icon:
"fa fa-users",
text:
"경영지원팀"
},
]
}, {
text:
"회사2",
icon:
"fa fa-building",
seq:
999999,
nodes: [{
icon:
"fa fa-users",
text:
"팀1"
},
{
icon:
"fa fa-users",
text:
"팀2"
},
]
}];
console.log(json);
$(
'#tree').bstreeview({
//indent: 2,
expandIcon:
'fa fa-angle-down',
collapseIcon:
'fa fa-angle-right',
data:
JSON.stringify(json)
});
});
이제 DB 연동해서 PHP 로 굴릴려면 PHP 에서 DB 값 출력해올때
JSON 데이터로 넘겨줄때 위 방식대로만 넘겨주면 됩니다.
index.php
$(
function(
) {
$.ajax({
type:
"GET",
url:
"./ajax.tree.php",
data: {},
success:
function(
res) {
console.log(res);
$(
'#tree').bstreeview({
//indent: 2,
expandIcon:
'fa fa-angle-down',
collapseIcon:
'fa fa-angle-right',
data: res
//data: JSON.stringify(res)
});
},
error:
function(
res) {
alert(res.responseText);
},
});
});
tdept 테이블
CREATE TABLE
`tdept` (
`deptid` INT(
10) NOT NULL AUTO_INCREMENT COMMENT
'사용자조직코드 아이디',
`deptname` VARCHAR(
50) NOT NULL COMMENT
'사용자조직 명' COLLATE
'utf8_general_ci',
`updeptid` INT(
10) NOT NULL COMMENT
'상위조직 아이디',
`crtime` DATETIME NULL DEFAULT NULL COMMENT
'등록(수정)일자',
`icon` VARCHAR(
20) NULL DEFAULT
'' COMMENT
'아이콘' COLLATE
'utf8_general_ci',
`od` INT(
10) NULL DEFAULT NULL COMMENT
'정렬순번',
`use_yn` CHAR(
1) NULL DEFAULT
'Y' COMMENT
'사용여부' COLLATE
'utf8_general_ci',
PRIMARY KEY (
`deptid`) USING BTREE,
INDEX
`SK_UserDeptId_UpUserDeptId` (
`deptid`,
`updeptid`) USING BTREE
)
COLLATE=
'utf8_general_ci'
;
ajax.tree.php
<? include $_SERVER[
"DOCUMENT_ROOT"] .
"/common/include/include.php"; ?>
<?
$tableName =
"tdept";
$query =
" SELECT deptname as text ,icon ,deptid , updeptid ";
$query .=
" FROM $tableName ";
$query .=
" WHERE use_yn = 'Y' ";
$row = $db->run(
"connect",
"select", $query);
foreach ($row
as $k => $v) {
$sub_data[
'text'] = $row[$k][
'text'];
$sub_data[
'icon'] = $row[$k][
'icon'];
$sub_data[
'seq'] = $row[$k][
'deptid'];
$sub_data[
'updeptid'] = $row[$k][
'updeptid'];
$data[] = $sub_data;
}
foreach ($data
as $key => &$value) {
$output[$value[
"seq"]] = &$value;
}
foreach ($data
as $key => &$value) {
if ($value[
"updeptid"] && isset($output[$value[
"updeptid"]])) {
$output[$value[
"updeptid"]][
"nodes"][] = &$value;
}
}
foreach ($data
as $key => &$value) {
if ($value[
"updeptid"] && isset($output[$value[
"updeptid"]])) {
unset($data[$key]);
}
}
$result = json_encode($data, JSON_UNESCAPED_UNICODE);
$result = substr($result,
1);
$result = substr($result,
0, -
1);
$parttern =
'/"[0-9]+":{/';
$result = preg_replace($parttern,
'{', $result);
echo
"[" . $result .
"]";
exit;
?>
원하는대로 데이터가 출력이 자꾸 안나와서 앞뒤 자르고 정규표현식으로 조금 다듬었습니다 ㅡ,.ㅡ;;
[
{회사1}, {회사2}, {회사3}
]
요런식으로 들어가야되는데 자꾸 아래처럼 들어가는 부분이 있어서 연관배열로 어떻게해야할까 삽질좀 하다가 결국은 정규표현식으로 다듬는걸로 처리했습니다
{
0:{회사1}, 1:{회사2}, 2:{회사3}
}
질문입니다.
프로그래밍 문외한입니다.
제가 만들고싶던 사이트는 저런 트리뷰사이트인데 능력이안되서 겨우 저 예제를 찾았는데
서울 대전 부산 대구 같이 지역명에 구,동까지 트리뷰로 만드려다보니 노가다로 저걸 채워넣기 엄두가 안나서 저기 중간에 적힌
이제 DB 연동해서 PHP 로 굴릴려면 PHP 에서 DB 값 출력해올때
JSON 데이터로 넘겨줄때 위 방식대로만 넘겨주면 됩니다.
를 수행하면 sql에 엑셀처럼 입력후 저기에 자동으로 적용되는건지 궁금합니다. 만약적용된다면
닷홈 무료호스팅으로 저 페이지까지 올려놓긴했는데 sql을 어떻게 json으로해서 저걸 연결할지 좀 알려주세요
질문입니다.
프로그래밍 문외한입니다.
제가 만들고싶던 사이트는 저런 트리뷰사이트인데 능력이안되서 겨우 저 예제를 찾았는데
서울 대전 부산 대구 같이 지역명에 구,동까지 트리뷰로 만드려다보니 노가다로 저걸 채워넣기 엄두가 안나서 저기 중간에 적힌
이제 DB 연동해서 PHP 로 굴릴려면 PHP 에서 DB 값 출력해올때
JSON 데이터로 넘겨줄때 위 방식대로만 넘겨주면 됩니다.
를 수행하면 sql에 엑셀처럼 입력후 저기에 자동으로 적용되는건지 궁금합니다. 만약적용된다면
닷홈 무료호스팅으로 저 페이지까지 올려놓긴했는데 sql을 어떻게 json으로해서 저걸 연결할지 좀 알려주세요
2023.06.09.조회수 25
딱 간단하게 개발하기 좋은 샘플이어서 이걸 참고했습니다.
제가 필요한 기능대로 bstreeview.min.js 를 약간 수정했습니다.
조직도를 만들려고 했는데요.
현재 저 상태로는 div 아무곳이나 클릭을해도 열렸다 닫혔다 기능이 작동 되는데,
저는 그럴필요없었고 그냥 화살표쪽을 눌렀을때 열렸다 닫혔다가 필요했습니다.
그리고 div 를 클릭했을때엔 클릭한 값을 받아오는게 필요했습니다.
그래야 클릭한 부서별로 인원 구성을 보여줄수 있으니까요
또 현재는 초기화면 진입시 2단 3단이 다 닫혀있는 상태로 보이는데 저는 다 열려있는 상태로 보길 원했습니다.
bstreeview.min.js 에서 수정한 내용은
줄마다 id 를 부여해서 제가 선택한 tree 리스트가 뭔지 알수 있게끔 추가를 해주었고,
부서번호는 data-deptid 라고해서 별도로 부여를 해줬습니다.
또 onclick attr 을 추가도 해주었구요
또 collapse 가 기본값이었는데 show 라는 class 를 추가해줘서 계속 펼쳐진 상태로 보여지게 만들었습니다.
그리고 앞에 i 아이콘을 클릭했을때만 펼쳐지고 닫히게 해줬구요.
js a.extend 부분
init:
function(
) {
this.tree = [];
this.nodes = [];
this.settings.data && (
this.settings.data = a.parseJSON(
this.settings.data),
this.tree = a.extend(!
0, [],
this.settings.data),
delete
this.settings.data);
a(
this.element).addClass(
"bstreeview");
this.initData({
nodes:
this.tree
});
var b =
this;
this.build(a(
this.element),
this.tree,
0);
a(
".bstreeview").on(
"click",
".list-group-item > .state-icon",
function (
) {
//펼쳐보이는 아이콘 조정
a(
this).toggleClass(b.settings.collapseIcon).toggleClass(b.settings.expandIcon)
//a(".state-icon", this).toggleClass(b.settings.expandIcon).toggleClass(b.settings.collapseIcon)
})
},
js 파일 build : function 부분
build:
function(
b, f, h) {
var c =
this,
g =
"1.25rem;";
0 < h && (g = (c.settings.indent + h * c.settings.indent).toString() +
"rem;");
h +=
1;
a.each(f,
function (
f, d) {
//받아오는 seq 혹시 없다면 0으로 고정
if (!d.seq || d.seq ==
"undefined" || d.seq ==
"") {
d.seq =
0;
}
//목록별 id 추가 및 data-deptid 추가
var e = a(
'<div href="#itemid" id="tree_'+ d.nodeId +
'" data-deptid="'+d.seq+
'" class="list-group-item list-group-item-action" ></div>').attr(
"style",
"padding-left:" + g);
//자식 요소 존재여부 확인
if (d.nodes) {
// attr onClick 추가 자식 노드가 있을땐 Y 인자값
e.attr(
"onClick",
"node_select(" + d.nodeId +
",'Y')");
// i 아이콘 클릭했을때만 펼치고 닫히게하기
var k = a(
'<i class="state-icon" data-child="Y" data-toggle="collapse" href="#'+ c.itemIdPrefix + d.nodeId+
'"></i>').addClass(c.settings.expandIcon);
e.append(k)
}
else {
// attr onClick 추가 자식 노드가 있을땐 N 인자값
e.attr(
"onClick",
"node_select(" + d.nodeId +
",'N')");
}
d.icon && (k = a(
'<i class="item-icon"></i>').addClass(d.icon), e.append(k));
e.append(d.text);
d[
"class"] && e.addClass(d[
"class"]);
b.append(e);
//계속 펼쳐보이게 하기
d.nodes && (e = a(
'<div class="list-group collapse show" id="itemid"></div>').attr(
"id", c.itemIdPrefix + d.nodeId), b.append(e), c.build(e, d.nodes, h))
})
}
트리구조 데이터
$(
function(
) {
var json = [{
text:
"회사",
icon:
"fa fa-building",
seq:
99999,
nodes: [{
text:
"부서1",
icon:
"fa fa-users",
nodes: [{
icon:
"fa fa-user-friends",
text:
"영업1팀",
seq:
11231,
nodes: [{
icon:
"fa fa-user-friends",
text:
"영업1-1팀",
seq:
11231,
}, {
icon:
"fa fa-user-friends",
text:
"영업1-2팀",
seq:
2123123,
}]
},
{
icon:
"fa fa-user-friends",
text:
"영업2팀",
seq:
9999,
}
]
},
{
icon:
"fa fa-users",
text:
"기술부"
},
{
icon:
"fa fa-users",
text:
"경영지원팀"
},
]
}, {
text:
"회사2",
icon:
"fa fa-building",
seq:
999999,
nodes: [{
icon:
"fa fa-users",
text:
"팀1"
},
{
icon:
"fa fa-users",
text:
"팀2"
},
]
}];
console.log(json);
$(
'#tree').bstreeview({
//indent: 2,
expandIcon:
'fa fa-angle-down',
collapseIcon:
'fa fa-angle-right',
data:
JSON.stringify(json)
});
});
이제 DB 연동해서 PHP 로 굴릴려면 PHP 에서 DB 값 출력해올때
JSON 데이터로 넘겨줄때 위 방식대로만 넘겨주면 됩니다.
index.php
$(
function(
) {
$.ajax({
type:
"GET",
url:
"./ajax.tree.php",
data: {},
success:
function(
res) {
console.log(res);
$(
'#tree').bstreeview({
//indent: 2,
expandIcon:
'fa fa-angle-down',
collapseIcon:
'fa fa-angle-right',
data: res
//data: JSON.stringify(res)
});
},
error:
function(
res) {
alert(res.responseText);
},
});
});
tdept 테이블
CREATE TABLE
`tdept` (
`deptid` INT(
10) NOT NULL AUTO_INCREMENT COMMENT
'사용자조직코드 아이디',
`deptname` VARCHAR(
50) NOT NULL COMMENT
'사용자조직 명' COLLATE
'utf8_general_ci',
`updeptid` INT(
10) NOT NULL COMMENT
'상위조직 아이디',
`crtime` DATETIME NULL DEFAULT NULL COMMENT
'등록(수정)일자',
`icon` VARCHAR(
20) NULL DEFAULT
'' COMMENT
'아이콘' COLLATE
'utf8_general_ci',
`od` INT(
10) NULL DEFAULT NULL COMMENT
'정렬순번',
`use_yn` CHAR(
1) NULL DEFAULT
'Y' COMMENT
'사용여부' COLLATE
'utf8_general_ci',
PRIMARY KEY (
`deptid`) USING BTREE,
INDEX
`SK_UserDeptId_UpUserDeptId` (
`deptid`,
`updeptid`) USING BTREE
)
COLLATE=
'utf8_general_ci'
;
ajax.tree.php
<? include $_SERVER[
"DOCUMENT_ROOT"] .
"/common/include/include.php"; ?>
<?
$tableName =
"tdept";
$query =
" SELECT deptname as text ,icon ,deptid , updeptid ";
$query .=
" FROM $tableName ";
$query .=
" WHERE use_yn = 'Y' ";
$row = $db->run(
"connect",
"select", $query);
foreach ($row
as $k => $v) {
$sub_data[
'text'] = $row[$k][
'text'];
$sub_data[
'icon'] = $row[$k][
'icon'];
$sub_data[
'seq'] = $row[$k][
'deptid'];
$sub_data[
'updeptid'] = $row[$k][
'updeptid'];
$data[] = $sub_data;
}
foreach ($data
as $key => &$value) {
$output[$value[
"seq"]] = &$value;
}
foreach ($data
as $key => &$value) {
if ($value[
"updeptid"] && isset($output[$value[
"updeptid"]])) {
$output[$value[
"updeptid"]][
"nodes"][] = &$value;
}
}
foreach ($data
as $key => &$value) {
if ($value[
"updeptid"] && isset($output[$value[
"updeptid"]])) {
unset($data[$key]);
}
}
$result = json_encode($data, JSON_UNESCAPED_UNICODE);
$result = substr($result,
1);
$result = substr($result,
0, -
1);
$parttern =
'/"[0-9]+":{/';
$result = preg_replace($parttern,
'{', $result);
echo
"[" . $result .
"]";
exit;
?>
원하는대로 데이터가 출력이 자꾸 안나와서 앞뒤 자르고 정규표현식으로 조금 다듬었습니다 ㅡ,.ㅡ;;
[
{회사1}, {회사2}, {회사3}
]
요런식으로 들어가야되는데 자꾸 아래처럼 들어가는 부분이 있어서 연관배열로 어떻게해야할까 삽질좀 하다가 결국은 정규표현식으로 다듬는걸로 처리했습니다
{
0:{회사1}, 1:{회사2}, 2:{회사3}
}
질문입니다.
프로그래밍 문외한입니다.
제가 만들고싶던 사이트는 저런 트리뷰사이트인데 능력이안되서 겨우 저 예제를 찾았는데
서울 대전 부산 대구 같이 지역명에 구,동까지 트리뷰로 만드려다보니 노가다로 저걸 채워넣기 엄두가 안나서 저기 중간에 적힌
이제 DB 연동해서 PHP 로 굴릴려면 PHP 에서 DB 값 출력해올때
JSON 데이터로 넘겨줄때 위 방식대로만 넘겨주면 됩니다.
를 수행하면 sql에 엑셀처럼 입력후 저기에 자동으로 적용되는건지 궁금합니다. 만약적용된다면
닷홈 무료호스팅으로 저 페이지까지 올려놓긴했는데 sql을 어떻게 json으로해서 저걸 연결할지 좀 알려주세요
