Dalam artikel sebelumnya, ringkasan pengalaman dari kerangka kerja pengembangan metronik Bootstrap dirangkum [i] Tinjauan Kerangka dan Pemrosesan Modul Menu, beberapa ringkasan dasar dari kerangka pengembangan bootstrap, termasuk efek antarmuka secara keseluruhan, serta tata letak, menu, dll. Artikel ini melanjutkan topik ini dan memperkenalkan topik yang umum digunakan sebagai pemrosesan halaman yang umum digunakan sebagai pemrosesan halaman data yang digunakan sebagai pengangkutan data yang digunakan sebagai pemrosesan data yang digunakan pada hasil data yang digunakan dengan hasil data yang digunakan dengan hasil data yang digunakan dengan hasil data paging yang digunakan dengan hasil data paging yang digunakan dengan hasil data paging yang digunakan dengan hasil data paging.
Dalam tampilan antarmuka data, tampilan dan paging data tabel adalah operasi pemrosesan yang sangat umum. Menggunakan tata letak gaya Bootstrap dan pemrosesan data AJAX JQuery, tampilan dinamis dan paging data dapat dicapai dengan baik.
1. Daftar tampilan dan pemrosesan paging 1) Daftar Tampilan Data
Di banyak halaman, kita umumnya perlu mendaftar dan memberi paginasi catatan basis data.
Bagian berikut dari daftar pohon di sebelah kiri adalah area tampilan kueri data umum di sebelah kanan, yang dibagi menjadi dua bagian: konten kueri dan daftar data. Konten kueri biasanya ditempatkan dalam bentuk untuk diproses. Ketika pengguna memicu kueri, kami memproses acara dan meminta data yang sesuai dari pengontrol di latar belakang MVC untuk mengembalikannya ke ujung depan halaman, dan menampilkan dan memberi paginasi data.
Seperti yang ditunjukkan pada kode kueri halaman menu, berikut ini ditampilkan.
<Form id = "ffsearch"> <div> <div> <label> Nama tampilan </label> <vi> <input name = "whc_name" type = "text"> </div> </div> </div> <vter> <vel> <label> ID fungsi </label> </Div> <input name = "whc_function" type = "TEXT =" TEXT "</Div> </Div =" whc_function "TYPE =" TEXT = "TEXT" </Div> </Div> </Div = "whc_function" <label> <label> </Div> </Div = "whc_function" type = "TEXT =" TEXT " <LABEL> Alamat Koneksi Web </LABEL> <IV> <INPUT NAME = "whc_url" type = "text"> </div> </div> </div> <div> <div> <label> Ikon menu web </LABEL> <DIV> <Input Name = "whc_webicon" type = "text"> </Div> </Div> </form
Dalam kode JS halaman, kami memproses pemrosesan data setelah halaman diinisialisasi, seperti yang ditunjukkan dalam skrip berikut.
// halaman inisialisasi $ (function () {initjStree (); // inisialisasi pohon bindevent (); // pengikat pencarian pemrosesan peristiwa (currentPage); // inisialisasi data halaman pertama initdictitem (); // informasi kamus inisialisasi});Kode HTML untuk menampilkan data ditunjukkan di bawah ini. Konten utama header tabel ditampilkan, dan konten utama tabel grid_body dibangun secara dinamis dan ditampilkan oleh skrip.
<Table ID = "grid" cellPadding = "0" cellPacing = "0"> <thead id = "grid_head"> <tr> <th> <input type = "centang" ontClick = "selectAll (this)"> </th> name tampilan </th> <tH> penyortiran </th> <tH> </th> </th> </th> <tH> sortir </th> <thir> </th> </th> </th </th> </th> </th> </th> </th> tH </th </th memu </th> </th> </th> function id function </th> </th </th </th </th </th> </th> function id function </th> <TH> Ikon Menu Web </th> <th> Nomor Sistem </th> <th> Operasi </th> </tr> </thaid> <tbody id = "grid_body"> </tbody> </able> <div> <ul id = 'grid_paging'> </ul> </div>
Tampilan data diproses melalui fungsi skrip pencarian setelah halaman siap. Saat memproses, terlebih dahulu lulus kondisi formulir nomor seri dan informasi kondisi paging ke pengontrol MVC untuk mendapatkan data daftar yang sesuai, dan mengikatnya secara dinamis pada antarmuka untuk menyelesaikan seluruh proses pemrosesan. Tangkapan layar kode spesifik ditunjukkan di bawah ini.
Dan kode di dalamnya
tr += getActionHtml (item.id);
Kemudian, beberapa tombol operasi dihasilkan melalui skrip, antarmuka adalah sebagai berikut.
2) Pemrosesan Paging Data
Data yang ditampilkan pada halaman kami umumnya bukan catatan tetap, jadi pagination juga merupakan pemrosesan yang diperlukan, yang dapat meningkatkan kinerja dan meningkatkan pengalaman ramah pengguna. Data pagination diproses menggunakan paginator bootstrap plug-in bootstrap. Kontrol ini banyak digunakan dan merupakan plugin paging yang sangat kuat.
Bootstrap Paginator Alamat kode githubnya adalah: https://github.com/lyonlai/bootstrap-paginator
Contoh penggunaannya dapat diperkenalkan, silakan merujuk ke: http://lyonlai.github.io/bootstrap-paginator/
Saat menggunakan kontrol ini, setelah memperkenalkan gaya jQuery dan bootstrap dan pustaka kelas, Anda dapat menambahkan dan menggunakannya melalui baris kode berikut.
<skrip src = "/js/bootstrap-paginator.min.js"> </script>
Paging kontrol ini dapat diimplementasikan dengan menangani acara yang diklik halaman dan diubah halaman.
Untuk menampilkan konten di halaman, kami menambahkan div ke kode HTML dan mendeklarasikan elemen UL dengan ID grid_paging. Kode adalah sebagai berikut.
<div> <ul id = 'grid_paging'> </ul> </div>
Maka kode pemrosesan JS spesifik adalah sebagai berikut.
Di latar belakang MVC, kita perlu mendapatkan kondisi paging dan membentuk kondisi data yang dilewati oleh pengguna di halaman front-end, sehingga kita dapat memperoleh data yang sesuai berdasarkan parameter ini dan mengembalikannya ke klien.
Karena pemrosesan ini sangat umum, kita dapat memasukkannya ke dalam pengontrol kelas dasar untuk diproses. Jika pemrosesan khusus diperlukan, maka tulis ulang fungsi pagination FindWithPager di Subclass Controller.
/// <summary> /// query database sesuai dengan kondisi dan mengembalikan pengumpulan objek (untuk tampilan data pagination) /// </summary> /// <returns> Tentukan koleksi objek </ Returns> public virtual actionResult find withpager () {// periksa apakah pengguna memiliki izin, sebaliknya lempar mydenyccult () {// periksa apakah pengguna memiliki izin, sebaliknya lemparan mydenyaccext () {// apakah pengguna memiliki izin, jika tidak ada mydenyaccult. string where = getPagerCondition (); Pagerinfo pagerinfo = getPagerInfo (); Daftar <T> Daftar = BaseBll.FindWithPager (Where, PagerInfo); // JSON Format Persyaratan {Total: 22, Baris: {}} // Bangun format JSON untuk melewati hasil var = baru {total = pagerInfo.recordcount, baris = daftar}; kembali TOJSONCONTENTDATE (Hasil); }Di antara mereka, getPagerInfo adalah untuk mendapatkan parameter pagination yang dilewati oleh pengguna. Apakah Anda masih ingat parameter URL yang diproses oleh halaman front-end di atas, seperti yang ditunjukkan di bawah ini.
url = "/menu/findWithpager? page =" + page + "& rows =" + baris;
Kode implementasi fungsi pengontrol MVC spesifik GetPagerInfo adalah sebagai berikut.
/// <summary> /// dapatkan data objek pagination sesuai dengan parameter permintaan /// </summary> /// <returns> </eturns> virtual pagerinfo getPagerInfo () yang dilindungi {int pageIndex = request ["page"] == null? 1: int.parse (permintaan ["halaman"]); int pageSize = request ["baris"] == null? 10: int.parse (permintaan ["baris"]); Pagerinfo pagerinfo = pagerinfo baru (); pagerinfo.currenetpageIndex = pageIndex; pagerinfo.pagesize = pagesize; mengembalikan pagerinfo; }Kemudian setelah mendapatkan kondisi bentuk dan kondisi paging, kelas logika bisnis diteruskan ke kerangka kerja sudah cukup. Ini sudah merupakan kategori dukungan di bagian bawah kerangka kerja dan tidak akan terus berkembang.
Daftar <T> Daftar = BaseBll.FindWithPager (Where, PagerInfo);
Efek antarmuka terakhir adalah sebagai berikut
2. Plugin JStree
Bagian sebelumnya juga meningkatkan tampilan daftar pohon. Secara umum, jika data hirarkis, maka tampilan daftar pohon dapat secara intuitif menampilkan strukturnya. Oleh karena itu, dalam banyak kasus, daftar pohon dapat membantu kami dalam tampilan data klasifikasi.
Misalnya, untuk data pengguna, kami dapat mengklasifikasikan struktur atau peran organisasi pengguna, dan mereka dapat ditampilkan secara visual melalui daftar pohon, sehingga ketika kami mencari berbagai jenis daftar pengguna, mudah ditemukan.
Atau untuk data kamus atau data provinsi dan kota, itu juga dapat ditampilkan melalui daftar pohon.
Alamat resmi kontrol JStree adalah https://www.jstree.com/
Situs web telah memperjelas tentang instruksi dan penjelasan kasus tentang kontrol JStree. Secara umum, kita dapat menggunakannya dengan merujuk pada contoh secara langsung.
Kode Penggunaan JStree Sederhana adalah sebagai berikut
$ (function () {$ ('#jStree_demo_div'). jStree ();});Untuk acara JStree, kami umumnya dapat mengikat acara melalui kode berikut.
$ ('#jStree_demo_div'). on ("ganti.jstree", function (e, data) {console.log (data.pelected);});Untuk JStree, kami biasanya menggunakan data JSON untuk mengikat secara dinamis. Definisi format data JSON ini adalah sebagai berikut.
{id: "String" // Parent yang Diperlukan: "String" // Teks yang Diperlukan: "String" // Node Teks Ikon: "String" // String untuk Status Kustom: {dibuka: boolean // adalah simpul terbuka dinonaktifkan: boolean // node yang disabati dipilih: boolean // adalah node yang dipilih}, li_attr: {node {{{{node {{{{node {{{{{node {{node {{{node for node for node {{{{{node {{{{{node {{node {{node {{node {{{{{{{{{node: {} // Atribut untuk node yang dihasilkan}Secara umum, kami menggunakan skrip berikut untuk menghapus dan mengikat data.
$ ('#jStree_demo_div'). Data ('jStree', false); // Bersihkan data, Anda harus // mengikat data json secara tidak sinkron $ .getjson (url, fungsi (data) {$ ('jStree_demo_div'). JStree ({'core': {'{' {'{' {'{' {'{' {'{' {'{' {'{' {'{' {'{' {'{' {'{' {'{' {{{{{{{{{{{{{{{{': }). bind ('loaded.jstree', loadedFunction);});Jika kita perlu memberi pengguna kotak centang dan mengatur status JStree yang dipilih, efek antarmuka adalah sebagai berikut.
Maka fungsi inisialisasi umum perlu diubah, seperti yang ditunjukkan dalam kode berikut
// Kode inisialisasi JStree dengan kotak centang $ .getjson (url, function (data) {control.jstree ({'plugins': ["centang kotak"], // kotak pilihan 'kotak centang': {cascade: "", tiga_state: false}, // tidak cascade 'core': {'data': {"{" {"{" {"{" {"{" {{{"{{{{" {{{{"{{{{" {" }). Bind ('Loaded.jstree', LoadedFunction);Menggabungkan keduanya, kita dapat lebih menyempurnakan pengikatan inisialisasi kontrol JStree ke dalam fungsi publik JS Bindjstree.
// Inisialisasi Kontrol JStree dengan data JSON yang ditentukan // Treeename adalah nama div Tree, URL adalah alamat sumber data, kotak centang adalah apakah akan menampilkan kotak centang, LoadedFunction adalah fungsi callback yang dimuat BindJStree (Treeename, URL, centang, centang, "varstre) {var control = $ ('#' + TREENAME) CONTROUS. Argumen [2] || PALSU; // Atur nilai default kotak centang ke false if (isCheck) {// inisialisasi pohon centang $ .getjson (url, function (data) {control.jstree ({'plugin': ["centang kotak"], // kotak pilihan ': {cascade': "", cascade ': {cascade', cascade: " "Responsif": false}}}). bind ('loaded.jstree', loadedfunction); } else {// Inisialisasi daftar pohon biasa $ .getjson (url, function (data) {control.jstree ({'core': {'data': data, "tema": {"responsive": false}}}). bind ('loaded.jstree', loadedfunction);}); }}Oleh karena itu, ketika halaman mengikat jStree, kode dapat disederhanakan
// inisialisasi daftar fungsi organisasi initdepttreeview () {var treeurl = '/user/getMyDeptJStreejson? Userid =@sesi ["userid"]'; bindjstree ("jStree_div", Treeurl); // Ubah pemrosesan acara kontrol pohon $ ('#jstree_div'). On ("ganti.jstree", function (e, data) {var icon = data.node.icon; loadDatabyou (data.Selected);}); }Untuk daftar kotak centang, kode inisialisasi adalah sebagai berikut.
// inisialisasi semua set fungsi dari semua pengguna var treeUrl = '/function/getrolefunctionjstreebyUser? Userid =@sesi ["userid"]'; bindjstree ("Tree_function", Treeurl, True); // Izin Data Peran, inisialisasi semua departemen pertama TreeUrl = '/user/getMyDeptJStreejson? Userid =@sesi ["userid"]'; bindjstree ("Tree_roledata", Treeurl, True);Untuk kotak centang, kami biasanya menginisialisasi data dan kemudian mengatur status daftar pohon yang dipilih sesuai kebutuhan. Ini tidak memerlukan inisialisasi pohon yang sering, yang secara efektif dapat meningkatkan kinerja dan pengalaman respons.
Setelah menginisialisasi daftar pohon, kita perlu menghapus item pilihan dan kemudian mengatur item pilihan yang kita butuhkan. Kode spesifiknya adalah sebagai berikut, perhatikan pemrosesan peristiwa Uncheck_all dan Check_node.
// inisialisasi rangkaian data set izin (organisasi) function initroledata (id) {if (id! = "") {Var treemenu = "Tree_roledata"; $ ('#' + treemenu) .jstree ("uncheck_all"); // hapus centang semua seleksi // centang konten yang ditentukan $ .getjson ("/roledata/getroledatalist? r =" + math.random () + "& roleid =" + id, fungsi (json) {$.. treemenu) .jstree ('check_node', item); // pilih node}); }}Saat menyimpan data, kami mendapatkan daftar pemilihan node JStree dan kemudian menyimpan data. Kode spesifiknya adalah sebagai berikut.
// Simpan Fungsi Izin Data Peran Saveroledata (RoleID) {var oulist = $ ('#Tree_roledata'). JStree ('get_selected'); var url = '/roledata/updateDATEData? r =' + math.random (); var postdata = {roleId: roleId, oulist: oulist.join (',')}; $ .post (url, postdata, function (json) {initroledata (roleId);}). error (function () {showTips ("Anda tidak berwenang untuk menggunakan fungsi ini, silakan hubungi administrator untuk menanganinya.");}); }Oke, setelah semua, saya telah memperkenalkan tampilan data reguler dan paging data; JStree Binding, Pemrosesan Acara, Penyimpanan Data dan Operasi Lainnya. Saya berharap mendapatkan dukungan Anda yang berkelanjutan. Saya akan terus memperkenalkan poin-poin penting yang terlibat dalam pengembangan bootstrap dan penggunaan berbagai plug-in untuk membuat pembelajaran lebih konkret dan praktis, dan dapat memberi kami referensi yang berguna untuk proyek pengembangan harga nyata.
Konten di atas adalah ringkasan pengalaman kerangka pengembangan metronik bootstrap berdasarkan bootstrap [2] daftar pemrosesan pagination dan penggunaan plug-in JStree, saya harap ini akan membantu semua orang. Saya ingin mengucapkan terima kasih atas dukungan Anda untuk situs web wulin.com. Saya yakin kami akan melakukan yang lebih baik!