javascript - .Net 响应式 Gridview

Question

我正在使用 Bootstrap 处理一个 asp.net 站点。从 http://www.codeproject.com/Articles/547745/Add-Responsive-Behaviour-to-a-GridView-in-ASP-NET 安装了一个扩展在更新面板中处理 gridview 响应。

在笔记本电脑/个人电脑上测试时它很有效，但在通过手机实际查看带有 gridview 的页面时则无法工作。我测试的是安卓机。

它的作用:创建两个表实例，一个成为静态列，一个具有包含可滚动数据的溢出容器。

要查看使用此代码的 gridview 示例，请转到 http://dev6.web2market.com/ 。单击标题中的“我的帐户”链接。证书...用户名:testing@testing.com密码:SoTesting1!将浏览器大小调整为 600 像素或更小，以便脚本启动。源代码将显示两个表 - 静态列，然后是溢出容器中的可滚动表。

我确实可以朝正确的方向插入。我在这里发布了完整的 javascript 文件:http://jsfiddle.net/jcw2m/9fquzoxj/ 。一个小样本(需要共享 fiddle 链接):

// Detect overflow by checking the table width against that of its parent tree
        function setupResponsiveTable(table) {
            tableWidth = table.width();
            if (table.parent().hasClass(_overflowContainer)) {
                tableWidth += $('.' + _staticContainer).width();
            }

            isResponsive = false;
            table.parents().each(function () {
                if (!$(this).hasClass(_overflowContainer)
					&& tableWidth > $(this).width()
					
				) {
                    isResponsive = true;
					

                    // break out of each
                    return (false);
                }
            });

Answer 1

对于任何需要这个的人。在 jquery.responsivetable.js 中，第 118 行左右，查找以下代码块:

                table.before(tableStatic);

            table.wrap(_divClass + _overflowContainer + '" style="float:left;' + _overflow + ':scroll;' + _overflow + '-y:hidden;"/>');
            tableStatic.wrap(_divClass + _staticContainer + '" style="float:left;"/>');

            if (options.scrollHintEnabled) {
                setupScrollHint(table, tos);
            }
            //This line added courtesy Marty. The class "table" is from bootstrap. When present on the table contained in the overflow div, it causes column headers to shift to the left instead of aligning with their respective column data. jc 12/17/14 
            ***table.removeClass("table");***           
        }

最后一行“table.removeClass("table");”这就是最终实现的技巧。