可折疊/可擴展表行為

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>