ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Как сделать TreeView как на microsoft.com
6 сообщений из 6, страница 1 из 1
Как сделать TreeView как на microsoft.com
    #32638568
TJivich
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
TJivich
Участник
Никто не знает как сделать на аспнет TreeView на подобии созданного на рсдн.ру ещё с рисунками. По какому принципу он работает, как дозагружается. Хорошую вещь сделали на сайте микрософта.

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

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

Я вдруг подумал может это на flash организовать.
...
Рейтинг: 0 / 0
06.08.2004, 13:51
| Ответить | Цитировать | Написать  
Как сделать TreeView как на microsoft.com
    #32638885
VladiCh
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
VladiCh
Участник
Это не 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
06.08.2004, 15:25
| Ответить | Цитировать | Написать  
Как сделать TreeView как на microsoft.com
    #32639500
weber
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
weber
Участник
Для таких вещей есть готовые проги как Visual Folder Tree Builder 2,1 a Coalesys Panel Bar for ASP 3,0, Coalesys Panel Bar studio
...
Рейтинг: 0 / 0
07.08.2004, 12:10
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Как сделать TreeView как на microsoft.com
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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