javascript - 可折叠/可展开的表格行为

Question

需要一些 jquery/js/jsp 功能的帮助..

我有一个可折叠的表格脚本:

(function($){ 
 $.fn.extend({  
     setupCollapstable: function(options) { 
         var defaults = { 
                displayStyle: "Image",
                autoCheckbox: true,
                toggleMinus: "/resource/images/collapse_close.gif",
                togglePlus: "/resource/images/collapse_open.gif"
        }; 

        var options = $.extend(defaults, options);

        var toggleMinus = options.toggleMinus 
        var togglePlus = options.togglePlus

        return this.each(function() { 

            //Creating a reference to the object 
            var obj = $(this);

            //Break out the individual tbody elements
            var rowGroups = $('tbody', obj);

            //Loop through every tbody to setup collapsable and click events
            $.each( rowGroups, function( intIndex, objValue ){

                parentRow = $('th:first-child', objValue);
                childCount = parentRow.parent().siblings().length;

                if (childCount != 0) {
                    //console.log ("ParentRow: " + parentRow + " - ChildCount is: " + childCount);

                    parentRow.prepend('<img src="' + togglePlus + '" alt="collapse this section" />');

                    parentRow.parent().siblings().fadeOut('fast');

                    $('img', parentRow).addClass('clickable').click(function(e) {
                        e.preventDefault();
                        var toggleSrc = $(this).attr('src');

                        if ( toggleSrc == toggleMinus ) {
                            $(this).attr('src', togglePlus).parents('tr').siblings().fadeOut('fast');
                        } else{
                            $(this).attr('src', toggleMinus).parents('tr').siblings().fadeIn('fast');
                        };
                    });

                    var parentCheckbox = $(':checkbox', parentRow.siblings())

                    var childCheckboxes = $(':checkbox', parentRow.parent().siblings());

                    parentCheckbox.click(function(e){

                        var checked_status = parentCheckbox.attr('checked')?1:0;

                        childCheckboxes.each(function(){
                            this.checked = checked_status;          
                        });
                    });

                } else {
                    parentRow.addClass("indented");
                }

            });
                //console.dir (objValue);

        }); 
    } 
}); 
})(jQuery);

在我的 JSP 中，我这样调用它......

<script type="text/javascript" src="/resource/js/jquery.collapstable.js"></script>
     <script type="text/javascript">
        $(document).ready(function(){
            $('table.collapstable').setupCollapstable();
        });
     </script>

用法:

<table class="collapstable NoTableBorder">

当我单击图像图标时，表格会正确折叠和展开，但是我希望如果选中某个复选框(在 JSP 上)，它会首先展开。

所以我将为该复选框输入提供一个 onclick="showOrHide()"函数，该函数将折叠或展开表格。

我已附加图像以进行视觉表示，折叠表是“+/-”图标(位于粗体 VISA 标题旁边)，而决定是否应展开显示的复选框是“事件” “复选框..

对此的任何帮助都会很棒......

Answer 1

您可以在折叠/展开函数调用之前添加条件

 <script type="text/javascript">
    $(document).ready(function(){
        if (checkboxname.checked){
            // Set flags to show the table expanded
        }else{
            // Set flags to show the table collapsed
        }
        $('table.collapstable').setupCollapstable();
    });
 </script>