Etiket: sıralama

jQuery ile sürükle bırak yaparak sıralama işlemi

Sıralamadan kastım, kategori sıralama olabilir, eklenti sıralama olabilir, yazı sıralama olabilir vb.. Normalde sıralama işlemlerini yapabilmek için epeyce kod yazmaktan ziyade kullanıcının nasıl en rahat şekilde kullanabileceğinin hesabını kitabını sıklıkla yapıyoruz. Sağolsun  jQuery‘ nin Ui (kullanıcı arayüzü (user interface)) imdadımıza yetişiyor. Önce  sıralama (sortable) fonksiyonunu kullanıyoruz, daha sonra veriyi serileştiriyoruz (serialize) sonrada ajax ile postalıyoruz.Hemen kodlarımıza bakalım. Öncelikle bu iki dosyayı  Jquery Ui indirelim ve sayfamıza ekleyelim.Veritabanımızdaki kategoriler tablomuz.

	CREATE TABLE [kategoriler] (
	  [id] int IDENTITY(1, 1) NOT NULL,
	  [kategoriadi] nvarchar(50) NULL,
	  [sira] int NULL,
	  PRIMARY KEY CLUSTERED ([id])
	)
	ON [PRIMARY]
	GO

 

sirala.aspx sayfamızın içeriği

	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>

	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		margin-top: 10px;
	}
	#icerik ul{
	    margin:0;width:300px
	}
	#icerik ul li {
		list-style: none;
		margin: 0 0 4px 0;
		padding: 5px;
		background-color:#007dd5;
		color:#fff;
	}
	#icerik li:hover{
	    cursor:move;
	}
	.yeniyer{border:2px dotted #860101}

<script type="text/javascript">
$(document).ready(function(){
    $(function() {
	    $("#icerik ul").sortable({
	        placeholder: 'yeniyer',
	        opacity: 0.6,
	        cursor: 'move',
	        update: function() {
		    var order = $(this).sortable("serialize");
		    $.post("kaydet.aspx", order);
	    }
	    });
    });
});
</script>

	<div id="icerik">
        <ul>
	         <asp:Literal runat="server" ID="liste"></asp:Literal>
        </ul>
    </div>

Sirala.aspx.cs sayfamızın içeriği

 protected void Page_Load(object sender, EventArgs e)
 {
 if(!IsPostBack)
 {
 listeDoldur();
 }
 }
 
protected void listeDoldur() {
 DataTable dt = veritabani.DataTableGetir("select * from kategoriler order by sira asc");
 foreach (DataRow dr in dt.Rows)
 {
 liste.Text += "

	<li id="\&quot;sira_&quot;">" + dr["kategoriadi"].ToString() + "</li>

";
 }
 }

kaydet.aspx.cs sayfamızın içeriği, yani sıralama işlemlerini veritabanına yazan sayfamız.

 protected void Page_Load(object sender, EventArgs e)
 {
 string gelen = Request.Form.ToString().Replace("%5b%5d", "[]").Replace("sira[]=", "");
 char[] ayrac = new char[] { '&amp;' };
 string[] gelenler = gelen.Split(ayrac);
 int i = 1;
 foreach (string veri in gelenler)
 {
 veritabani.guncelle("Update kategoriler set sira='" + i + "' where id=" + veri + " ");
 i++;
 }
 }

Örneğin tamamını indirmek için tıklayın. Çalışan örneğe buradan bakabilirsiniz.

ASP.Net GridView Sıralama Sayfalama İşlemleri..

Veritabanı ile GridView’ i doldurup, sayfalama ve sıralama işlemine göz atacağız. Öncelikle şunu belirtmekte fayda var diye görüyorum eğer editör olarak Visual Studio kullanıyorsanız sadece sürükle bırak yaparak bu işlemleri yapabilirsiniz, ama biz asp den geldiğimiz için kodu göre göre ne olduğunu anlaya anlaya yapmaya çalışacağız. Şunu itiraf  etmeliyim sıralama işlemini yapan bloğu http://www.forxy.net/ adresindeki http://www.forxy.net/ViewKonuDetay.aspx?KonuID=22 örneğinden gördüm :) İlk yapmaya çalıştığım örnek olduğu için daha kolay bir şekilde yapılabilirmiydi şuanlık bilemiyorum, ama saat gibi çalıştığını söyleyebilirim. Kodlara baktığınızda hemen hemen herşeyi anlayacaksınız zaten, eğer anlamazsanız sorun bildiğim kadarıyla açıklamaya çalışırım :)

Default.aspx

<form id="form1" runat="server">
	    <div>
	        <asp:gridview id="GridView1" runat="server" allowpaging="True" onpageindexchanging="GridView1_PageIndexChanging" allowsorting="True" onsorting="GridView1_Sorting">
	        </asp:gridview>
	    </div>
	    </form>

Default.aspx.cs

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
doldur("ind"," desc");
}
}

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
doldur("ind", " desc");
}

public SortDirection GridViewSortDirection
{
get
{
if (ViewState["sortDirection"] == null)
ViewState["sortDirection"] = SortDirection.Ascending;
return (SortDirection)ViewState["sortDirection"];
}
set { ViewState["sortDirection"] = value; }
}

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e) {
if (GridViewSortDirection == SortDirection.Descending)
{
GridViewSortDirection = SortDirection.Ascending;
doldur(e.SortExpression, " desc");
}
else
{
GridViewSortDirection = SortDirection.Descending;
doldur(e.SortExpression, " asc");
}
}

public void doldur(string alanadi, string siralama)
{
SqlConnection cnn = new SqlConnection("Server=SqlServerAdresi; Database=VeriTabanıAdı; uid=KullanıcıAdı;pwd=Şifre;pooling=true; connection lifetime=10; connection timeout=5; packet size=1024;");
SqlDataAdapter da = new SqlDataAdapter("select * from TabloAdi", cnn);
DataTable dt = new DataTable("TabloAdi");
da.Fill(dt);
DataView dv = new DataView(dt);
dv.Sort = alanadi + siralama;
GridView1.DataSource = dv;
GridView1.DataBind();
};   }
}