Asp.net Repeater實現樹伸縮功能

先看：

這個是在DTCMS的基礎上實現的，因為分類太多，需要伸縮起來，

其實我的這個執行個體還存在很多問題，在這裡只是提供一個思路供大家參考參考。

實現的機制就是在每個<tr>標籤上添加一些屬性，如下：

 <tr meid="true" id='tr_<%#Eval("Id") %>' style=" cursor:pointer;"  children='<%#Eval("Column1") %>'   onclick="getChild('<%#Eval("Id") %>')">

添加一個該類別的Id，添加一個該類別下有多少個子Id，並以逗號隔開，如 id='1' children='2,3,4,5'       

onclick是當點擊時觸發。就把所有children的節點Id全部設定屬性（顯示或隱藏）。 meid表示當前是否是開啟還是收縮

 

這樣定義好後就可以寫JS代碼了，這裡需要通過遞迴的方式來實現，如下JS代碼：

 

var isExpend = true;
   function showHidden(idList, isExpend) {
       if (typeof idList == "undefined") {
             return;
        }
       var array = idList.split(',');
       for (var i = 0; i < array.length; i++) {
           var id = array[i].toString();
           getChild(id);
           if (isExpend == "false") {
               $("#tr_" + array[i].toString()).css({ "display": "none" });//收縮
           }
           if (isExpend == "true") {
               $("#tr_" + array[i].toString()).css({ "display": "block" });//展開
           }
       }
   }
   function getChild(id) {
       var list = $("#tr_" + id).attr("children");
       if ($("#tr_" + id).attr("meid") == "true") {
           if ($("#tr_" + id).find("td").eq(1).find("img").size() == 1) {//如果是主根節點，他就一個圖片；
               $("#tr_" + id).find("td").eq(1).find("img").eq(0).attr("src", "../images/folder.gif");
           }
           $("#tr_" + id).find("td").eq(1).find("img").eq(1).attr("src", "../images/folder.gif");
           $("#tr_" + id).attr("meid", "false");
           showHidden(list, "false");
       }
       else {
           $("#tr_" + id).attr("meid", "true");
           if ($("#tr_" + id).find("td").eq(1).find("img").size() == 1) {
               $("#tr_" + id).find("td").eq(1).find("img").eq(0).attr("src", "../images/folder_open.gif");
           }
           $("#tr_" + id).find("td").eq(1).find("img").eq(1).attr("src", "../images/folder_open.gif");
           showHidden(list, "true");
       }
}

在這裡也寫出SQL語句：

select A.Id,Title,ParentId,ClassList,ClassLayer,SortId,PageUrl,KindId,ImgUrl,Descript,RedZhaiyao,(select Convert(varchar(20),B.Id)+',' from dt_Channel B where B.ParentId=A.Id ORDER BY B.Id For xml path('')) from dt_Channel A where KindId=4

這裡需要把該節點下有多個少子節點全部以單個欄位的形式顯示出新的列，比如：

id         title   parentId   

1           a          0

2           a1        1

3           a2        1

4           a3        1

那麼得得出

id      title     parentId      column1

1        a           0               2,3,4

這個2,3,4就是children的屬性值了.

 

 

大家有什麼見解直說哈，，，，