jqGrid - ID unik untuk baris baru

Berikut adalah beberapa saran untuk memecahkan masalah utama Anda dan untuk meningkatkan kode JavaScript yang Anda posting.

Pertama-tama, generasi rowid baru secara lokal diperlukan untuk skenario pengeditan lokal. Seseorang harus membuat baris baru di server dalam hal menyimpan data di backend dalam database. Implementasi tipikal terdiri dari memiliki PRIMARY KEY didefinisikan sebagai int IDENTITY di setiap meja. Itu membuat id unik dan tetap. Menghapus beberapa baris dan membuat yang baru tidak akan pernah ditafsirkan sebagai pengeditan baris lama karena baris baru akan selalu mendapatkan id baru, yang belum pernah digunakan sebelumnya (dalam tabel).

Untuk mendapatkan keuntungan dari id yang dihasilkan di sisi server satu memiliki dua pilihan utama:

memuat ulang kisi setelah setiap operasi Tambahkan baris.
memperluas komunikasi dengan server saat mengedit sehingga server mengembalikan id baru, yang dibuat di tabel database, kembali ke jqGrid. Seseorang dapat menggunakan aftersavefunc callback (untuk Tambahkan baris baru saja) untuk memperbarui rowid setelah berhasil membuat baris di server. Banyak implementasi standar layanan RESTful mengembalikan data baris penuh id inklusif pada Tambah atau Edit. Seseorang dapat menggunakan data di dalam aftersavefunc panggilan balik dan gunakan sesuatu seperti $("#" + rowid).attr("id", newRowid); untuk memperbarui baris baru. Itu menyimpan id di beberapa kolom tambahan (seperti Anda menggunakan id tersembunyi kolom) maka seseorang harus menggunakan setCell metode tambahan untuk memperbarui sel juga.

Pilihan pertama adalah yang paling sederhana dan saya akan merekomendasikan Anda untuk mengimplementasikannya terlebih dahulu. Hanya jika memuat ulang kisi tidak akan memuaskan pengguna, yang menambahkan banyak baris satu demi satu, maka Anda harus menulis sedikit kode lagi dan menerapkan skenario kedua.

Kode Anda saat ini menggunakan inlineNav untuk operasi Tambah dan Edit, diimplementasikan menggunakan pengeditan sebaris, dan metode navGrid untuk operasi Hapus, diimplementasikan menggunakan pengeditan formulir. Pengeditan formulir, termasuk Hapus, menggunakan reloadAfterSubmit: true pilihan secara default. Artinya grid akan dimuat ulang dari server (dari url: "/RestWithDatabaseConnection/rest/fetchData" ) setelah menghapus setiap baris. Anda dapat mengatasi masalah utama Anda dengan mengganti afterSaveFunction sebagai berikut:

var afterSaveFunction = function () {
        $(this).trigger("reloadGrid", [{current: true, fromServer: true}]);
    };

Opsi current untuk menahan pilihan saat ini setelah memuat ulang dan opsi fromServer: true masuk akal hanya jika Anda menggunakan loadonce: true pilihan tambahan. Anda cukup menggunakan reloadGridOptions: {fromServer: true} pilihan navGrid untuk memaksa memuat ulang data dari server pada klik tombol Segarkan/Muat Ulang pada bilah navigator. Jika Anda tidak memiliki begitu banyak data yang perlu Anda tampilkan di kisi (misalnya kurang dari 1000 baris), maka perilaku seperti itu akan direkomendasikan.

Beberapa saran yang lebih umum bagi Anda untuk meningkatkan kode Anda:

Anda dapat mempertimbangkan untuk menggunakan height: "auto" bukannya height: 250 dan untuk mengatur tinggi maksimum grid dengan menentukan rowNum nilai. Opsi scrollOffset: 0 tidak akan dibutuhkan dalam kasus ini.

Format data yang dikembalikan dari server terlihat demikian, sehingga Anda tidak menerapkan paging, sortir, dan pemfilteran sisi server . Anda harus menggunakan loadonce: true dan forceClientSorting: true pilihan. loadonce: true menginformasikan jqGrid untuk menyimpan semua data yang dikembalikan dari server secara lokal di data internal internal parameter. Anda dapat mengakses larik kapan saja dengan menggunakan $('#grid').jqGrid("getGridParam", "data") . Nilai rowNum (nilai defaultnya adalah 20) akan digunakan untuk lokal halaman. sortname dan sortorder akan digunakan untuk lokal penyortiran. Dan Anda akan menggunakan dialog pencarian (ditambahkan oleh navGrid ) atau bilah alat filter (ditambahkan oleh filterToolbar ) untuk lokal pencarian/penyaringan. Ini menyederhanakan kode server, meningkatkan kinerja grid dari sudut pandang pengguna, dan menyederhanakan antarmuka antara server dan klien. Anda dapat menggunakan antarmuka RESTful klasik di server tanpa ekstensi apa pun.

Komentar lain:Saya sarankan Anda untuk menghapus id tersembunyi yang tidak dibutuhkan kolom (name:'id', label:'id', key: true, hidden: true, ... ). Informasi tentang rowid akan disimpan di id atribut baris (<tr> elemen) dan seseorang tidak perlu menyimpan informasi duplikat di <td> . yang tersembunyi elemen di setiap baris.

Ada banyak bagian lain dari kode Anda, yang dapat ditingkatkan. Misalnya operasi DELETE yang Anda gunakan di sisi server tampaknya aneh. Anda menggunakan mtype: 'DELETE' , tetapi Anda mengirim id baris yang dihapus di dalam body permintaan ke server alih-alih menambahkannya ke URL. Sesuai dengan standar, HTTP DELETE harus berisi tanpa isi . Anda dapat menggunakan opsi jqGrid formDeleting untuk menentukan semua opsi Hapus dan Anda dapat menentukan url parameter sebagai fungsi:

formDeleting: {
    mtype: "DELETE",
    url: function (rowid) {
        return "/RestWithDatabaseConnection/rest/delete/" + rowid;
    },
    ajaxDelOptions: { contentType: "application/json" },
    serializeDelData: function () {
        return "";
    }
}

Anda perlu mengubah kode server Anda dari /RestWithDatabaseConnection/rest/delete/ untuk menggunakan protokol komunikasi yang sama dan untuk mendapatkan id yang dihapus dari dari URL.

Anda dapat menggunakan navOptions parameter jqGrid gratis untuk menentukan opsi navGrid :

navOptions: { edit: false, add: false }

(searchtext: 'Search' dan opsi lain yang Anda gunakan tampaknya memiliki nilai default dan saya menghapusnya di sana).

Agar lebih dekat dengan standar REST, seseorang dapat menggunakan operasi HTTP PUT untuk mengedit baris dan HTTP POST untuk menambahkan baris baru. Anda harus menerapkan berbeda titik masuk untuk kedua operasi di backend. Anda menggunakan /RestWithDatabaseConnection/rest/update sudah dan Anda dapat mengimplementasikan /RestWithDatabaseConnection/rest/create untuk menambahkan baris baru. Anda dapat menggunakan inlineEditing berikut ini perubahan misalnya untuk mengimplementasikan skenario:

inlineNavOptions: { add: true, edit: true },
inlineEditing: {
    url: function (id, editOrAdd) {
        return "/RestWithDatabaseConnection/rest/" +
            (editOrAdd === "edit" ? "update" : "create");
    },
    mtype: function (editOrAdd) {
        return editOrAdd === "edit" ? "PUT" : "POST";
    },
    keys: true,
    serializeSaveData: function (postData) {
        return JSON.stringify(dataToSend);
    },
    aftersavefunc: function () {
        $(this).trigger("reloadGrid", [{current: true, fromServer: true}]);
    },
    addParams: {
        addRowParams: {
            position: "last",
            serializeSaveData: function (postData) {
                var dataToSend = $.extend({}, postData);
                // don't send any id in case of creating new row
                // or to send `0`:
                delete dataToSend.id; // or dataToSend.id = 0; 
                return JSON.stringify(dataToSend);
            }
        }
    }
}