توضیحات و دانلود

استفاده از جاوا اسکریپت در ثابت کردن Gridview header پویا با ASP.Net
0 0
استفاده از جاوا اسکریپت در ثابت کردن Gridview header پویا با ASP.Net

با سلام در این مقاله به شما نشان خواهیم داد که چگونه می توانید GridView Scrollable خود را با هدر های ثابت با استفاده از JavaScript انجام دهید. نگران نباشید شما لازم نیست که هیچ اسکریپتی را اجرا کنید بلکه  نیاز به استفاده از اسکریپت را دارد و این باعث می شود که سرصفحه GridView شما را ثابت کند و GridView را نیز رونده کند.
 
کد HTML
کد HTML  یک ASP.Net GridView ساده با 3 ستون است .

<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false">
<Columns>
<asp:BoundField DataField = "ContactName" HeaderText = "Contact Name" />
<asp:BoundField DataField = "City" HeaderText = "City" />
<asp:BoundField DataField = "Country" HeaderText = "Country" />
Columns>
asp:GridView>
form>

اسکریپ Client Side برای ثابت کردن Headers
در زیر عملکرد جاوا اسکریپت است که سرصفحه GridView را ثابت کرده و همچنین آن را رونده می کند. شما فقط باید اسکریپت را در هر نقطه از صفحه یا صفحه محتوا که در آن ASP.Net GridView دارید قرار دهید.

<script type = "text/javascript">
    var GridId = "<%=GridView1.ClientID %>";
    var ScrollHeight = 300;
    window.onload = function () {
        var grid = document.getElementById(GridId);
        var gridWidth = grid.offsetWidth;
        var gridHeight = grid.offsetHeight;
        var headerCellWidths = new Array();
        for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
            headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
        }
        grid.parentNode.appendChild(document.createElement("div"));
        var parentDiv = grid.parentNode;
 
        var table = document.createElement("table");
        for (i = 0; i < grid.attributes.length; i++) {
            if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
            }
        }
        table.style.cssText = grid.style.cssText;
        table.style.width = gridWidth + "px";
        table.appendChild(document.createElement("tbody"));
        table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
        var cells = table.getElementsByTagName("TH");
 
        var gridRow = grid.getElementsByTagName("TR")[0];
        for (var i = 0; i < cells.length; i++) {
            var width;
            if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                width = headerCellWidths[i];
            }
            else {
                width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
            }
            cells[i].style.width = parseInt(width - 3) + "px";
            gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
        }
        parentDiv.removeChild(grid);
 
        var dummyHeader = document.createElement("div");
        dummyHeader.appendChild(table);
        parentDiv.appendChild(dummyHeader);
        var scrollableDiv = document.createElement("div");
        if(parseInt(gridHeight) > ScrollHeight){
             gridWidth = parseInt(gridWidth) + 17;
        }
        scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
        scrollableDiv.appendChild(grid);
        parentDiv.appendChild(scrollableDiv);
    }
script>

در اینجا نیز باید دو مورد را به دو پارامتر تقسیم کنید :
GridId .1 - شناسه مشتری GridView.
2. ScrollHeight - ارتفاع DIV با اسکرولبرها. در اینجا  آن را به 300 مشخص کرده ایم که می توانید آن را با توجه به نیازهای خود تنظیم کنید.
این همه چیزهایی است که شما باید انجام دهید تا هدرهای GridView خود را ثابت کنید  یا GridView خود را یک GridView رونده با هدرهای ثابت تبدیل کنید.

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :