Как замораживать столбец и строку заголовка одновременно с полосой прокрутки на стороне GridView в .net?

Question

У меня есть GridView. В нем много столбцов и тысячи строк, поэтому мне нужно, чтобы его можно было прокручивать как по горизонтали, так и по вертикали. Мне нужно заморозить заголовок с прокручиваемыми и первые два столбца с горизонтальной прокруткой, так как это сделать?

Я много искал в Интернете и не нашел ничего, связанного с тем, что я хочу. Я использовал некоторые учебники по замораживанию заголовка и замораживанию столбцов по отдельности, но не смог найти ничего, что позволяло бы обоим работать вместе. Пожалуйста, помогите мне.

Answer 1

            <div id="HeaderDiv" runat="server">
                                    </div>
                                    <%--Wrapper Div which will scroll the GridView--%>
                                    <div id="DataDiv" runat="server" style="overflow: auto; border: 1px solid black; width: 900px; height: 400px;"
                                        onscroll="Onscrollfnction();">
                                        <asp:GridView ID="gvemp" runat="server" AutoGenerateColumns="False" EmptyDataText="No Record Found"
                                            OnRowDataBound="gvemp_RowDataBound">
 <Columns>
 </Columns>
        </asp:GridView>

                                </div>



    function CreateGridHeader() {
                var DataDivObj = "";
                var DataGridObj = "";
                var HeaderDivObj = "";

                DataDivObj = document.getElementById('<%=DataDiv.ClientID %>');
                DataGridObj = document.getElementById('<%=gvemp.ClientID %>');
                HeaderDivObj = document.getElementById('<%=HeaderDiv.ClientID %>');


                //********* Creating new table which contains the header row ***********
                var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
                DataDivObj.style.paddingTop = '0px';
                var DataDivWidth = DataDivObj.clientWidth;
                DataDivObj.style.width = '2000px';
                //********** Setting the style of Header Div as per the Data Div ************
                HeaderDivObj.className = DataDivObj.className;
                HeaderDivObj.style.cssText = DataDivObj.style.cssText;
                //**** Making the Header Div scrollable. *****
                HeaderDivObj.style.overflow = 'auto';
                //*** Hiding the horizontal scroll bar of Header Div ****
                //*** this is because we have to scroll the Div along with the DataDiv.  
                HeaderDivObj.style.overflowX = 'hidden';
                //**** Hiding the vertical scroll bar of Header Div **** 
                HeaderDivObj.style.overflowY = 'hidden';
                HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 'px';
                //**** Removing any border between Header Div and Data Div ****
                HeaderDivObj.style.borderBottomWidth = '0px';
                //********** Setting the style of Header Table as per the GridView ************
                HeadertableObj.className = DataGridObj.className;
                //**** Setting the Headertable css text as per the GridView css text 
                HeadertableObj.style.cssText = DataGridObj.style.cssText;
                HeadertableObj.border = '1px';
                HeadertableObj.rules = 'all';
                HeadertableObj.cellPadding = DataGridObj.cellPadding;
                HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
                //********** Creating the new header row **********
                var Row = HeadertableObj.insertRow(0);
                Row.className = DataGridObj.rows[0].className;
                Row.style.cssText = DataGridObj.rows[0].style.cssText;
                Row.style.fontWeight = 'bold';
                //******** This loop will create each header cell *********
                for (var iCntr = 0; iCntr < DataGridObj.rows[0].cells.length - 4; iCntr++) {
                    if (iCntr != 1) {
    var align = "left";
                            var spanTag = Row.appendChild(document.createElement('td'));
                            spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
                            var width = 0;
                            //****** Setting the width of Header Cell **********
                            if (spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth) {
                                width = spanTag.clientWidth;
                                align = DataGridObj.rows[1].cells[iCntr].align;
                            }
                            else {
                                width = DataGridObj.rows[1].cells[iCntr].clientWidth;
                                align = DataGridObj.rows[1].cells[iCntr].align;
                            }
                            if (iCntr <= DataGridObj.rows[0].cells.length - 2) {
                                spanTag.style.width = width + 'px';
                            }
                            else {
                                spanTag.style.width = width + 20 + 'px';
                            }
                            DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';
                            //Assigning Alignment
                            spanTag.align = align;
           }
                }
            }

Answer 2

Фиксированные столбцы данных

$('#yourTableId').DataTable( {
    fixedColumns: true
} );

Фиксированный заголовок данных

$('#yourTableId').DataTable( {
    fixedHeader: true
} );