使用删除空列的 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 在页面加载时将搜索具有该属性的任何列并默认隐藏它。