Tabledit.js, tablo hücreleriniz için AJAX özellikli düzenleme sağlayan küçük bir jQuery eklentisidir. Eklenti, hücre değerlerini doğrudan hızlı biçimde değiştirilmesine, düzenleme yapılmasına olanak sağlar.
Tabledit.js tabloların sütun alanlarına dönüştürme, özel tetikleyici etkinliklerle açılır menüleri seçme özelliklerine sahiptir. Bu yazımda sizlerle basit bir editlenebilir HTML tablo yapısı oluşturacağız.
Ayrıca bu yazı da ilginizi çekebilir: JQuery HTML İçeriği Excel’e Aktarma Uygulaması {Javascript}
Adım 1: jQuery ve tabledit kütüphaneleri sayfamıza ekleyelim.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="jquery.tabledit.js"></script>
Adım 2: Varolan tablonuzdaki eklentiyi tanımlayın ve dilediğiniz düzenlenebilir sütunları belirtin.
$('#my-table').Tabledit({
columns: {
identifier: [0, 'id'],
editable: [[1, 'First Name'], [2, 'Last Name']]
}
});
Adım 3: Eklenti ayarlarımızı yapalım
$('#my-table').Tabledit({
// istek dosyasını buraya yazıyoruz
// örn. 'ajax.php'
url: window.location.href,
inputClass: 'form-control input-sm',
toolbarClass: 'btn-toolbar',
groupClass: 'btn-group btn-group-sm',
dangerClass: 'danger',
warningClass: 'warning',
mutedClass: 'text-muted',
// Düzenleme modu için tetikleyici değiştirir.
// örn. 'dblclick'
eventType: 'click',
// Satır tanımlayıcısı için td öğesinde öznitelik adını değiştirir
rowIdentifier: 'id',
// Kaydet düğmesini tıkladığınızda, bir satırın ilk girişi üzerine odaklanmayı etkinleştirir
autoFocus: true,
// Tanımlayıcıyı içeren sütunu gizler
hideIdentifier: false,
// Edit butonunu etkinleştirir
editButton: true,
// Silme butonunu etkinleştirir
deleteButton: true,
// Düzenle butonuna tıkladığınızda kaydetme butonunu etkinleştirir
saveButton: true,
// İşlemi geri almak için geri yükle düğmesini etkinleştirir
restoreButton: true,
// Buton isimlerini ve içeriklerini değiştirebilirsiniz.
buttons: {
edit: {
class: 'btn btn-sm btn-default',
html: '<span class="glyphicon glyphicon-pencil"></span>',
action: 'edit'
},
delete: {
class: 'btn btn-sm btn-default',
html: '<span class="glyphicon glyphicon-trash"></span>',
action: 'delete'
},
save: {
class: 'btn btn-sm btn-success',
html: 'Save'
},
restore: {
class: 'btn btn-sm btn-warning',
html: 'Restore',
action: 'restore'
},
confirm: {
class: 'btn btn-sm btn-danger',
html: 'Confirm'
}
},
// Tablo çizildikten sonra çalıştırılır
onDraw: function() { return; },
// Ajax isteği tamamlandığında çalıştırılır
// onSuccess(data, textStatus, jqXHR)
onSuccess: function() { return; },
// Ajax isteğinde hata oluştuğunda çalıştırılır
// onFail(jqXHR, textStatus, errorThrown)
onFail: function() { return; },
// Bir ajax isteği olduğunda çalıştırılır
onAlways: function() { return; },
// Ajax isteğinden önce çalıştırılır
// onAjax(action, serialize)
onAjax: function() { return; }
});
