zoukankan      html  css  js  c++  java
  • 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的属性值了.

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

  • 相关阅读:
    Javascript知识汇总------手写图片上传插件
    Javascript知识汇总------面向对象手写弹窗插件
    Javascript知识汇总------面向对象手写拖拽插件
    Javascript知识汇总------获取构造函数constructor名称和一些字符串处理方法
    博客搬家啦
    NOI 2015 荷马史诗【BZOJ 4198】k叉Huffman树
    BZOJ 1044 木棍分割 解题报告(二分+DP)
    BZOJ 1051 最受欢迎的牛 解题报告
    BZOJ 2467 解题报告
    BZOJ 4619 Swap Space 解题报告
  • 原文地址:https://www.cnblogs.com/KimhillZhang/p/2699426.html
Copyright © 2011-2022 走看看