在网页上自动滚动特定网格视图单元格

本文关键字：网格 视图 单元格 滚动 网页 | 更新日期: 2023-09-27 18:03:41

我想知道是否有可能在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>

如果有人想自己查看它，这很好，但这是在显示器上，数据库和这个页面都是自动更新的，所以自动滚动文本在这一栏将是我能想到的最好的解决方案。如果有人知道我怎么能做到这一点，或者有另一个解决方案(包装推动一些较低的行离开屏幕，所以不工作)，它将不胜感激。

谢谢!

编辑:澄清我的问题，目前这些网格视图单元格在这一列下有滚动条手动滚动，如果需要的话。我正在寻找一种方法，使文本自动滚动通过循环(可能与javascript?)

在网页上自动滚动特定网格视图单元格

这里，我以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功能。函数在GridView中搜索所有divs，检查是否为div中的className="divCC"，如果是，则比较div和span widths。如果span比div宽，则用className代替具有动画的divCnt。

你会看到在css为animation，你可以添加infinite和动画将永远不会停止。这个例子是自动滚动文本，它比div容器宽一次。

这不是那么干净的代码，但是…

我希望这就是你需要的。

更新:jsfiddle simulation

相关文章：