使用刪除空列的 OnDataBound 事件為動態創建的 GridView 表動態顯示和隱藏 jQuery DataTables 列

Question

我知道這個問題有很多，但我認為這對於我想要完成的事情都是必要的。

使用 jQuery DataTables 動態顯示/隱藏列使用 API 相當簡單：請參閱：示例但是，我沒有看到動態顯示和隱藏列的示例，用於動態創建的 GridView 用於隱藏未使用的表/列。 例如，如果我不知道將顯示哪些列（當某些列因不存在數據而被隱藏時），我無法使用一組列名對 HTML（用於切換列的開/關）進行硬編碼。 所以，我假設我需要用占位符動態創建 HTML？ 這個過程會發生在 OnDataBound 事件中嗎？

我的 WebForms 應用程序有許多包含許多列的表，即使我事先知道哪些列將具有值，手動為每個表和列創建 HTML 也會很痛苦。

這是我的 OnDataBound 事件的示例，它隱藏了未使用的列：

protected void tblAccount_DataBound(object sender, EventArgs e)
    {
        try
        {
            Boolean hasData = false;
            for (int col = 0; col < tblAccount.HeaderRow.Cells.Count; col++)
            {
                if (tblAccount.Columns[col] is HyperLinkField || tblAccount.Columns[col] is TemplateField)
                {
                    continue;
                }

                for (int row = 0; row < tblAccount.Rows.Count; row++)
                {
                    if (!String.IsNullOrEmpty(tblAccount.Rows[row].Cells[col].Text) && !String.IsNullOrEmpty(HttpUtility.HtmlDecode(tblAccount.Rows[row].Cells[col].Text).Trim()))
                    {
                        hasData = true;
                        break;
                    }
                }

                if (!hasData)
                {
                    tblAccount.HeaderRow.Cells[col].Visible = false;
                    for (int hiddenrows = 0; hiddenrows < tblAccount.Rows.Count; hiddenrows++)
                    {
                        tblAccount.Rows[hiddenrows].Cells[col].Visible = false;
                    }
                }

                hasData = false;
            }
        }
        catch (Exception ex)
        {

        }
    }

和腳本：

$(document).ready(function () {
    var Table1 = $("[id*=tblAccount]").prepend($("<thead></thead>").append($("[id*=tblAccount]").find("tr:first"))).DataTable({
                    "paging": true,  
                });

                $('a.toggle-vis').on('click', function (e) {
                    e.preventDefault();

                    // Get the column API object
                    var column = Table1.column($(this).attr('data-column'));

                    // Toggle the visibility
                    column.visible(!column.visible());
                });
})

用於切換列的 HTML 看起來像這樣，但同樣需要動態生成：

Toggle column: <a class="toggle-vis" data-column="0">Account Number</a> - <a class="toggle-vis" data-column="1">Account Status</a> - <a class="toggle-vis" data-column="2">Account Name</a> - <a class="toggle-vis" data-column="3">And so on</a> - <a class="toggle-vis" data-column="4">and so on</a>

Answer 1

如果你想用 javascript 切換可見性，你可能不應該做任何隱藏 OnDataBound。 相反， OnDataBound 您可以為每一列添加一個切換鏈接到頁面（通過將其添加到轉發器或文字或其他任何內容），然后如果該列是空的並且需要隱藏，則可以添加 class 或它的某種財產。 然后寫一些 javascript 在頁面加載時將搜索具有該屬性的任何列並默認隱藏它。