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

Scrollable GridView با سرصفحه های ثابت و استفاده از jQuery برای مرتب سازی Client Side در ASP.Net
0 0
Scrollable GridView با سرصفحه های ثابت و استفاده از jQuery برای مرتب سازی Client Side در ASP.Net

با سلام در این مقاله چگونگی ایجاد Scrollable GridView با سرصفحه های ثابت و  استفاده از jQuery برای مرتب سازی Client Side در ASP.Net را توضیح میدهیم .امیدواریم مورد استفاده شما عزیزان قرار بگیرد .
کد GridView
در زیر GridView Markup قرار دارد .

<div id = "container" style ="height:200px;overflow:auto;width:617px ">
<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns = "false" CssClass = "grid">
   <Columns>
    <asp:BoundField ItemStyle-Width = "200px"
    DataField = "CustomerID" HeaderText = "CustomerId" />
    <asp:BoundField ItemStyle-Width = "200px"
    DataField = "City" HeaderText = "City"/>
    <asp:BoundField ItemStyle-Width = "200px"
    DataField = "Country" HeaderText = "Country"/>
   </Columns>
</asp:GridView>
</div>

 در بالا  GridView در داخل یک DIV ارتفاع و عرض ثابت قرار داده شده است و مالکیت سرریز آن را به صورت خودکار تنظیم می کند تا نوارهای اسکرول در دسترس باشند. همچنین عرض Div را کمی بیشتر از GridView تنظیم کرده ایم، بنابراین پیمایش افقی پنهان است و می تواند اسکرول عمودی را جایگزین کند.
 
اتصال GridView
در زیر روش هایی برای اتصال کنترل GridView با داده ها است .
C #

private void BindGrid()
{
    DataTable dt = new DataTable();
    String strConnString = System.Configuration.ConfigurationManager
                .ConnectionStrings["conString"].ConnectionString;
    SqlConnection con = new SqlConnection(strConnString);
    SqlDataAdapter sda = new SqlDataAdapter();
    SqlCommand cmd = new SqlCommand("select * from customers");
    cmd.Connection = con;
    sda.SelectCommand = cmd;
    sda.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
    GridView1.HeaderRow.Attributes["style"] = "display:none";
    GridView1.UseAccessibleHeader = true;
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}

VB.Net

Private Sub BindGrid()
 Dim dt As New DataTable()
 Dim strConnString As [String] = System.Configuration.ConfigurationManager _
                    .ConnectionStrings("conString").ConnectionString
 Dim con As New SqlConnection(strConnString)
 Dim sda As New SqlDataAdapter()
 Dim cmd As New SqlCommand("select * from customers")
 cmd.Connection = con
 sda.SelectCommand = cmd
 sda.Fill(dt)
 GridView1.DataSource = dt
 GridView1.DataBind()
 GridView1.HeaderRow.Attributes("style") = "display:none"
 GridView1.UseAccessibleHeader = True
 GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
End Sub


در بالا بعد از اتصال GridView ردیف هدر GridView را با تنظیم صفحه نمایش مخفی میکنیم . اگر ShowHeader را به اشتباه تنظیم کنید، کارکرد مرتب سازی کتابخانه مختل خواهد شد. در ادامه   تنظیمات GridView را اصلاح میکنیم تا تگهای THEAD و TBODY که برای مرتب سازی جدول کتابخانه لازم است .
ساختن سربرگ ساختگی
برای تهیه هدر ساختگی، ما باید ردیف هدر GridView را همانطور که در تصویر نشان داده شده است استخراج کنیم .

حالا در بالای GridView آن را خالی کنید و صفحه نمایش را حذف کنید : به طوری که سرصفحه ظاهری قابل مشاهده است،همچنین ID را به جدول سرصفحه ارائه کرده ایم و dummyHeader  و GridView رونده آماده است .

CSS
CSS زیر را به بخش سر صفحه اضافه کنید

<style type = "text/css">
    .sortAsc
    {
        background-image: url(images/asc.gif);
        background-repeat: no-repeat;
        background-position: center right;
        cursor: pointer;
        width:200px;
    }
    .sortDesc
    {
        background-image: url(images/desc.gif);
        background-repeat: no-repeat;
        background-position: center right;
        cursor: pointer;
        width:200px;
    }
    .grid
    {
        font-family:Arial;
        font-size:10pt;
        width:600px
    }
    .grid THEAD
    {
         background-color:Green;
         color:White;
    }
</style>

ارزیابی جانبی مشتری
حالا برای اسکریپت سمت مشتری از plugorter jQuery Plugin استفاده میکنیم که برای مرتب سازی کنترل GridView استفاده می شود. از این رو اسکریپت های زیر را به صفحه خود اضافه کنید

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type = "text/javascript">
    $(document).ready(function() {
    $("#<%=GridView1.ClientID%>").tablesorter();
        SetDefaultSortOrder();
    });
 
    function Sort(cell, sortOrder) {
        var sorting = [[cell.cellIndex, sortOrder]];
        $("#<%=GridView1.ClientID%>").trigger("sorton", [sorting]);
        if (sortOrder == 0) {
            sortOrder = 1;
            cell.className = "sortDesc";
        }
        else {
            sortOrder = 0;
            cell.className = "sortAsc";
        }
        cell.setAttribute("onclick", "Sort(this, " + sortOrder + ")");
        cell.onclick = function() { Sort(this, sortOrder); };
        document.getElementById("container").scrollTop = 0;
    }
 
    function SetDefaultSortOrder() {
        var gvHeader = document.getElementById("dummyHeader");
        var headers = gvHeader.getElementsByTagName("TH");
        for (var i = 0; i < headers.length; i++) {
            headers[i].setAttribute("onclick", "Sort(this, 1)");
            headers[i].onclick = function() { Sort(this, 1); };
            headers[i].className = "sortDesc";
        }
    }
</script>

تمام روش های جانبی مشتری در زیر توضیح داده شده است .
روش زیر کتابخانه tableorter را شناسه کنترل مورد نیاز برای مرتب سازی است و همچنین روش SetDefaultSortOrder را برای تنظیم پیش فرض مرتب سازی مرتب می کند.

    $(document).ready(function() {
    $("#<%=GridView1.ClientID%>").tablesorter();
        SetDefaultSortOrder();
    });

 
تابع زیر به عنوان نام مجموعه دستورالعمل مرتب سازی پیش فرض برای GridView در هدر ساختگی که ما آن را ایجاد کرده اید نشان می دهد .

function SetDefaultSortOrder() {
        var gvHeader = document.getElementById("dummyHeader");
        var headers = gvHeader.getElementsByTagName("TH");
        for (var i = 0; i < headers.length; i++) {
            headers[i].setAttribute("onclick", "Sort(this, 1)");
            headers[i].onclick = function() { Sort(this, 1); };
            headers[i].className = "sortDesc";
        }
}

این تابع زمانی دریافت می شود که کاربر بر روی ردیف هدر برای مرتب سازی کلیک کند، سلول را می پذیرد و مرتب سازی شبکه را می دهد.

function Sort(cell, sortOrder) {
        var sorting = [[cell.cellIndex, sortOrder]];
        $("#<%=GridView1.ClientID%>").trigger("sorton", [sorting]);
        if (sortOrder == 0) {
            sortOrder = 1;
            cell.className = "sortDesc";
        }
        else {
            sortOrder = 0;
            cell.className = "sortAsc";
        }
        cell.setAttribute("onclick", "Sort(this, " + sortOrder + ")");
        cell.onclick = function() { Sort(this, sortOrder); };
        document.getElementById("container").scrollTop = 0;
}

 


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

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