Gridstack.js: Output HTML Bootstrap Statis

Dibuat pada 24 Mar 2015 · 19Komentar · Sumber: gridstack/gridstack.js

Ini berfungsi dengan baik untuk membuat dan mengedit dasbor. Terima kasih atas kerja hebatmu.

Tetapi setelah desain selesai, cara membuat halaman html bootstrap statis (di mana mengubah ukuran atau memindahkan tidak diperlukan, dan tidak perlu memuat gridstack di halaman target). Alih-alih memuat gridstack dan mengunci pengeditan, akan lebih cepat dan efisien untuk memuat html statis secara langsung, jika dapat diproduksi oleh paket ini.

Saya mengerti bahwa saat ini ada opsi simpan yang memungkinkan desain disimpan dan diambil - apakah mungkin memiliki metode penyimpanan serupa yang dapat menghasilkan halaman html mandiri yang kompatibel dengan bootstrap?

Sumber

KrishnaPG

Komentar yang paling membantu

Saya mengerti bagaimana Anda bisa meneruskan nilai lebar ke nilai kolom bootstrap, tetapi bagaimana dengan nilai tinggi? Apakah ada yang mendapatkan solusi untuk ini? Hardcoding nilai ketinggian mungkin membuat masalah responsif

michaellwatson pada 30 Agu 2017

👍3

Semua 19 komentar

Pustaka bukan perancang untuk file bootstrap statis. Anda dapat mencoba membuat desainer menggunakan gridstack, membuat serializer Anda sendiri yang akan membuat kode HTML yang sesuai.

troolee pada 27 Mar 2015

Terima kasih @troolee . Sebenarnya itu adalah bagian dari pertanyaan saya: bagaimana cara membuat serial ke bootstrap html yang kompatibel dari grid? Apakah Anda memiliki rutinitas pembantu? Sepertinya Anda menggunakan koordinat x, y khusus - dokumentasi apa pun tentang cara mengonversinya menjadi col-md-xyz yang kompatibel dengan bootstrap, dll.?

KrishnaPG pada 27 Mar 2015

Anda dapat menggunakan CSS yang sama seperti yang digunakan gridstack:

.grid-stack-item[data-gs-x=1] { left: ... };
.grid-stack-item[data-gs-x=2] { left: ... };
.grid-stack-item[data-gs-x=3] { left: ... };

dan seterusnya. Kemudian buat HTML dengan atribut yang sama data-gs-x , ` data-gs-width ...

troolee pada 27 Mar 2015

@KrishnaPG , @troolee apakah Anda tahu atau dapatkah Anda membuat serializer? Jika ya, maukah Anda membagikan kode Anda? ( mencoba untuk menghindari menemukan kembali roda jika sesuatu sudah ada )

artknight pada 11 Des 2015

Tidak @artknight , saya tidak dapat menyelesaikan bagian serialisasi.

KrishnaPG pada 11 Des 2015

Adakah ekspor ke Bootstrap HTML statis atau serializer yang tersedia? Saya secara khusus mencari itu.

saurabhsbhatt pada 4 Mei 2017

vineetk68 pada 31 Mei 2017

Apa sebenarnya yang Anda coba lakukan? Saya dapat mencoba untuk mempertimbangkan hal ini, tetapi saya tidak yakin apa tujuannya.

radiolips pada 31 Mei 2017

Saya memiliki masalah yang sama, saya mencoba membuat html bootstrap statis menggunakan gridstack. bagaimana cara mengekspor html ke statis?
@radiolips

ahmedfekry pada 3 Jun 2017

Seperti yang disebutkan troolee, Anda cukup menggunakan HTML dan CSS tanpa benar-benar melakukan semua Javascript. Itu harus mencapai apa yang Anda coba lakukan. Apa hal spesifik yang Anda coba lakukan yang tidak dapat Anda lakukan?

radiolips pada 3 Jun 2017

Saya telah mencoba menggunakan html dan css tetapi properti "data-gs-y" dan "data-gs-height" gagal dimuat mencoba mencarinya di css tetapi tidak menemukannya.

ahmedfekry pada 3 Jun 2017

michaellwatson pada 30 Agu 2017

👍3

Saya menggunakan gridstack untuk memungkinkan pembuatan formulir DnD dari bidang DB yang tersedia. Saya juga ingin membuat konverter ke tata letak grid BS tetapi dalam jangka pendek saya menggunakan gridstack untuk merender formulir dan menonaktifkan DnD melalui opsi gridstack.

Proses konversi mungkin memerlukan baris dan kolom bersarang saat beberapa item lebih dari 1 unit tinggi yang tampaknya merupakan proses yang agak rumit dan dapat menyebabkan urutan rendering yang tidak terduga saat mengurangi area pandang (seperti untuk tampilan seluler).

Saya akan memposting kembali jika saya mendapatkan sesuatu yang berguna dikembangkan tetapi sementara itu akan merekomendasikan hanya menggunakan gridstack untuk merendernya tanpa DnD.

Educ8IT pada 19 Nov 2017

Saya juga sedang mencari konversi ke tata letak bootstrap statis. Saya menggunakan gridstack sebagai desainer DnD untuk membuat tata letak dasbor, namun saat melihat dasbor secara langsung, itu akan statis (tidak ada DnD), tetapi harus bergantung pada fungsionalitas responsif bootstrap untuk merespons viewports yang berbeda dengan tepat.

campaignium pada 16 Jan 2018

Halo semuanya, saya mencoba melakukan hal yang sama di php tetapi saya agak terjebak dengan baris bersarang. Apakah seseorang berhasil melakukan ini?
Terima kasih :)

BakaaToTest pada 23 Jul 2018

@BakaaToTest Saya melakukan contoh bersarang ini jika itu membantu https://codepen.io/michaellwatson/pen/EvGEgM

michaellwatson pada 23 Jul 2018

terima kasih banyak tapi bukan itu yang saya bicarakan. Saya mencoba dari gridstack json like

'[ { "x": 0, "y": 6, "width": 8, "height": 6, "index": "1" }, { "x": 8, "y": 0, "width": 4, "height": 4, "index": "3" }, { "x": 8, "y": 4, "width": 4, "height": 2, "index": "4" }, { "x": 0, "y": 0, "width": 12, "height": 2, "index": "5" } ]';

untuk membuat kisi bootstrap serupa di php. Karena di aplikasi saya di back office saya bisa memilih tampilan front office dengan gridstack.js tetapi di front office akan ditampilkan di boostrap dengan beberapa konten di setiap bloknya.

BakaaToTest pada 23 Jul 2018

Apakah Anda memiliki contoh dari apa yang ingin Anda lakukan?

michaellwatson pada 23 Jul 2018

Misalnya dari ini
gristackjs