Fatih SoysalTabledit.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.
1 2 | <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.
1 2 3 4 5 6 7 8 | $('#my-table').Tabledit({ columns: { identifier: [0, 'id'], editable: [[1, 'First Name'], [2, 'Last Name']] } }); |
Adım 3: Eklenti ayarlarımızı yapalım
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | $('#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; } }); |
Bir sonraki makalemizde görüşmek üzere
