GridView渲染后做的展开折叠效果

最新推荐文章于 2026-06-23 12:39:34 发布

转载最新推荐文章于 2026-06-23 12:39:34 发布 · 91 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/_best/archive/2011/07/22/2114255.html

本文介绍了一种通过jQuery实现的动态加载并展开类别列表的技术，具体包括使用$.ready函数监听DOM就绪事件，遍历表格数据，根据父类别ID显示或隐藏子类别项，并提供了用于切换类别的展开/折叠功能。

$(document).ready(function() {
             $("#dgvCategoryList").find("tr").slice(1).each(function(i) {
                 var cateId = $(this).attr("cateId");
                 var parentCateId = $(this).attr("parentCateId");
                 if (parentCateId.length == 0) {
                     var img = "<img src='../Content/Images/menu_plus.gif' onclick='toggleChildrenRow(this)' style='cursor:hand'></img>";
                     var cateNameDom = $($(this).find("td:first")[0]).children(":first")[0];
                     $(img).insertBefore($(cateNameDom));
                 }
                 else {
                     $(this).css("display","none");
                 }
             });
         });
         function toggleChildrenRow(imgDom) {
             var currentRow = $(imgDom).parent().parent();
             var cateId = currentRow.attr("cateId");
             var imgSrc = $(imgDom).attr("src");
             var visibly;
             if (imgSrc.indexOf("menu_plus.gif") > 0) {
                 visibly = true;
                 $(imgDom).attr("src", "../Content/Images/menu_minus.gif");
             }
             else {
                 visibly = false;
                 $(imgDom).attr("src", "../Content/Images/menu_plus.gif");
             }
             $("#dgvCategoryList").find("tr[parentCateId='" + cateId + "']").each(function(i) {
                 if (visibly == true) {
                     $(this).show("fast");
                 }
                 else {
                     $(this).hide("fast");
                 }
             });
         }