DataList實現摺疊效果

2021-09-06 03:19:04 字數 2946 閱讀 9912

先看圖:

這個功能可以用後台管理中(區域的繫結,商品大類,商品小類,商品資訊的管理);

實現原理如下:

先建設乙個資料表如:高校欄目表

截圖如下:

parentid儲存父id的節點,childid儲存子id的節點,

如果某一行中的parentid不為空,子節點為空,說明此行為父節點;而子節點的parentid對應相應的父節點。

1

<

div>

2<

asp:datalist id="

datalist1

"runat="

server

"onitemdatabound="

datalist1_itemdatabound

">

3<

headertemplate

>

4<

table

>

5<

thead style="

background-color:silver

">

6<

td width="

50px

">7操作

td>

8<

td width="

100px

">9名稱

td>

10<

td >

11時間

td>

12thead

>

13headertemplate

>

14<

itemtemplate

>

15<

tr style="

background-color:#cccccc

">

16<

td align="

left

"width="

50px

">

17<

img src="

expand.gif

"onclick="

expand('id1_

") %>')

"/>

18td

>

19<

td align="

left

"width="

100px

">

20#eval(

"name")

%>

21td

>

22<

td align="

left

"width="

100px

">

23#eval(

"dataof",

"")%>

24td

>

25tr

>

26<

tr id="

id1_

") %>

"style="

display:none; background-color:infobackground

">

27<

td colspan="

3">

28<

asp:datalist id="

datalist2

"runat="

server

">

29<

itemtemplate

>

30<

tr>

31<

td align="

left

"width="

50px

">

32<

img src="

collapse.gif

"/>

33td

>

34<

td align="

left

"width="

100px

">

35#eval(

"name")

%>

36td

>

37<

td align="

left

"width="

100px

">

38#eval(

"dataof",

"") %>

39td

>

40tr

>

41itemtemplate

>

42asp:datalist

>

43td

>

44tr

>

45itemtemplate

>

46<

footertemplate

>

47table

>

48footertemplate

>

49asp:datalist

>

50div

>

可以看到 用到了兩個datalist資料控制項,且用table布局(用div布局也可以);

最主要的一點 可以看到 第二個標籤中 設定其id="id1_",這是因為符合條件的資料可能顯示多行,只能給其起乙個不同的名字作為id,

為方便操作,所以就用這種方式。

//js**如下:

function expand(a)

else

} 後台**就很平常啦!,在onitemdatabound事件中,做了對第二個datalist資料控制項的繫結操作。

這個不會出現展開或摺疊節點是,發生資料的回發。

DataList初識及實現分頁效果11 25

datalist是一種純模板控制項!靈活性比gridview靈活許多,但是相對應的 量也增加了許多!今天學習了datalist控制項的使用!貼一下基本的使用方法!希望對大家有所幫助!前台 aspx page language c autoeventwireup true codefile defau...

文字摺疊效果

人的志向通常和他們的能力成正比例。詹森 建乙個div盒子讓其旋轉一定角度,使其有一定的傾斜效果 通過雙偽元素建兩個相同的樣式,通過clip path屬性分別擷取上半部分和下半部分,並定位使其與原div盒子層疊 新增滑鼠移入效果,通過一定的旋轉和傾斜來實現摺疊時的效果 乙個div盒子在底層不動,讓偽元...

datalist實現分頁

原檔案test.aspx test.aspx.cs檔案 using system using system.data using system.configuration using system.collections using system.web using system.web.secur...