Önceki makalemizde JQuery Grid’ine nasıl veri yerleştirebileceğimizi incelemiştik. Bu makalemizde ise JQuery Grid’inde edit işlemi nasıl olacak? İnceleyelim.
Yukarıdaki linkten bir önceki makalemize ulaşarak JQuery Grid’ine veri yerleştirme işlemini inceleyebilirsiniz. Şimdi aynı uygulama üzerinden devam edelim ve griddeki veriyi nasıl düzenleyeceğimizi inceleyelim.
Örnek uygulamamızda grid’in editable özelliğini nasıl oluşturacağımızı, veri düzenlendiğinde bu veriye nasıl erişeceğimizi inceleyelim.
Index.cshtml dosyamızın kodunun eski hali (edit yokken) aşağıdaki gibiydi.
|
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="../../Scripts/jqgrid/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/jqgrid/themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet"
type="text/css" />
<script src="../../Scripts/jqgrid/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Scripts/jqgrid/src/jqModal.js" type="text/javascript"></script>
<script src="../../Scripts/jqgrid/src/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#urunliste").jqGrid({
url: '/Home/Getir_Urunler/',
datatype: 'json',
mtype: 'GET',
colNames: ['UrunId', 'UrunAd', 'Fiyat'],
colModel: [
{ name: 'UrunId', index: 'UrunId', width: 100, align: 'left' },
{ name: 'UrunAd', index: 'UrunAd', width: 200, align: 'left' },
{ name: 'Fiyat', index: 'Fiyat', width: 100, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: './../Content/jqqrid/themes/images',
caption: 'Ürün Listesi'
});
});
</script>
<table id="urunliste" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
|
Şimdi kodumuzda aşağıdaki düzenlemeleri yapalım.
1. forcefit:true -> Satırların seçilmesine izin veriyoruz.
2. cellEdit:true -> Seçilen hücrenin düzenlenmesine izin veriyoruz.
3. cellSubmit:’clientArray’ -> Eleman düzenlenmesi client tarafında yapılsın diyoruz.
4. afterEditCell -> Kayıt düzenlendikten hemen sonra çalışan method
5. afterSaveCell -> Kayıt düzenlenmesi için tıklandığı anda çalışan method
Şimdi kodumuza bu elemanları ekleyelim.
|
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="../../Scripts/jqgrid/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/jqgrid/themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet"
type="text/css" />
<script src="../../Scripts/jqgrid/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Scripts/jqgrid/src/jqModal.js" type="text/javascript"></script>
<script src="../../Scripts/jqgrid/src/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#urunliste").jqGrid({
url: '/Home/Getir_Urunler/',
datatype: 'json',
mtype: 'GET',
colNames: ['UrunId', 'UrunAd', 'Fiyat'],
colModel: [
{ name: 'UrunId', index: 'UrunId', width: 100, align: 'left' },
{ name: 'UrunAd', index: 'UrunAd', width: 200, align: 'left', editable: true },
{ name: 'Fiyat', index: 'Fiyat', width: 100, align: 'left', editable: true, editrules: { number: true}}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
forceFit: true,
cellEdit: true,
cellsubmit: 'clientArray',
viewrecords: true,
imgpath: './../Content/jqqrid/themes/images',
caption: 'Ürün Listesi',
afterEditCell: function (id, name, val, iRow, iCol) {
alert("Edit\nname = " + name + "\nval = " + val + "\niRow = " + iRow + "\niCol = " + iCol);
},
afterSaveCell: function (rowid, name, val, iRow, iCol) {
alert("Save\nname = " + name + "\nval = " + val + "\niRow = " + iRow + "\niCol = " + iCol);
}
});
});
</script>
<table id="urunliste" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
|
afterEditCell methodunda Edit satırıyla başlayan ve kayıt bilgilerini gösteren bir uyarı mesajı, afterSaveCell methodunda Save satırıyla başlayan ve kayıt bilgilerini gösteren bir uyarı mesajının gelmesini bekelyeceğiz. Kayıt işlemlerini düzenler düzenlemez yapmak istiyorsak bu methodları kullanabilmekteyiz.
Kola kaydına düzenlemek için tıklayalım.
Kaydı düzenleyelim ve Fiyat bilgisini düzenlemek için Fiyat’a tıklaylım.
UrunAd bilgisini değiştirdikten sonra düzenleme yapıldığı için Fiyat alanına geçmeden önce Save uyarısı geldi. Ardından Fiyat alanının bilgileri gelecektir.
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi