Ai giúp mình giải thuật này với????????????????? [Archive]

php_code

25-09-2011, 18:58

Tình hình là mình gặp vấn đề này:

Xin vui lòng xem hình này trước:
http://www.uphinh.vn/image/stream/413527.png

Mỗi 1 người là 1 chấm đỏ, và 1 người chỉ có tối đa 2 chấm đỏ con.

Vấn đề là dùng css như thế nào để ra dc như vậy, mình hơi yếu ở mảng này nên post lên đây mogn dc trợ giúp.

Về lập trình, mình phải tìm được người là nào con của người nào để hiển thị lên cho đúng, vì khi mouserover thì sẽ hiện lên username của chấm đỏ ( người đó), xin nghe cao kiến về vấn đề này....

1 vấn đề nữa là khi hệ thống quá lớn thì nhánh bên trái và nhánh bên phải sẽ đan xen vào nhau, vậy xin hỏi có cách nào giải quyết vấn đề này mà vẫn hình dung dc 2 nhánh k?
.....

anhhd37

27-09-2011, 13:45

mình tưởng trong db phải có user_id rồi tên của nó rồi tên cha của nó rồi tên con của nó.

như vậy thì khi đưa ra màn hình thì có j khó

zmt264

27-09-2011, 14:30

http://www.google.com.vn/search?q=css+sitemap
=>
http://astuteo.com/slickmap/demo/

còn vấn đề đổi vuông thành tròn và căn giữa bạn tự nghiên cứu nhé.

maicon

30-09-2011, 00:44

nếu bạn xoay cái hình về bên trái 90° thì bạn sẽ thấy nó đơn giản hơn rất nhiều :)

DotNetViet

30-09-2011, 01:03

1/ Node nào, tên gì, có bao nhiêu con, là con của ai, mình nghĩ cái này đơn jản, vì khi load node đã có id của node đó rồi
2/ Biểu diễn cấu trúc cây, mình nghĩ dùng tree view thì ổn hơn. Chứ nếu để xem kiểu ngang thế kia công sức bỏ ra để xử lý rất lớn

zmt264

30-09-2011, 01:51

nếu bạn xoay cái hình về bên trái 90° thì bạn sẽ thấy nó đơn giản hơn rất nhiều :)

1/ Node nào, tên gì, có bao nhiêu con, là con của ai, mình nghĩ cái này đơn jản, vì khi load node đã có id của node đó rồi
2/ Biểu diễn cấu trúc cây, mình nghĩ dùng tree view thì ổn hơn. Chứ nếu để xem kiểu ngang thế kia công sức bỏ ra để xử lý rất lớn

Đúng thế, tree view (giống như đa số demo ở đây: http://www.google.com.vn/search?q=css+sitemap ) là cách làm phù hợp trong trường hợp này. Nhưng nếu khách hàng bắt phải hiển thị ngang vậy thì phải dùng cách tiếp cận khác, ví dụ là dùng zoom, hoặc chấp nhận thanh scroll ngang.

ngoc_viet08

30-09-2011, 02:13

cái này từ lập trình php ra tới css và jquery ko khó. có 1 vấn đề là khi các con nhiều quá sẽ gây tràn nội dung page.
việc trước tiên là bác xác định bao nhiêu đứa con ? limit hay unlimit? nếu limit thì đủ 1 page ko?

sonnb

30-09-2011, 13:30

Cứ sinh ra không giới hạn thì kiểu gì cũng bị đầy trang :))

Phata

30-09-2011, 14:38

"1 vấn đề nữa là khi hệ thống quá lớn thì nhánh bên trái và nhánh bên phải sẽ đan xen vào nhau, vậy xin hỏi có cách nào giải quyết vấn đề này mà vẫn hình dung dc 2 nhánh k?"

đan xen là đan thế nào vậy?, mà đan xen thì sao? giờ muốn cho nó đan xen hay ko đan xen?

tạo 1 cây như thế dễ mà ? rồi bạn muốn xử lý khi mouseover thì đổ hết vô 1 cái xml hay json gì đó rồi khi mouseover thì cứ vào đó mà kiếm thằng cha...?ko thì post wa ajax luôn ...

nnquangit

01-10-2011, 01:30

Rãnh wa' ngồi viết dùm bác cái này. Mấy cái phần còn lại cũng đơn giản bác tự tìm hiểu sẽ ra ngay thui :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
<style>

#root,#root ul,#root li
{
list-style:none;
padding:0;
margin:0;
text-align:center;
white-space:nowrap;
}
#root
{
position:absolute;
left:30%;
top:0;
}
#root ul
{
width:400px;
height:40px;
line-height:40px;
position:absolute;
top:100%;
left:-175px;
}
#root li
{
display:inline-block;
width:80px;
position:relative;
margin:0 10px;
}
#root ul ul
{
display:none;
}

</style>
<ul id="root">
<li>
Root
<ul>
<li>
Human 1
<ul>
<li>Human 1 1</li>
<li>Human 1 2</li>
<li>Human 1 3</li>
<li>Human 1 4</li>
</ul>
</li>
<li>
Human 2
<ul>
<li>Human 2 1</li>
<li>Human 2 2</li>
<li>Human 2 3</li>
<li>Human 2 4</li>
</ul>
</li>
<li>
Human 3
<ul>
<li>Human 3 1</li>
<li>Human 3 2</li>
<li>Human 3 3</li>
<li>Human 3 4</li>
</ul>
</li>
<li>Human 4</li>
</ul>
</li>
</ul>
<script>
var root = $("#root").offset();
function noteOpen(ob)
{
var left = 0;
if(root.left>ob.offset().left)
left = root.left+($("#root").offset().left-ob.offset().left);
else
left = root.left-((ob.offset().left+ob.outerWidth())-$("#root").offset().left);

$("#root").animate({left:left},500,function(){
$("ul",ob.parent()).hide();
$(".open",ob.parent()).removeClass("open");

$(">ul",ob).show();
ob.addClass("open");
});
}
function noteClose(ob)
{
$("ul",ob).hide();
$(".open",ob).removeClass("open");
ob.removeClass("open");
var left = $("#root").offset().left-(ob.parent().parent().offset().left-root.left);
$("#root").animate({left:left});
}
$("li").click(function(event){
event.stopPropagation();
if($(this).hasClass("open"))
noteClose($(this));
else
noteOpen($(this));
});
</script>
</body>
</html>

zmt264

02-10-2011, 03:39

Rãnh wa' ngồi viết dùm bác cái này. Mấy cái phần còn lại cũng đơn giản bác tự tìm hiểu sẽ ra ngay thui :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
<style>

#root,#root ul,#root li
{
list-style:none;
padding:0;
margin:0;
text-align:center;
white-space:nowrap;
}
#root
{
position:absolute;
left:30%;
top:0;
}
#root ul
{
width:400px;
height:40px;
line-height:40px;
position:absolute;
top:100%;
left:-175px;
}
#root li
{
display:inline-block;
width:80px;
position:relative;
margin:0 10px;
}
#root ul ul
{
display:none;
}

</style>
<ul id="root">
<li>
Root
<ul>
<li>
Human 1
<ul>
<li>Human 1 1</li>
<li>Human 1 2</li>
<li>Human 1 3</li>
<li>Human 1 4</li>
</ul>
</li>
<li>
Human 2
<ul>
<li>Human 2 1</li>
<li>Human 2 2</li>
<li>Human 2 3</li>
<li>Human 2 4</li>
</ul>
</li>
<li>
Human 3
<ul>
<li>Human 3 1</li>
<li>Human 3 2</li>
<li>Human 3 3</li>
<li>Human 3 4</li>
</ul>
</li>
<li>Human 4</li>
</ul>
</li>
</ul>
<script>
var root = $("#root").offset();
function noteOpen(ob)
{
var left = 0;
if(root.left>ob.offset().left)
left = root.left+($("#root").offset().left-ob.offset().left);
else
left = root.left-((ob.offset().left+ob.outerWidth())-$("#root").offset().left);

$("#root").animate({left:left},500,function(){
$("ul",ob.parent()).hide();
$(".open",ob.parent()).removeClass("open");

$(">ul",ob).show();
ob.addClass("open");
});
}
function noteClose(ob)
{
$("ul",ob).hide();
$(".open",ob).removeClass("open");
ob.removeClass("open");
var left = $("#root").offset().left-(ob.parent().parent().offset().left-root.left);
$("#root").animate({left:left});
}
$("li").click(function(event){
event.stopPropagation();
if($(this).hasClass("open"))
noteClose($(this));
else
noteOpen($(this));
});
</script>
</body>
</html>

Good Idea , demo: http://jsbin.com/iyakub/2 chỉ có điều tác giả lặn mất tăm rồi nên ko biết có hợp với đề tài ko

choao.net

02-10-2011, 18:06

ÔI,chắc sắp có site TMDT theo mô hình bán hàng đa ấp rùi.Khi nào xong bác cho em xem đề mô ới nha