.Net Responsive Gridview

时间:2014-12-17 15:27:30

标签: javascript asp.net twitter-bootstrap gridview

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

从笔记本电脑/ PC进行测试时有效,但在通过手机实际查看带有gridview的页面时无法正常工作。我测试过的是一个机器人。

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

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

我真的可以用正确的方向推动。我在这里发布了完整的javascript文件:http://jsfiddle.net/jcw2m/9fquzoxj/。一小部分样本(需要分享小提琴链接):



// 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);
                }
            });




1 个答案:

答案 0 :(得分: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");"最终做到了这一点。