• 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的属性值了.

    大家有什么见解直说哈,,,,

  • 相关阅读:
    GlusterFS 配置及使用
    zabbix-监控Linux服务器
    ansible安装及使用
    使用ansible 完成yum安装lamp环境
    mysql基础
    shell基础
    shell
    Javascript动画效果(四)
    Javascript动画效果(三)
    Javascript动画效果(二)
  • 原文地址:https://www.cnblogs.com/KimhillZhang/p/2699426.html
Copyright © 2020-2023  润新知