ASP.NET GridVIew实现动态生成列，前几列列冻结

我一如初见

已于 2022-03-09 18:11:47 修改

阅读量695

点赞数 1

分类专栏： C# 前端文章标签： asp.net 前端 javascript c#

于 2022-03-09 16:25:51 首次发布

本文链接：https://blog.csdn.net/qq_24851835/article/details/123380629

版权

C# 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

项目比较老，现在需求是要做个报表，列比较多，需要动态生成，

前端页面

用Panel把GridView包裹起来，设置可以横向滚动，SuperGridView 是公司封装的GridView,读者根据自己的额情况微调下

 <asp:Panel ID="Panel_SaleReport" runat="server" ScrollBars="Horizontal" Width="100%">
                            <asp:GridView ID="sgvSaleReport" runat="server" Width="200%" >                    
      </asp:GridView>
</asp:Panel>

Jquery代码

  $(function () {
            $("#Panel_SaleReport").scroll(function () {
               debugger
                var left = $("#Panel_SaleReport").scrollLeft(); //获取滚动的距离 
                var trs = $("#sgvSaleReport  tr"); //获取表格的所有tr 
                trs.each(function (i) {//对每一个tr（每一行）进行处理
                    //获得每一行下面的所有的td，然后选中下标为0的，即第一列，设置position为相对定位
                    //相对于父div左边的距离为滑动的距离，然后设置个背景颜色，覆盖住后面几列数据滑动到第一列下面的情况
                    //如果有必要也可以设置一个z-index属性
                    $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left, "background-color": "white", "z-index": 900 });
                    $(this).children().eq(1).css({ "position": "relative", "top": "0px", "left": left, "background-color": "white", "z-index": 900 });
                });
            });
        })

用纯JS实现

  function delScrollBar() {
   document.getElementById("Panel_SaleReport").onscroll = function () {

                var left = document.getElementById("Panel_SaleReport").scrollLeft; //获取滚动的距离 

                var trs = document.getElementById("sgvSaleReport").getElementsByTagName("tr"); //获取表格的所有tr 

                for (var i = 0; i < trs.length; i++) {
                    if (i == 0) {
                        debugger
                        var trs_f = trs[i];
                        trs[i].cells[0].style.cssText = 'position:relative;top:0px;left:' + left + ';background-color:white;z-index: 900';
                        trs[i].cells[1].style.cssText = 'position:relative;top:0px;left:' + left + ';background-color:white;z-index: 900';
                    } else {

                        trs[i].cells[0].style.cssText = 'position:relative;top:0px;left:' + left + ';background-color:white;z-index: 900';
                        trs[i].cells[1].style.cssText = 'position:relative;top:0px;left:' + left + ';background-color:white;z-index: 900';
                    }
                }
            }
           };

后端动态生成列代码

因为需求，要以最近五年作为GridView表头，所以需要动态生成

       var dic_hd = new Dictionary<string, string>();
          dic_hd.Add("备件编号", "PART_NO");
             dic_hd.Add("全国库存", "TOTAL_STOCK");
                dic_hd.Add((DateTime.Today.Year - 5).ToString(), "Y1");
                dic_hd.Add((DateTime.Today.Year - 4).ToString(), "Y2");
                dic_hd.Add((DateTime.Today.Year - 3).ToString(), "Y3");
                dic_hd.Add((DateTime.Today.Year - 2).ToString(), "Y4");
                dic_hd.Add((DateTime.Today.Year - 1).ToString(), "Y5");
                dic_hd.Add("近1年销量", "T1");
                dic_hd.Add("近2年销量", "T2");
                dic_hd.Add("近3年销量", "T3");
                dic_hd.Add("近4年销量", "T4");
                dic_hd.Add("近5年销量", "T5");
  foreach (var item in dic_hd)
                {
                    BoundField bc = new BoundField();
                    bc.DataField = item.Value;
                    bc.HeaderText = item.Key;
                    sgvSaleReport.Columns.Add(bc);
                }