可折叠/可扩展的表行为

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（）”函数，它会折叠或展开表格。

我附加了一个图像用于可视化表示，collpase表是“+/-”图标（在粗体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>