Pendahuluan: Ketika saya memperkenalkan komponen yang dapat dibooting sebelumnya, saya menyebutkan fungsi pengeditan in-line, tetapi untuk tujuan menampilkan fungsi, saya telah mengambil alih ini dan mengatakan itu adalah dosa! Baru-baru ini, saya masih berencana untuk menggunakan pengeditan in-line dalam proyek ini, jadi saya mempelajari komponen yang dapat diedit secara x. Saya telah menemukan beberapa jebakan, jadi mari kita rekam lubang di sini! Teman -teman yang ingin tahu tentang Bootstraptable dapat pindah ke seri komponen JS - Table Component Artifact: Bootstrap Table.
1. Pengantar komponen X-editasi
Komponen yang dapat diedit X adalah plug-in untuk membuat kotak pop-up yang dapat diedit. Ini mendukung tiga gaya: Bootstrap, JQuery UI, dan JQuery. Efek umum adalah sebagai berikut:
Menurut gaya blogger yang biasa, yang pertama harus dipilih di sini. Pertama, berikan alamat sumber terbuka.
X-diedit alamat sumber terbuka: https://github.com/vitalets/x-editable
X-diedit Dokumen Alamat: http://vitalets.github.io/x-Editable/docs.html
X-Diedibited Online Demo: http://vitalets.github.io/x-Editable/demo-bs3.html
1. Pengalaman pertama yang dapat diedit
Pertama -tama unduh kode sumber berdasarkan bootstrap ke area lokal. Referensi ke file yang relevan.
<tautan href = "/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <tautan href = "~/content/bootstrap3-edibited/css/bootstrap-editable.css" rel = "stylesheet"//> src = "/skrip/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap3-Ededitable/js/bootstrap
Elemen halaman
Salin kode sebagai berikut: <a href = "#" id = "nama pengguna"-tipe = "text" data-title = "nama pengguna"> nama pengguna </a>
Inisialisasi JS
$ (function () {$ ('#username'). Edited ();});Tampilan Efek
Di atas adalah mengatur parameter yang dapat diedit x melalui atribut data HTML. Tentu saja, saya juga dapat mengatur parameter selama inisialisasi. Misalnya, saya hanya memberikan tag kosong: <a href = "#" id = "nama pengguna"> nama pengguna </a>
Inisialisasi JS
$(function () { $('#username').editable({ type: "text", //The type of the edit box. Support text|textarea|select|date|checklist and other titles: "Username", //The title of the edit box was disabled: false, //Doess edit emptytext: "empty text", //Default text mode of empty value: "inline", //The mode of edit box: Mendukung Mode Popup dan Inline, default adalah Popup Validate: Function (Value) {// Field Verifikasi if (! $. Trim (value)) {return 'Can't be Empty';Lihat efeknya
Mari kita memiliki yang sedikit lebih rumit
<a href = "#" id = "department"> pilih departemen </a>
$ (function () {$ ('#department'). Edited ({type: "select", // Jenis kotak pengeditan. Teks dukungan | TextArea | SELECT | Tanggal | Daftar Periksa dan Sumber Lainnya: [{Value: 1, Teks: "Departemen Pengembangan"}, {Value: 2, Teks: "Departemen Penjualan"}, {Value: 2, TEKS "{" Nilai: 2, Teks: "Departemen Penjualan"}, {value: 2, Text: "{" Nilai: "Teks:" Departemen Penjualan "}, {value: 2, Text:" {"Nilai:" Teks: "Departemen Penjualan"}, {Value: 2, Text: "{" Nilai: "Teks:" Penjualan Departemen "}, {Value: 2, Text:" " Judul: "Pilih Departemen", // Judul kotak pengeditan dinonaktifkan: false, // Jangan nonaktifkan pengeditan empuk: "teks kosong", // Mode teks default dari nilai kosong: "popup", // mode pengeditan: Mode Popup dan Inline,! });Lihat efeknya
Artikel di atas hanya memberikan beberapa bidang yang umum digunakan. Tentu saja, komponen yang dapat diedit X memiliki banyak parameter fungsional lainnya. Jika Anda tertarik, Anda dapat memeriksa dokumentasinya. Dokumentasi resmi memiliki deskripsi terperinci untuk setiap parameter.
2. Rencana awal yang dapat dibooting untuk mengedit in-line
Setelah berbicara untuk waktu yang lama, di atas hanyalah awal. Kami pada akhirnya berharap untuk mengimplementasikan pengeditan in-line di Bootstraptable. Menurut aturan di atas, jika kita ingin menggunakan x-diedit untuk mengimplementasikan pengeditan in-line, harus ada tag di sel tabel, dan kemudian tag diinisialisasi. Dengan ide ini, mari kita coba dulu.
Mengutip file terkait
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /><link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /><link href="/Content/bootstrap-table/bootstrap-table.min.css" rel = "stylesheet"/> <script src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/konten/bootstrap.min.js"> </script> <script src = "~/content/bootstrap.min.js"> </script> <script src = "~/content/bootstrap.min-edabitable/ededable/boots/~ ~ ~/~ ~ ~ src = "~/content/bootstrap-table/bootstrap-table.js"> </script> <script src = "/content/bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script>
Inisialisasi terkait bootstraptable
<script type = "text/javascript"> var currow = {}; $ (function () {$ ("#tb_user"). bootstraptable ({toolbar: "#toolbar", idfield: "id", pagination: true, showrefresh: true, search: true, clicktoselect: true, queryparams: function (param) {return {};} {{{{{{{{{{{{{{{{{{{{{{{{{{: }, {field: "username", judul: "nama pengguna", formatter: function (nilai, baris, indeks) {return "<a href =/"#/"name =/" nama pengguna/"data-tipe =/" teks/"data", {field, "" " "Umur",}, {Field: "Ulang Tahun", Judul: "Ulang Tahun", Formatter: Fungsi (Nilai, Baris, Indeks) {Var Tanggal = Eval ('Baru' + Eval (nilai) .source) Tanggal pengembalian.Format ("Yyyyy MM Bulan,", "Judul", "", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "" OnClickRow: Function (Row, $ Element) {Currow = Row;}, OnloadSuccess: Function (AA, BB, CC) {$ ("#TB_USER A"). Edited ({URL: Function (Params) {var sname = $ (this) .attr ("name"); {params) {var sname = $ (this) .attr ("name"); sname '{param) = Param. "Edited/Edit" Data: Currow, DataType: 'Json', Success: Function (Data, TextStatus, JQXHR) {Alert ('Simpan dengan sukses!'Metode backend
Metode pengujian latar belakang
jSonResult publik getUsers () {var lstres = Daftar baru <User> (); lstres.add (pengguna baru () {id = "1", username = "zhang san", usia = 22, ulang tahun = convert.todateTime ("1994-12-21"), deptid = "1", deptname = "departemen litbang"})); lstres.add (pengguna baru () {id = "2", username = "li si", usia = 28, ulang tahun = convert.todateTime ("1988-09-09"), deptid = "2", deptname = "departemen penjualan"})); lstres.add (pengguna baru () {id = "3", username = "Wrestle Coat Paman", usia = 40, ulang tahun = convert.todateTime ("1976-09-01"), deptid = "2", deptname = "departemen penjualan"}); lstres.add (pengguna baru () {id = "4", username = "lightning udang", usia = 37, ulang tahun = convert.todateTime ("1979-03-12"), deptid = "4", deptname = "departemen kreatif"})); lstres.add (pengguna baru () {id = "5", username = "han meimei", usia = 29, ulang tahun = convert.todateTime ("1987-05-01"), deptid = "5", deptname = "departemen bisnis"}); return json (lstres, jsonrequestbehavior.allowget); } public jsonResult Edit (pengguna pengguna) {// Perbarui pengembalian setelah deserialisasi json (baru {}, jsonrequestbehavior.allowget); }Ini memang dapat mencapai efek yang diinginkan, dan tampaknya itu juga dapat diedit di dalam baris, tetapi jika tidak ada kolom yang memerlukan pengeditan di dalam baris dan ada banyak kolom, maka apakah diperlukan untuk setiap kolom untuk memformat dengan cara yang sama? Dan tulisan semacam ini jelas kaku, yang sangat sulit untuk diterima oleh blogger. Jadi saya mencari contoh dan menemukan bahwa JS Bootstrap-Table-editied.js ada dalam perpanjangan bootstraptable.
3. Rencana Final Pengeditan Bootstraptable
Nah, blogger mengakui bahwa di atas masih merupakan awal, karena blogger berpikir ini mungkin ide umum untuk menyelesaikan masalah, sehingga lamanya pendahuluan ini mungkin terlalu banyak. Pertama, mari kita lihat file Bootstrap-Table-EDICTIE.js:
/** * @author zhixin wen <[email protected]> * ekstensi: https://github.com/vitalets/x-editable */! function ($) {'gunakan ketat'; $.extend($.fn.bootstrapTable.defaults, { editable: true, onEditableInit: function () { return false; }, onEditableSave: function (field, row, oldValue, $el) { return false; }, onEditableShown: function (field, row, $el, editable) { return false; }, onEditableHidden: function (field, row, $el, reason) {return false;}}); $ .extend ($. fn.bootstraptable.constructor.events, {'editable-init.bs.table': 'oneditableInit', 'editable-save.bs.table': 'oneditablesve', 'edited-shown.bs.table': 'onEditubhendown', 'editable-hidded.bs.bs.bs.bsedable': 'onEditableShown', '' editable-hidden.bs.bs.bs.bs.bs.table ' var bootstraptable = $ .fn.bootstraptable.constructor, _inittable = bootstraptable.prototype.Inittable, _initbody = bootstraptable.prototype.initbody; Bootstraptable.prototype.inittable = function () {var that = this; _inittable.Apply (ini, array.prototype.slice.Apply (argumen)); if (! this.options.Editable) {return; } $ .each (this.columns, function (i, column) {if (! column.Editable) {return;} var _formatter = column.formatter; column.formatter = function (nilai, baris, indeks) {var result = _formatter? _Formatter (value, row, index): value; return ['<a href = "javas =" javas = "Value, row, index): value; return [' <a href =" javas = "javas =" javas = "javas =" JAV = "JAV =" JAV = "JAV =" '"",' data-pk = "' + baris [that.options.idfield] +'" ',' data-value = "' + hasil +'", '>' + '</a>'] .join ('');};}); }; Bootstraptable.prototype.initbody = function () {var that = this; _initbody.Apply (ini, array.prototype.slice.Apply (argumen)); if (! this.options.Editable) {return; } $ .each (this.columns, function (i, column) {if (! column.Editable) {return;} itu. $ body.find ('a [data-name = "' + column.field + '"]'). Edited (column.Editable) .off ('save'). on ('save', function (e, params) {columned) .off ('save'). on ('save', function (e params) {columnable) .off ('save'). on ('save', function (e, params) {param). $ ini) .paren (tr [index] '). '"]'). Edited (column.Editable) .off ('ditampilkan'). on ('ditampilkan', fungsi (e, editing) {var data = that.getData (), index = $ (this) .parents ('tr [data-index]'). Data ('index'), row = data [index]; this.trigger ('editable', editing-shown. itu. $ body.find ('a [data-name = "' + column.field + '"]'). Edited (column.Editable) .off ('tersembunyi'). on ('hidden', function (e, reason) {var data = that.getData (), index = $ (this) .parents ('tr [data-index] (). that.trigger ('edited-hidden', column.field, row, $ (this), reason); this.trigger ('editing-init'); };} (jQuery);
JS ini sebenarnya membuat enkapsulasi sederhana dari X-editing, menambahkan atribut kolom yang dapat diedit dan mengedit dan menyimpan beberapa acara. Dengan ini sebagai dasar, kode yang kami edit di industri menjadi seperti ini.
File yang perlu dirujuk adalah sebagai berikut:
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /><link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /><link href="/Content/bootstrap-table/bootstrap-table.min.css" rel = "stylesheet"/> <script src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/konten/bootstrap.min.js"> </script> <script src = "~/content/bootstrap.min.js"> </script> <script src = "~/content/bootstrap.min-edabitable/ededable/boots/~ ~ ~/~ ~ ~ src = "~/content/bootstrap-table/bootstrap-able.js"> </script> <script src = "/content/bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <script src = "/content/bootstrap-table/ src = "~/content/bootstrap-table/extensions/edited/bootstrap-table-Editable.js"> </script>
1. Kotak teks
$ (function () {$ ("#tb_user"). bootstraptable ({toolbar: "#toolbar", idfield: "id", pagination: true, showrefresh: true, search: true, clicktoselect: true, queryparams: function (param) {return {};} {{{{{{{{{{{{{{{{{{{{{{{{{{: }, {field: "nama pengguna", judul: "nama pengguna", edited: {type: 'text', title: 'Username', Validate: function (v) {if (! v) Return 'Username tidak dapat kosong',}} {{{field: "{{{everply:" {{field: ",", ",", "UGAH," Date = eval ('baru' + eval (nilai) .source) tanggal pengembalian.format ("yyyy-mm-dd");}}, {field: "deptname", judul: "departemen"}, {field: "hobi", judul: "hobi"}, oneditablesve: field, row, rowval "," hobi "{oLax), oulax (field, row, rowvale" {ever. "/Edited/Edit", Data: Row, DataType: 'Json', Success: Function (Data, Status) {if (status == "Success") {waspada ('Pengiriman Data');Metode pembaruan yang sesuai dari latar belakang
public JsonResult Edit (pengguna pengguna) {// Pembaruan Entity Return json (baru {}, jsonRequestBehavior.allowget); }Setelah pengujian, kolom nama pengguna dapat diedit dengan bebas. Demikian pula, kolom usia juga dapat diubah untuk ini
{Field: "Age", title: "Age", edited: {type: 'text', title: 'age', validate: function (v) {if (isnan (v)) return 'use harus menjadi angka'; var usia = parseInt (v); if (usia <= 0) Kembalinya usia harus menjadi bilangan bulat positif '; }}}Tidak diperlukan modifikasi untuk sisanya.
Penjelasan Kode: Parameter yang dapat diedit dikonfigurasi dalam atribut kolom awal di atas. Perhatikan bahwa objek JSON yang sesuai dengan atribut yang dapat diedit dari setiap kolom di sini adalah objek JSON yang diinisialisasi dalam X-Diedit. Dengan kata lain, atribut apa yang dapat dikonfigurasi ketika kami menginisialisasi X-editing, dan hal yang sama dapat dikonfigurasi dalam atribut yang dapat diedit kolom, sehingga akan jauh lebih menyenangkan untuk digunakan. Metode pengiriman yang diedit ditempatkan secara seragam di acara OneDitableSave untuk menanganinya secara seragam.
2. Kotak Pemilihan Waktu
Dengan pengetahuan di atas sebagai dasar, mari kita inisialisasi kolom ulang tahun:
{field: "ulang tahun", judul: "ulang tahun", formatter: fungsi (nilai, baris, indeks) {var date = eval ('baru' + eval (nilai) .source) return date.format ("yyyy-mm-dd"); }, diedit: {type: 'date', judul: 'ulang tahun'}}Tidak ada modifikasi yang diperlukan di tempat lain untuk mendapatkan efek:
Ini adalah gaya default dari x-di-dinadable. Jika Anda tidak merasa senang, Anda dapat mengonfigurasinya sendiri. X-DEDITION menyediakan banyak parameter untuk mengonfigurasi kotak tanggal, sebagai berikut:
Tentu saja, jika waktunya akurat untuk waktu, menit dan detik, Anda dapat menggunakan kotak edit tipe datetime. Berikut ini adalah efek pengeditan kerangka waktu resmi, yang terlihat cukup bagus.
3. Tarik Kotak Down
Ada tag penting lain dalam pengeditan formulir, yang dipilih. Seperti yang disebutkan di atas, kita tahu bahwa X-Diedisi memberi kami mode pengeditan kotak drop-down, misalnya, pengeditan kolom ini di departemen kami dapat ditulis seperti ini:
{Field: "Deptid", title: "Department", Editable: {type: 'SELECT', title: 'Department', Sumber: [{value: "1", Teks: "Departemen R&D"}, {value: "2", Teks: "Departemen Penjualan"}, {value: "3", teks: "Departemen Administratif"}}}}}Mendapatkan efeknya
Tentu saja, metode pengaturan data data ini secara lokal tidak dapat memenuhi kebutuhan kita, karena dalam banyak kasus opsi di kotak drop-down diperoleh dari jarak jauh dari database. Tentu saja, X-di-baring juga telah dipertimbangkan untuk kita, misalnya, kita dapat menulis ini:
{field: "deptid", title: "department", edited: {type: 'select', title: 'department', source: function () {var result = []; $ .Ajax ({url: '/edited/getDepartments', async: false, type: "get", data: {}, Success: function (data, status) {$ .each (data, fungsi (tombol, value) {result.push ({value: value, text: value.name});}); hasil pengembalian; }}}}Kami mengonfigurasi metode di latar belakang
JSONRESULT getDepartments () {var lstres = Daftar baru <department> (); lstres.add (departemen baru () {id = "1", name = "r & d department"}); lstres.add (departemen baru () {id = "2", name = "Departemen Penjualan"}); lstres.add (departemen baru () {id = "3", name = "Departemen Administratif"}); lstres.add (departemen baru () {id = "4", name = "creative department"}); lstres.add (departemen baru () {id = "5", name = "Business Unit"}); return json (lstres, jsonrequestbehavior.allowget); }Ini juga dapat mencapai hasil yang kami inginkan.
Pertanyaan Kode: Berikut adalah satu hal yang perlu dijelaskan. Tukang kebun yang cermat mungkin telah menemukan bahwa bidang kami: "deptid" di sini, mengapa kami harus mengkonfigurasi deptid alih -alih deptname? Ini sangat sederhana, karena kita perlu sesuai dengan nilai nilai dalam sumber data.
4. Kotak centang
Selain kotak pengeditan umum yang disebutkan di atas, X-DEDITIE juga memberi kami pengeditan grup kotak centang. Misalnya:
{Field: "Hobby", Judul: "Host", Editable: {type: "CheckList", pemisah: ",", sumber: [{value: 'bsb', teks: 'Basketball'}, {value: 'ftb', teks: 'sepak bola'}, {value: 'wsm', teks: 'renang'}],}}} {{value: 'wsm', teks: '}],}}} {{value:' wsm ', Text:' Swimming '}],Dapatkan efeknya:
Tentu saja, jika Anda memiliki data jarak jauh, Anda juga dapat menggunakan metode yang mirip dengan yang di atas untuk mengambilnya.
5. "Ghosts Never Fade" Select2
Berbicara tentang kotak centang di atas, blogger tidak bisa membantu tetapi memikirkan hal-hal seperti Multiselect, jadi dia mencari dokumen yang dapat diedit X, dan menemukan bahwa itu tidak mendukung Multiselect, tetapi mendukung Select2, dan saya tidak tahu apakah ini berita baik. Berdasarkan pengalaman penggunaan blogger sendiri dan pengalaman obrolan dalam kelompok komunikasi teknis, saya menemukan bahwa banyak orang telah mengalami berbagai masalah gaya saat menggunakan Select2, dan tidak mudah untuk dipecahkan.
Karena X-Diedit mendukung Select2, mari kita coba. Bagaimanapun, demo resmi cukup bagus. Berikut adalah contoh menggunakan demo resmi:
Dengan suasana hati yang gugup, blogger mencobanya sendiri.
Referensi File Select2
<tautan href = "~/content/select2-bootstrap.css" rel = "stylesheet"/> <link href = "~/content/select2-master/dist/css/select2.min.css" rel = "stylesheet"/> <script src = "~/content/select2-master/dist/js/Js."
Kode coba
{Field: "Hobby", Judul: "Hobby", Editable: {Type: 'Select2', Judul: 'Hobby', Name: 'Hobby', Placement: 'Top', Success: Function (Response, NewValue) {debugger; }, error: function (response, newValue) {debugger; }, url: function (params) {debugger; }, sumber: [{id: 'bsb', teks: 'basket'}, {id: 'ftb', teks: 'sepak bola'}, {id: 'wsm', teks: 'berenang'}], inputclass: 'input-large', select2: {allowclear: true, ganda:}}}}}}}}}} {{{multiple} {{{multiple} {{{multiple: {{{multiple: {Dapatkan hasilnya:
Ternyata nilai Select2 yang dipilih tidak dapat diteruskan ke latar belakang secara normal. Ngomong -ngomong, blogger telah mencoba berbagai parameter dan menurut demo resmi, dan mereka semua berakhir dengan kegagalan. Saya tidak tahu bagaimana demo resmi berhasil. Pertanyaan ini pertama kali dibuang. Jika ada tukang kebun yang menggunakannya, harap perbaiki dan jawab. Jika blogger memecahkan masalah ini di masa depan, itu juga akan diperbarui di sini.
4. Ringkasan
Masalah lain adalah bahwa setelah pengeditan dan pengiriman selesai, blogger menghadapi masalah dalam proyek: jika ada terlalu banyak konten teks setelah pengiriman, lebar TH di kepala tabel dan lebar TD di Tbody tidak benar, yang terlihat cukup menjijikkan. Tapi saya tidak mengalami masalah ini saat menulis demo. Inilah solusinya.
Selesaikan masalah Anda hanya dalam satu kalimat!
Artikel ini memperkenalkan penggunaan bootstraptable yang dapat dikombinasikan dengan X-diedit untuk mengimplementasikan pengeditan in-line. Banyak pertanyaan dalam artikel ini dijelaskan berdasarkan pengalaman blogger menggunakannya. Jika Anda berencana untuk menggunakannya, Anda juga dapat mencobanya.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini. Saya harap ini dapat membantu Anda mempelajari tabel Bootstrap Artefak Komponen Tabel JS dengan lebih baik.