自動滾動網頁上的特定gridview單元格

我想知道是否可以在asp.net/c#中的gridview中自動滾動單元格的特定列（從左到右）。自動滾動網頁上的特定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）我正在尋找一種方法，使通過自動文本滾動環路上

來源

2015-07-20 msd94

喜歡這個？ http://stackoverflow.com/questions/10547797/very-simple-very-smooth-javascript-marquee –

在這裏，我用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，檢查是className="divCC"的div。如果是，則比較div和spanwidths。如果span比div更寬className被替換爲具有動畫的divCnt。

您會在css中看到animation您可以添加infinite並且動畫永遠不會停止。這個例子是自動滾動文本，它只有一個容器，容器的尺寸大於div。

這是不那麼幹淨的代碼，但是...

我希望如此，這是你所需要的。

更新：jsfiddle simulation

來源

2015-07-20 17:37:18 nelek

這個問題，如果我理解它，它會動畫每個細胞大於一定大小的整個gridview它會不會？我需要它在「QA Msg」列中的單元格上進行動畫處理。有沒有什麼方法可以讓它動畫化單個列？ – msd94

@ user3361936是的，僅在'QA Msg'列中使用'divCC'類。'js'將會檢查''span'標籤'並且''divCC'類的'div'的子節點。其他的'div'（誰沒有'divCC'類）將不會繼續。對於不需要動畫的其他列，可以放置其他'class' **，但不要放入''divCC'。 – nelek

自動滾動網頁上的特定gridview單元格

回答

相關問題