先看下图：
这个是在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的属性值了.
大家有什么见解直说哈，，，，
