gridview指定某一列滚动

//基本代码设计

<div id="div-datagrid">
<asp:DataGrid id="DataGrid1" runat="server" CssClass="Grid" UseAccessibleHeader="True">
    <AlternatingItemStyle CssClass="GridAltRow"></AlternatingItemStyle>
    <ItemStyle CssClass="GridRow"></ItemStyle>
    <Columns>
    <asp:BoundColumn DataField="Name" HeaderText="Name"
        ItemStyle-Wrap="False"></asp:BoundColumn>
    <asp:BoundColumn DataField="Address" HeaderText="Address"
        ItemStyle-Wrap="False"></asp:BoundColumn>
    <asp:BoundColumn DataField="City" HeaderText="City"
        ItemStyle-Wrap="False"></asp:BoundColumn>
    <asp:BoundColumn DataField="State" HeaderText="State"
        ItemStyle-Wrap="False"></asp:BoundColumn>
    <asp:BoundColumn DataField="Zip" HeaderText="Zip"
        ItemStyle-Wrap="False"></asp:BoundColumn>
    <asp:BoundColumn DataField="Random Babble"
        HeaderText="Random Babble"
        ItemStyle-Wrap="False"></asp:BoundColumn>
    </Columns>
</asp:DataGrid>
</div>

 

//可以给一个按钮触发lockCol('');

function lockCol(tblID) {
  var table = document.getElementById(tblID);
  var button = document.getElementById('toggle');
  var cTR = table.getElementsByTagName('tr');  //collection of rows

  if (table.rows[0].cells[0].className == '') {
    for (i = 0; i < cTR.length; i++)
    {
    var tr = cTR.item(i);
    tr.cells[0].className = 'locked'
    }
    button.innerText = "Unlock First Column";
  } else {
    for (i = 0; i < cTR.length; i++)
        {
    var tr = cTR.item(i);
    tr.cells[0].className = ''
    }
    button.innerText = "Lock First Column";
  }
}

 

 

 

 

 

//css样式代码

/* Div container to wrap the datagrid */
div#div-datagrid {
width: 420px;
height: 200px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

/* Locks the left column */
td.locked, th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*IE5+ only*/
left: expression(document.getElementById("div-datagrid").scrollLeft-2);
}

/* Locks table header  这里是表头不动,要表头动那就把这一段注释!*/
th {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*IE5+ only*/
top: expression(document.getElementById("div-datagrid").scrollTop-2);
z-index: 10;
}

/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 99;}

/* DataGrid Item and AlternatingItem Style*/
.GridRow {font-size: 10pt; color: black; font-family: Arial;
             background-color:#ffffff; height:35px;}
.GridAltRow {font-size: 10pt; color: black; font-family: Arial;
             background-color:#eeeeee; height:35px;}

 

 

 

///指定那些不动!

Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs) _
Handles DataGrid1.ItemDataBound
    e.Item.Cells(0).CssClass = "locked"
    //e.Item.Cells(1).CssClass = "locked"
End Sub

转载于:https://www.cnblogs.com/Jefft/archive/2009/11/26/1611486.html