Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Как сделать TreeView как на microsoft.com / 6 сообщений из 6, страница 1 из 1
06.08.2004, 13:28
    #32638568
TJivich
TJivich
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать TreeView как на microsoft.com
Никто не знает как сделать на аспнет TreeView на подобии созданного на рсдн.ру ещё с рисунками. По какому принципу он работает, как дозагружается. Хорошую вещь сделали на сайте микрософта.

Вообщем кидайте ссылки и идеи.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.08.2004, 13:35
    #32638586
VladiCh
VladiCh
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать TreeView как на microsoft.com
динамическая подгрузка XML через MSXML + применение к нему XSLT и вставка результата в нужное место. Вот собственно и весь принцип.
На microsoft.com и rsdn.ru не очень красивое дерево, без вертикальных линий (как например стандартное TreeView), есть htc-компонент с такими линиями, но там все довольно криво сделано (генерация линиц не на уровне xslt, а на уровне JavaScript в htc), так что я например написал свой аналогичный компонент - проще и удобнее.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.08.2004, 13:43
    #32638608
Hermitap
Hermitap
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать TreeView как на microsoft.com
авторVladiCh Очень бы хотелось бы посмотреть на Ваш компонент в исходниках в качестве самообразования.Ну и пользоватся.
Если это конечно для Вас не коммерческая ценность.

Если это возможно, киньте мне в мыло. ap@print.blitz.kiev.ua
Заранее спасибо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.08.2004, 13:51
    #32638635
TJivich
TJivich
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать TreeView как на microsoft.com
А компонетом не поделишся плиззз!!!
Или может даш ссылку такого на JavaScripte - мне это в принципе подойдёт.

Я вдруг подумал может это на flash организовать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.08.2004, 15:25
    #32638885
VladiCh
VladiCh
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать TreeView как на microsoft.com
Это не ASP.NET компонент, а просто набор JavaScript-функций + xslt.

я приведу несколько примеров просто для иллюстрации:

test.xml - тестовые данные для дерева.
controltree.xsl - xsl для первичной отрисовки дерева
subtree.xsl - xsl для подгрузки дерева

подгрузка производится в методе Click - xml.load(...) - надо заменить url на url, по которому лежит xml для подгрузки.
картинки типа l-.gif, t-.gif надо нарисовать самостоятельно или взять из компонента TreeView Web control.
Если нужна только подгрузка и отрисовка дерева, то проще использовать такой самописный компонент, если нужна манипуляция элементами дерева из JavaScript, то лучше использовать Microsoftовский TreeView web control - там есть для этого средства.

controltree.xsl:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" encoding="windows-1251"/>

<xsl:template match="TreeView">
  <html>
  <head>
<style>
span {
	font-family:Tahoma;font-size: 12px; 
}
.selected
{
	padding: 1   2   1   1 ;color:highlighttext; background-color: highlight; cursor: hand;
}
.normal
{
	padding: 1   2   4   1 ;color:windowtext; background-color: transparent; cursor: hand;
}
img.image
{
	margin: 1   3   3   0 ;
}
</style>
<script>
<![CDATA[
function Click(obj)
{
	// текущий td с картинкой
	var td = obj.parentElement;
	// td с текстом
	var newtd = td.parentElement.cells[td.cellIndex+ 1 ];
	// Подгрузка дерева
	var img = newtd.children[ 0 ].children[ 0 ];
	if (obj.status=="collapse")
	{
		if (obj.last=="yes")
			obj.src = "i/l-.gif"
		else
			obj.src = "i/t-.gif";

		img.src = obj.ExpandedImageUrl;
		
		if (newtd.children[ 1 ]+""!="undefined")
		{
			newtd.children[ 1 ].style.display = "block";
		}
		else
		{
			var xml = new ActiveXObject("Microsoft.XMLDOM");
			xml.async = false;
			xml.load("...");
			
			var xsl = new ActiveXObject("Microsoft.XMLDOM");
			xsl.async = false;
			xsl.load("Controls/Tree/subtree.xsl");
			res = xml.transformNode( xsl );
			var span = document.createElement("SPAN");
			span.innerHTML = res;
			newtd.insertBefore(span);
		}

		obj.status = "expand";
		UnSelectAll();
	}
	else
	{
		if (obj.last=="yes")
			obj.src = "i/l+.gif"
		else
			obj.src = "i/t+.gif";
		// удаляем span с поддеревом
		newtd.children[ 1 ].style.display = "none";
		img.src = obj.ImageUrl;
		obj.status = "collapse";
	}
}
]]>
</script>
</head>
<body bgcolor="window" marginwidth="2" marginheight="2" leftmargin="2" topmargin="2">
	<form name="form" method="get" target="CataloguePage" onSubmit="return Submit(this)">
	  <table  border="0" cellspacing="0" cellpadding="0">
		<xsl:apply-templates/>
	  </table>	
	</form>
  </body>
  </html>
</xsl:template>

<xsl:include href="treenode.xsl" />

</xsl:stylesheet>


treenode.xsl:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
<?xml version="1.0" encoding="windows-1251"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" encoding="windows-1251"/>

<xsl:template match="TreeNode">
	<tr >
		<td width="20px" height="16px" valign="top" >
		<xsl:if test="position()!=last()"><xsl:attribute name="background">i/i.gif</xsl:attribute></xsl:if>
		<img border="0" alt="" onclick="Click(this); return false;" ItemId="{@ItemId}" ItemType="{@ItemType}" ExpandedImageUrl="{@ExpandedImageUrl}" ImageUrl="{@ImageUrl}" status="collapse" >
		<xsl:attribute name="name"><xsl:value-of select="@name" /></xsl:attribute><xsl:attribute name="folder"><xsl:value-of select="/Tree/@folder" /></xsl:attribute>
		<xsl:choose>
			<! -- Если есть дочерние элементы --> 
			<xsl:when test="TreeNode">
				<xsl:attribute name="status">expand</xsl:attribute>
				<xsl:choose>
					<xsl:when test="position()=last()">
						<xsl:attribute name="src">i/l-.gif</xsl:attribute>
						<xsl:attribute name="last">yes</xsl:attribute>
					</xsl:when>
					<xsl:otherwise>
						<xsl:attribute name="src">i/t-.gif</xsl:attribute>
					</xsl:otherwise>
				</xsl:choose>
			</xsl:when>
			<xsl:otherwise>
				<xsl:choose>
					<xsl:when test="position()=last()">
						<xsl:choose>
							<xsl:when test="@folder">
								<xsl:attribute name="src">i/l+.gif</xsl:attribute>
							</xsl:when>
							<xsl:otherwise>
								<xsl:attribute name="src">i/l.gif</xsl:attribute>
							</xsl:otherwise>
						</xsl:choose>
						<xsl:attribute name="last">yes</xsl:attribute>
					</xsl:when>
					<xsl:otherwise>
						<xsl:choose>
							<xsl:when test="@folder">
								<xsl:attribute name="src">i/t+.gif</xsl:attribute>
							</xsl:when>
							<xsl:otherwise>
								<xsl:attribute name="src">i/t.gif</xsl:attribute>
							</xsl:otherwise>
						</xsl:choose>
					</xsl:otherwise>
				</xsl:choose>
			</xsl:otherwise>
		</xsl:choose>
		</img>
		</td>
		<td >
			<span onclick="NodeSelect(this); Submit(form); form.submit()" ItemId="{@ItemId}" ItemType="{@ItemType}"  style="white-space:nowrap;">
				<img src="{@ImageUrl}" align="absmiddle" vspace="0" border="0" class="image" >
				<xsl:if test="TreeNode">
					<xsl:attribute name="src"><xsl:value-of select="@ExpandedImageUrl" /></xsl:attribute>
				</xsl:if>
				</img>
				<span class="normal" ><xsl:value-of select="@Text" /></span>
			</span>
			<xsl:if test="TreeNode">
				<table  border="0" cellspacing="0" cellpadding="0" >
					<xsl:apply-templates/>
				</table>	
			</xsl:if>
		</td> 
	</tr>
</xsl:template>

</xsl:stylesheet>

subtree.xsl

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<?xml version="1.0" encoding="windows-1251"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" encoding="windows-1251"/>

<xsl:template match="TreeView">
  <table border="0" cellspacing="0" cellpadding="0">
  <xsl:apply-templates/>
  </table>	
</xsl:template>

<xsl:include href="treenode.xsl" />

</xsl:stylesheet>


test.xml:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<?xml version="1.0" encoding="windows-1251" ?> 
<?xml-stylesheet type="text/xsl" href="controltree.xsl" ?>
<TreeView action="" id="" Module="" context="">
<TreeNode ImageUrl="treeicons/catalogue.gif" TreeNodeSrc="GetCatalogue.aspx?Id=1" Text="Category1" ExpandedImageUrl="treeicons/catalogue_expanded.gif" Target="ContentFrame" NavigateUrl="ContentFrame.aspx?id=1&context=2" ItemId="1"> 
<TreeNode ImageUrl="treeicons/catalogue.gif" TreeNodeSrc="GetCatalogue.aspx?Id=1" Text="Category2" ExpandedImageUrl="treeicons/catalogue_expanded.gif" Target="ContentFrame" NavigateUrl="ContentFrame.aspx?id=2&context=2" ItemId="2" /> 
<TreeNode ImageUrl="treeicons/catalogue.gif" TreeNodeSrc="GetCatalogue.aspx?Id=1" Text="Category3" ExpandedImageUrl="treeicons/catalogue_expanded.gif" Target="ContentFrame" NavigateUrl="ContentFrame.aspx?id=3&context=2" ItemId="3" /> 
<TreeNode ImageUrl="treeicons/catalogue.gif" TreeNodeSrc="GetCatalogue.aspx?Id=1" Text="Category4" ExpandedImageUrl="treeicons/catalogue_expanded.gif" Target="ContentFrame" NavigateUrl="ContentFrame.aspx?id=4&context=2" ItemId="4" /> 
</TreeNode>
<TreeNode ImageUrl="Controls/Tree/treeicons/catalogue.gif" TreeNodeSrc="GetCatalogue.aspx?Id=1" Text="Category5" ExpandedImageUrl="treeicons/catalogue_expanded.gif" Target="ContentFrame" NavigateUrl="ContentFrame.aspx?id=5&context=2" ItemId="5" /> 
<TreeNode ImageUrl="Controls/Tree/treeicons/catalogue.gif" TreeNodeSrc="GetCatalogue.aspx?Id=1" Text="Category6" ExpandedImageUrl="treeicons/catalogue_expanded.gif" Target="ContentFrame" NavigateUrl="ContentFrame.aspx?id=6&context=2" ItemId="6" /> 
</TreeView>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.08.2004, 12:10
    #32639500
weber
weber
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать TreeView как на microsoft.com
Для таких вещей есть готовые проги как Visual Folder Tree Builder 2,1 a Coalesys Panel Bar for ASP 3,0, Coalesys Panel Bar studio
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Как сделать TreeView как на microsoft.com / 6 сообщений из 6, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]