可凍結式GridView強化版: 隱藏、跳列、尋找

    <script type="text/javascript">

        $(function() {

            //在表格裡塞入選取欄位

            $("#GridView1 th:nth-child(1)")

            .after("<th><input type='checkbox' id='cbxSelAll' /></th>");

            $("#GridView1 td:nth-child(1)")

            .after("<td><input type='checkbox' class='clsHideCbx' /></td>");

            //配合SuperTable的多Table同步處理，加上列號

            $("#GridView1 tr").each(function(i) {

                $(this).attr("rowidx", i)

                .find("td").each(function(j) {

                    $(this).attr("pos", i + "_" + j);

                });

            });

            //設定SuperTable

            $("#GridView1").toSuperTable({ width: "640px", height: "480px", fixedCols: 3 })

            .find("tr:even").addClass("altRow");

            //加上全選/全不選功能(.sFHeader為配合SuperTable才加)

            $(".sFHeader #cbxSelAll")

            .click(function() {

                if (this.checked)

                    $(".clsHideCbx").attr("checked", "checked");

                else

                    $(".clsHideCbx").removeAttr("checked");

            });

            //加上隱藏/顯示功能

            $("#btnHide,#btnShowAll").click(toggleRow);

            //隱藏/顯示共用一個事件，由evt.target判別按的是哪一顆

            function toggleRow(evt) {

                var show = (evt.target.id == "btnShowAll");

                var rowSet = (show) ?

                    $(".sFData tr:not(:visible)") : $(".sFData .clsHideCbx:checked").closest("tr");

                rowSet.toggle(show)

                //一般情況到hide()即可，以下這段是為了SuperTable而加的

                //把捲動區裡那一份<table>對應的資料列也同步藏起來

                .each(function() {

                    $(".sData tbody tr[rowidx=" + $(this).attr("rowidx") + "]").toggle(show);

                });

                $(".sData tbody").find(".altRow").removeClass("altRow")

                .end().find("tr:visible:even").addClass("altRow");

                //修正IE隱藏結尾會不齊的問題

                if ($.browser.msie) {

                    var fixedColZone = $(".sFDataInner");

                    var cellZone = $(".sData table");

                    var p1 = fixedColZone.offset().top;

                    var p2 = cellZone.offset().top;

                    if (p1 != p2) {

                        fixedColZone.css("top", (p2 - fixedColZone.parent().offset().top) + "px");

                    }

                }

            }

            function getPosVal(s) {

                return parseInt(s.replace("px", ""));

            }

            $("#btnScroll").click(function() {

                scrollToRow($("#rowIdx").val());

            });

            //捲動到指定列數

            function scrollToRow(rowIdx) {

                //IE下有一列的位移，鋸箭法校正

                if ($.browser.msie && !isNaN(rowIdx))

                    rowIdx = parseInt(rowIdx) - 1;

                var x = $(".sData tr[rowidx=" + rowIdx + "]");

                if (x.length > 0) {

                    //alert($(".sData").scrollTop() + "," + x.position().top);

                    $(".sData").scrollTop(

                        $(".sData").scrollTop() +

                        x.position().top);

                }

            }

            //捲動到指定的欄數

            function scrollToCol(colIdx) {

                var x = $(".sData td:eq(" + colIdx + ")");

                $(".sData").scrollLeft($(".sData").scrollLeft() + x.position().left);

            }

            //保留所有Cell的集合

            var allCells = $(".sData #GridView1 td");

            $("#btnFind").click(function() {

                var keywd = $("#keywd").val();

                //先找到上次的焦點

                var focusIdx = 0;

                var hasPrevFocus = false;

                allCells.filter("td[findfocus]").each(function() {

                    focusIdx = allCells.index(this);

                    //將focus移除

                    $(this).removeAttr("findfocus")

                    //去除Highlight

                    .html($(this).text());

                    hasPrevFocus = true;

                });

                //由焦點開始往後找

                allCells.filter("td:gt(" + focusIdx + ")")

                .each(function() {

                    var td = $(this);

                    if (td.text().indexOf(keywd) > -1) {

                        var p = td.attr("pos").split("_");

                        scrollToRow(p[0]);

                        var cell = allCells.filter("td[pos=" + td.attr("pos") + "]");

                        cell.attr("findfocus", "true")

                        .html(cell.text().replace(keywd, 

                            "<span style='background-color:yellow;'>" + keywd + "</span>"));

                        scrollToCol(p[1]);

                        return false;

                    }

                });

                if (!allCells.is("td[findfocus]")) {

                    if (hasPrevFocus) {

                        if (confirm("已搜尋至結尾，要從頭開始再找一次嗎?"))

                            $("#btnFind").click();

                    } else

                        alert("找不到指定的關鍵字!");

                }

            });

        });

    </script>

    <style type="text/css">

    .clsLinkButton  

    { font-size: 9pt; cursor: pointer; text-decoration: underline; color: Blue; }

    #rowIdx { width: 20px; text-align: right; }

    #spnCmdBar { font-size: 9pt; margin-left: 15px; }

    </style>

</head>

<body>

<span id="spnCmdBar">

關鍵字: <input type="text" id="keywd" style="width: 80px;" /> 

<input type="button" id="btnFind" value="尋找" />&nbsp;

移至第<input type="text" id="rowIdx" value="1" />列 

<input type="button" value="捲動吧! 表格" id="btnScroll" /></span>

<span id="btnHide" class="clsLinkButton" style="margin-left: 150px;">隱藏選取列</span>

<span id="btnShowAll" class="clsLinkButton">顯示全部</span>