Question

我想知道是否可以在asp.net/c＃中的gridview中自动滚动特定的单元格列（从左到右）。

我有一个从数据库填充的gridview，并且有一个列可以包含从1个字符到100个字符的任何单元格。所有其他列的长度非常接近（最多只变化2-3个字符）。对于本专栏，我现在就这样做了

        <ItemTemplate>
           <div style ="overflow: auto;">
           <asp:Label ID="Label7" runat="server" Text='<%# Bind("[QA Msg]") %>' Width="100"></asp:Label>
           </div>
        </ItemTemplate>

如果有人想要自己查看它，这很好，但这是在显示器上，数据库和此页面都会自动更新，因此自动滚动此列中的文本将是我能想到的最佳解决方案。如果有人知道我该怎么做，或者有另一种解决方案（包裹将一些较低的行推离屏幕以便不起作用），我们将不胜感激。

谢谢！

编辑：澄清我的问题，目前这列下面的gridview单元格有滚动条，可以根据需要手动滚动。我正在寻找一种方法让文本在循环中自动滚动（可能使用javascript？）

Answer 1

在这里，我使用css和js

制作了示例

CSS

.divCC 
{
   width:100px; white-space:nowrap; overflow:hidden;
}
.divCnt
{
  width: 100px; white-space: nowrap;
  overflow: hidden;
  box-sizing:border-box;
  animation:marquee 5s linear; /*infinite*/
}
@keyframes marquee 
{
  0%   { text-indent: 0px }
  100% { text-indent: -100px }
}

js：

function animDiv() {
            var pp = document.getElementById('gvQAMsg').getElementsByTagName('div');
            if (pp != null) {
                for (var i = 0; i < pp.length; i++) {
                    if (pp[i].className == 'divCC') {
                        var rr = pp[i].getElementsByTagName('span');
                        if (rr[0].offsetWidth > pp[i].clientWidth) {
                            pp[i].className = 'divCnt';
                        }
                    }
                }
            }
        }

html：

<body onload="animDiv();">
<asp:GridView ID="gvQAMsg" runat="server" AutoGenerateColumns="False" EnableModelValidation="True" DataSourceID="*your_SqlDataSource*" > 
     <Columns>
      <asp:TemplateField HeaderText="QA Msg" SortExpression="[QA Msg]">
        <ItemTemplate>
         <div class="divCC">
          <asp:Label ID="Label7" runat="server" Text='<%# Bind("[QA Msg]")%>'></asp:Label>
          </div>
          </ItemTemplate>
        </asp:TemplateField>  
     </Columns>
    </asp:GridView>
</body>

我不知道如何在没有js的情况下实现这一目标。

所以，onload启动animDiv功能。功能搜索divs内的所有GridView，检查div的className="divCC"。如果是，请比较div和span widths。如果span宽于div className替换为具有动画的divCnt。

您会在css中看到animation您可以添加infinite，动画将永不停止。此示例使用自动滚动文本，该文本仅比div容器宽一次。

这不是那么简洁的代码，但是......

我希望这就是你所需要的。

更新：jsfiddle simulation

在网页上自动滚动特定的gridview单元格

1 个答案: