10/10/2018, 11:28

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

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

Xin vui lòng xem hình này trước:

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 viết 13:37 ngày 10/10/2018

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 viết 13:34 ngày 10/10/2018

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 viết 13:38 ngày 10/10/2018

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 viết 13:38 ngày 10/10/2018

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 viết 13:39 ngày 10/10/2018

Được gửi bởi maicon

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

Được gửi bởi DotNetViet

Đú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 viết 13:30 ngày 10/10/2018

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 viết 13:29 ngày 10/10/2018

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

Phata viết 13:39 ngày 10/10/2018

"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 viết 13:32 ngày 10/10/2018

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

Code:

<!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>

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

php_code

0 chủ đề

0 bài viết

Tác giả nổi bật