امکان تغییر اندازه کنترل GridView توسط JQuery

در این مقاله نحوه قابلیت تغییر اندازه کنترل GridView توسط کاربر با استفاده از JQuery را شرح خواهیم داد

در ابتدا تگ مربوط به کنترل GridView را در صفحه قرار میدهیم .

 <asp:GridView ID="GridView1" CellPadding="4" runat="server" Width="100%" ForeColor="#333333"  
            GridLines="None">  
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />  
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />  
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />  
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
            <EditRowStyle BackColor="#999999" />  
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />  
        </asp:GridView>

سپس لینک کتابخانه JQuery را در قسمت head صفحه قرار می دهیم .

 <script src="jquery-1.8.2.js" type="text/javascript"></script>  
  
    <link href="jquery-ui.css" rel="stylesheet" type="text/css" />  
  
    <script src="jquery-ui.js" type="text/javascript"></script>

سپس اسکریپت مربوط به امکان تغییر سایز بودن کنترل GridView را می نویسیم .

 <script type="text/javascript">  
        $(function() {  
            $("#gridDivResize").resizable();  
        })  
    </script>

در ادامه می توانید کلیه تگهای مربوط به صفحه را به طور کامل مشاهده کنید :


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Resizable Gridview in ASP.NET using jQuery</title>  
      
        <script src="jquery-1.8.2.js" type="text/javascript"></script>  
      
        <link href="jquery-ui.css" rel="stylesheet" type="text/css" />  
      
        <script src="jquery-ui.js" type="text/javascript"></script>  
      
        <script type="text/javascript">  
            $(function() {  
                $("#gridDivResize").resizable();  
            })  
        </script>  
      
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <div id="gridDivResize" class="ui-widget-content" style="width: 550px; padding: 2px">  
            <asp:GridView ID="GridView1" CellPadding="4" runat="server" Width="100%" ForeColor="#333333"  
                GridLines="None">  
                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />  
                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />  
                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />  
                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
                <EditRowStyle BackColor="#999999" />  
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />  
            </asp:GridView>  
        </div>  
        </form>  
    </body>  
    </html>

در ادامه یک جدول در بانک اطلاعاتی ایجاد میکنیم ,

سپس اطلاعات پیش فرضی را در جدول قرار می دهیم تا کنترل GridView توسط آن اطلاعات تکمیل شود .

دستورات و فضای نام مربوط به صفحه به شرح زیر میباشد :


    using System;  
    using System.Configuration;  
    using System.Data;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Security;  
    using System.Web.UI;  
    using System.Web.UI.HtmlControls;  
    using System.Web.UI.WebControls;  
    using System.Web.UI.WebControls.WebParts;  
    using System.Xml.Linq;  
    using System.Data.SqlClient;  
      
    public partial class _Default : System.Web.UI.Page  
    {  
        SqlDataAdapter da;  
        DataSet ds = new DataSet();  
      
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!IsPostBack)  
            {  
                BindGridviewData();  
            }  
        }  
      
        protected void BindGridviewData()  
        {  
            SqlConnection con = new SqlConnection();  
            con.ConnectionString = @"Data Source=MyPC\SqlServer2k8;Integrated Security=true;Initial Catalog=Test";  
            SqlCommand cmd = new SqlCommand("SELECT CompanyName,EmployeeName,JoiningDate,Experience FROM EMPLOYEE", con);  
            da = new SqlDataAdapter(cmd);  
            da.Fill(ds);  
            con.Open();  
            cmd.ExecuteNonQuery();  
            con.Close();  
      
            if (!object.Equals(ds.Tables[0], null))  
            {  
                if (ds.Tables[0].Rows.Count > 0)  
                {  
                    GridView1.DataSource = ds;  
                    GridView1.DataBind();  
                }  
                else  
                {  
                    GridView1.DataSource = null;  
                    GridView1.DataBind();  
                }  
            }  
        }  
    }

سپس نرم افزار را اجرا می کنیم و مشاهده میکینم که میتواینم کنترل GridView را در اجرا تغییر اندازه دهیم .

فایل های ضمیمه

Resizable GridView using jQuery.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

امکان تغییر اندازه کنترل GridView توسط JQuery

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید