zoukankan      html  css  js  c++  java
  • 纯脚本搞定DataGrid表表头不动,表身滚动

    先看效果:

    纯脚本搞掂DataGrid表表头不动,表身滚动

      孟子以前也做过这事,不过他的方法前台后台都要弄,还是VB的(^-^),好像也不支持像我的自动生成列的DataGrid,所以还是自己动手,纯脚本搞掂,其实很简单,就几行:

    function ScrollDataGrid()
        {
          var tb = document.getElementById("tbHeader");
          var dg = document.getElementById("dgSearchResult");
          if(dg!= null)
          {  
            var dv = document.getElementById("dvBody");
            var th = dg.rows[0];
            for(var i = 0 ; i < th.cells.length;i++)
              th.cells[i].width = th.cells[i].clientWidth;
            var tr = th.cloneNode(true);
            //tr.applyElement(tb);
            tb.createTHead();
            var tbh = tb.tHead;
            tbh.appendChild(tr);
            tr = tbh.rows[0];
            var td = tr.insertCell();
            td.style.width = 19;
            td.width = 19;
            td.innerHTML = tr.cells[0].innerHTML;
            th.style.display = 'none';
            if(dg.scrollHeight < 300 )
              dv.style.height = dg.scrollHeight * 1 + 2;
          }
            <table width="100%" border="0" id="tbHeader" cellpadding="4" cellspacing="0">
                        </table>
                        <div style="OVERFLOW-Y: scroll; HEIGHT: 300px" id="dvBody">
                          <ASP:datagrid id="dgSearchResult" style="BORDER-COLLAPSE: collapse" runat="server" Width="100%" CellPadding="4" DataKeyField="编号" BorderWidth="1px" BorderStyle="Solid" BorderColor="RoyalBlue" GridLines="None">
                            <SelectedItemStyle ForeColor="SlateGray"></SelectedItemStyle>
                            <ItemStyle VerticalAlign="Middle"></ItemStyle>
                            <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                            <Columns>
                              <asp:ButtonColumn Text="选择" HeaderText="&lt;font face=Webdings&gt;6&lt;/font&gt;" CommandName="Delete">
                                <HeaderStyle Wrap="False" Width="40px"></HeaderStyle>
                                <ItemStyle Wrap="False" HorizontalAlign="Center"></ItemStyle>
                                <FooterStyle Wrap="False"></FooterStyle>
                              </asp:ButtonColumn>
                            </Columns>
                          </asp:datagrid></div>

  • 相关阅读:
    vue路由对象($route)参数简介
    原生js写ajax请求(复习)
    js,jq.事件代理(事件委托)复习。
    CSS 设置table下tbody滚动条
    H5 调用手机摄像机、相册功能
    css实现六边形图片(最简单易懂方法实现高逼格图片展示)
    input表单的type属性详解,不同type不同属性之间区别
    js对象,set和get方法 的三种实现形式
    day03 变量
    day01 js三种导入html的方法、js书写规范、变量的基本使用、变量提升
  • 原文地址:https://www.cnblogs.com/weihengblogs/p/2880525.html
Copyright © 2011-2022 走看看