Grid yang boleh diedit dengan jQuery, bootstrap, dan perisai ui lite

3

Di hujung pendek ini, saya menyediakan beberapa langkah mudah untuk menubuhkan grid yang boleh diedit (atau jadual) menggunakan bootstrap dan perisai ui lite.

Shield UI Lite adalah perpustakaan jQuery sumber terbuka yang merangkumi, antara komponen lain, grid jQuery. Grid menyokong penyuntingan di luar kotak, serta menyusun, mengumpulkan, dan editor lajur yang berbeza.

Takeaways Key

Shield UI Lite adalah perpustakaan jQuery sumber terbuka yang merangkumi grid jQuery, penyuntingan sokongan, penyortiran, pengumpulan, dan editor lajur yang berbeza. Grid ini juga menyokong pengikatan semua jenis data, dari struktur JSON tempatan ke perkhidmatan web jauh.

Untuk menyediakan grid yang boleh diedit, anda perlu menggunakan bekas bootstrap standard, tambahkan rujukan kepada semua sumber yang digunakan dalam sampel, seperti stylesheets, fail javascript, dan data, dan kemudian sediakan komponen grid shield ui lite . Grid boleh disesuaikan menggunakan CSS dan serasi dengan perpustakaan JavaScript lain.

Grid yang boleh diedit boleh digunakan dengan pangkalan data, boleh memuatkan data dari pelbagai sumber seperti array tempatan, fail JSON, atau pelayan jauh, dan boleh mengeksport data ke pelbagai format seperti CSV, Excel, dan PDF. Ia juga menyokong ciri pengesahan terbina dalam dan pengendalian ralat.

mengenai perisai ui lite
Shield UI adalah syarikat pembangunan komponen web yang mengkhususkan diri dalam reka bentuk, pembangunan, dan pemasaran widget UI untuk pembangunan JavaScript tulen, serta untuk pembangunan di ASP.NET, ASP.NET MVC, dan Java Wicket. Syarikat ini menawarkan komponen visualisasi data, serta pelbagai komponen pembangunan web standard, seperti grid, barcode - satu dan dua dimensi, komponen input lanjutan - seperti kotak teks angka dan bertopeng, dan banyak lagi.
The Shield Ui Lite Suite adalah salah satu perpustakaan sumber terbuka terbaru di pasaran dan apa yang khusus mengenainya ialah ia mengandungi banyak komponen, yang semuanya kaya dan matang. Ini termasuk grid jQuery, yang menyokong semua operasi grid web penting di luar kotak. Komponen ini menyokong penyuntingan dengan sama ada penyuntingan borang dalam talian atau standard, serta penyuntingan dengan bentuk luaran. Juga disokong adalah penyuntingan sel.

Di samping itu, grid UI Shield mempunyai komponen sumber data terbina dalam, yang memudahkan pengikatan kepada semua jenis data-dari struktur JSON tempatan, ke perkhidmatan web jauh; DataSource terbina dalam juga menjaga semua operasi memadam, mengemas kini dan memasukkan.

Untuk aplikasi data-berat, Widget JQuery SHIELD UI menawarkan ciri pemotongan maya yang dipertingkatkan dengan ketara meningkatkan prestasi, walaupun bekerja dengan berjuta-juta rekod data sebenar. Untuk melihat lebih banyak contoh komponen dan pilihannya, anda boleh merujuk kepada demo dalam talian atau dokumentasi.

menggunakan kod

Untuk grid yang boleh diedit yang akan kami buat, saya menggunakan sumber data tempatan untuk memastikan perkara mudah. Kod sumber untuk perpustakaan boleh didapati di GitHub. Kod sampel penuh, bersama -sama dengan semua data sampel yang digunakan, serta CSS tambahan boleh didapati dalam demo Codepen.

Langkah pertama dalam menubuhkan susun atur adalah menggunakan bekas bootstrap standard. Dalam kes kami, ini adalah div dengan panel bootstrap bersarang di dalamnya. Oleh kerana mana -mana komponen grid web standard biasanya menjadi tuan rumah banyak data, susun atur kami merangkumi lebar penuh skrin.

kod untuk langkah ini adalah mudah dan kelihatan seperti ini:

<span><span><span><div> class<span>="col-md-12"</span>>
  <span><span><span><div> class<span>="panel panel-default"</span>>
    <span><span><span><div> class<span>="panel-heading"</span>>
      <span><span><span><h4 id="class-span-text-center-span-gt"> class<span>="text-center"</span>></h4></span>Bootstrap Editable jQuery Grid
</span>      <span><span><span><span> class<span>="fa fa-edit pull-right bigicon"</span>></span><span><span></span></span>></span><span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="panel-body text-center"</span>>
      <span><span><span><div> id<span>="grid"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span></span>

Ini semua HTML yang diperlukan untuk menubuhkan sampel. Langkah seterusnya ialah menambah rujukan kepada semua sumber yang digunakan dalam sampel, seperti stylesheets, fail JavaScript, dan data.

Data yang digunakan untuk contohnya adalah koleksi JSON standard, yang dimuatkan secara berasingan untuk dihantar ke komponen grid. Menggunakan sumber data tempatan memudahkan persediaan. Di samping itu, kami memerlukan stylesheet untuk grid dan JavaScript untuk memulakannya.

Kemasukan sumber -sumber ini ditunjukkan di bawah:

CSS:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="shieldui-lite.min.css"</span>></span></span></span>

skrip:

<span><span><span><script> src<span >="shieldui-lite-all.min.js"</script></span>></span><span><span></span>></span>
</span><span><span><span><script> src<span >="shortGridData.js"</script></span>></span><span><span></span>></span></span>

menyediakan grid

Langkah seterusnya dalam proses adalah menubuhkan komponen grid SHIELD UI LITE. Sebaik sahaja kita telah memasukkan sumber yang diperlukan, kita dapat memulakannya dengan beberapa JavaScript dalam document.ready handler.

Terdapat dua bahagian logik dalam menerangkan komponen. Yang pertama adalah mengendalikan sumber data untuk data yang akan divisualisasikan dalam grid, dan yang lain sedang menubuhkan lajur, yang sebenarnya akan diberikan, serta sebarang tetapan tambahan, seperti penyortiran, kesan hover, dan lain -lain

Grid SHIELD UI LITE mempunyai harta DataSource terbina dalam, yang memudahkan untuk mengikat widget ke mana-mana data-tempatan atau jauh. Untuk menghubungkan DataSource ke data JSON, kami menggunakan harta data dan menerangkan bidang, yang akan diambil.

kod untuk mencapai ini ditunjukkan di bawah:

<span>dataSource: {
</span>  <span>data: gridData,
</span>  <span>schema: {
</span>    <span>fields: {
</span>      <span>id: { path: "id", type: Number },
</span>      <span>age: { path: "age", type: Number },
</span>      <span>name: { path: "name", type: String },
</span>      <span>company: { path: "company", type: String },
</span>      <span>month: { path: "month", type: Date },
</span>      <span>isActive: { path: "isActive", type: Boolean },
</span>      <span>email: { path: "email", type: String },
</span>      <span>transport: { path: "transport", type: String }
</span>    <span>}
</span>  <span>}
</span><span>}</span>

Membolehkan Pengeditan

Langkah seterusnya dalam proses menubuhkan aplikasi adalah memilih sifat mana yang akan tersedia di dalam grid, serta menerangkan lajur, yang akan diberikan.

Setiap lajur boleh mempunyai sifat tambahan, seperti teks header dan lebar. Tetapan harta lebar tidak wajib, tetapi menyediakan fleksibiliti tambahan untuk mengedarkan susun atur keseluruhan.

kod untuk semua sifat dalam kawalan disenaraikan di bawah:

<span><span><span><div> class<span>="col-md-12"</span>>
  <span><span><span><div> class<span>="panel panel-default"</span>>
    <span><span><span><div> class<span>="panel-heading"</span>>
      <span><span><span><h4 id="class-span-text-center-span-gt"> class<span>="text-center"</span>></h4></span>Bootstrap Editable jQuery Grid
</span>      <span><span><span><span> class<span>="fa fa-edit pull-right bigicon"</span>></span><span><span></span></span>></span><span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="panel-body text-center"</span>>
      <span><span><span><div> id<span>="grid"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span></span>

menyediakan editor tersuai

Widget menyokong beberapa editor berguna keluar dari kotak. Sebaik sahaja kawalan dimasukkan ke dalam mod edit, dengan mengklik mana -mana sel, editor untuk sel akan bergantung kepada jenis nilai dalam sel ini. Sebagai contoh, nilai angka akan mempunyai input angka dengan butang kenaikan dan penurunan. Lajur tarikh akan mempunyai input kalendar untuk memilih tarikh dengan mudah. ​​

Terdapat juga pilihan untuk membekalkan editor tersuai untuk lajur. Sebagai contoh, bukannya mempunyai kotak teks standard, kita boleh mengalami lungut dengan semua nilai untuk lajur itu.

Ini boleh dicapai dengan melampirkan pada acara getCustomEditorValue dan lulus editor tersuai untuk setiap sel.

Ini ditunjukkan dalam coretan kod berikut untuk peristiwa:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="shieldui-lite.min.css"</span>></span></span></span>

dan editor tersuai:

<span><span><span><script> src<span >="shieldui-lite-all.min.js"</script></span>></span><span><span></span>></span>
</span><span><span><span><script> src<span >="shortGridData.js"</script></span>></span><span><span></span>></span></span>

Jika anda ingin menyemak lebih banyak maklumat mengenai pilihan dalam widget grid, anda boleh merujuk bahagian dokumentasi ini.

Ini melengkapkan persediaan kami dan kawalan siap digunakan.

Lihat demo kerja penuh pada codepen

Pastikan untuk mengklik di dalam mana -mana sel kandungan dalam jadual/grid untuk melihat bagaimana fungsi edit berfungsi. Anda boleh melihat lebih banyak contoh mengenai penggunaan komponen Grid JQuery Shield UI di laman web UI Shield.

Soalan Lazim (Soalan Lazim) Mengenai Grid Diedit dengan JQuery dan Bootstrap

bagaimana saya boleh menyesuaikan penampilan grid yang boleh diedit? Anda boleh mengubah warna grid, fon, sempadan, dan elemen visual lain untuk menyesuaikan reka bentuk laman web anda. Anda juga boleh menggunakan kelas terbina dalam Bootstrap untuk gaya grid anda dengan cepat. Untuk penyesuaian yang lebih maju, anda boleh menggunakan API SHIELD UI LITE, yang menyediakan pelbagai pilihan untuk mengubahsuai penampilan dan tingkah laku grid. Ya, grid yang boleh diedit serasi dengan perpustakaan JavaScript lain seperti AngularJS, React, dan Vue.Js. Anda boleh menggunakan perpustakaan ini untuk meningkatkan fungsi grid anda, seperti menambahkan pemuatan data dinamik, penyortiran, dan penapisan. Anda boleh menambah atau mengeluarkan baris dalam grid yang boleh diedit menggunakan API grid. API menyediakan kaedah untuk menambah baris baru, memadam baris sedia ada, dan mengemas kini data dalam grid. Anda juga boleh menggunakan API untuk memilih baris pemilihan secara programatik, yang boleh berguna untuk melaksanakan ciri penyuntingan atau penghapusan pukal.

Bagaimana saya boleh mengesahkan input pengguna dalam grid yang boleh diedit?

Anda boleh mengesahkan input pengguna dalam grid yang boleh diedit menggunakan ciri pengesahan terbina dalam SHIELD UI Lite. Perpustakaan menyediakan pelbagai peraturan pengesahan, seperti bidang yang diperlukan, julat nombor, dan format e -mel. Anda juga boleh membuat peraturan pengesahan tersuai untuk mengendalikan senario pengesahan yang lebih kompleks.

Bolehkah saya mengeksport data dari grid yang boleh diedit? seperti CSV, Excel, dan PDF. Ini boleh dilakukan menggunakan API grid, yang menyediakan kaedah untuk mengeksport data grid. Anda juga boleh menyesuaikan data yang dieksport, seperti termasuk atau tidak termasuk lajur tertentu, atau memformat data dengan cara tertentu. Data ke dalam grid yang boleh diedit dari pelbagai sumber seperti array tempatan, fail JSON, atau pelayan jauh. API grid menyediakan kaedah untuk memuatkan data, dan anda boleh menggunakan kaedah ini dalam kombinasi dengan Ajax untuk memuatkan data dari pelayan. , grid yang boleh diedit responsif dan boleh digunakan dalam aplikasi mudah alih. Susun atur grid secara automatik akan menyesuaikan agar sesuai dengan saiz skrin, dan anda juga boleh menyesuaikan tingkah laku grid pada peranti yang berbeza menggunakan pertanyaan media CSS. 🎜> Anda boleh menyusun dan menapis data dalam grid yang boleh diedit menggunakan API grid. API menyediakan kaedah untuk menyusun data dengan satu atau lebih lajur, dan untuk penapisan data berdasarkan pelbagai kriteria. Anda juga boleh menggunakan kaedah ini dalam kombinasi dengan Ajax untuk melaksanakan penyortiran dan penapisan sisi pelayan.

Bolehkah saya menggunakan grid yang boleh diedit dengan pangkalan data? pangkalan data. Anda boleh memuatkan data dari pangkalan data ke dalam grid, dan anda juga boleh mengemas kini pangkalan data dengan perubahan yang dibuat dalam grid. Ini boleh dilakukan menggunakan Ajax dalam kombinasi dengan bahasa sisi pelayan seperti php, asp.net, atau node.js.

Bagaimana saya boleh mengendalikan kesilapan dalam grid yang boleh diedit? Boleh mengendalikan kesilapan dalam grid yang boleh diedit menggunakan ciri pengendalian ralat terbina dalam SHIELD UI Lite. Perpustakaan menyediakan kaedah untuk memaparkan mesej ralat, menonjolkan medan tidak sah, dan menghalang data yang tidak sah daripada disimpan. Anda juga boleh menyesuaikan tingkah laku pengendalian ralat yang sesuai dengan keperluan anda.

Atas ialah kandungan terperinci Grid yang boleh diedit dengan jQuery, bootstrap, dan perisai ui lite. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!