hujung hadapan web
Soal Jawab bahagian hadapan
Apakah bentuk pemalam yang digunakan oleh bootstrap?
Apakah bentuk pemalam yang digunakan oleh bootstrap?
Nov 11, 2021 pm 02:07 PM
Bootstrap boleh menggunakan pemalam jadual "Bootstrap-Table". "Bootstrap-Table" ialah pemalam jadual jQuery berdasarkan Bootstrap Melalui tetapan mudah, anda boleh mempunyai fungsi berkuasa pemilihan tunggal, pilihan berbilang, pengisihan, halaman, menyunting, mengeksport, menapis, dll.
Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3
"Bootstrap-Table" pemalam meja tersedia untuk bootstrap.
Jadual Bootstrap ialah pemalam jadual jQuery berdasarkan Bootstrap Ia mempunyai fungsi yang agak lengkap dan boleh merealisasikan satu siri fungsi seperti pemerolehan data tak segerak, penyuntingan, pengisihan, dll. Perkara yang paling berharga ialah ia. hanya memerlukan beberapa konfigurasi mudah. ??Borang dalam talian yang berfungsi sepenuhnya.
Alamat tapak web rasmi: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Alamat Github: https://github.com/wenzhixin/ bootstrap -table
Dokumentasi Cina: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Fungsi utama
Menyokong Bootstrap 3 dan Bootstrap 2
Antara muka boleh suai
Pengepala tetap
Parameter konfigurasi yang sangat kaya
Gunakan terus melalui teg
Tunjukkan/sembunyikan lajur
Tunjukkan /hide table header
Dapatkan data dalam format JSON melalui AJAX
Sokongan pengisihan
Format jadual
Sokong pilihan tunggal atau berbilang
Fungsi paging yang berkuasa
Paparan kad sokongan
Sokong berbilang bahasa
Sokongan pemalam
Kelebihan
Kos pembelajaran yang rendah, konfigurasi ringkas, dokumentasi lengkap
Sambungan lancar dengan Bootstrap, gaya keseluruhan yang konsisten dan mudah untuk pembangunan menengah
Pembangun aktif dan penyelenggaraan tetap pada Github
Pengenalan Jadual Bootstrap
Mengenai pengenalan Jadual Bootstrap, secara amnya terdapat dua kaedah:
1 Muat turun kod sumber terus dan tambahkannya pada projek.
Memandangkan Bootstrap Table ialah komponen Bootstrap, ia bergantung pada Bootstrap terlebih dahulu kita perlu menambah rujukan kepada Bootstrap. Pakej Bootstrap boleh didapati terus di http://v3.bootcss.com/ Versi pratonton versi 4 telah dikeluarkan, tetapi masih disyorkan untuk menggunakan Bootstrap3 yang agak stabil, 3.3.5 terkini. Kemudian terdapat pakej Bootstrap Table Memandangkan ia adalah sumber terbuka, kita boleh terus ke kod sumbernya https://github.com/wenzhixin/bootstrap-table dan git ke bawah. Kemudian tambahkan kedua-dua pakej ini pada projek masing-masing.
2 Gunakan Nuget ajaib kami
untuk membuka Nuget dan cari dua pakej ini
Kami terus Pasang sahaja.
Versi Bootstrap Table sebenarnya 0.4, yang terlalu menipu. Oleh itu, penulis blog mencadangkan pakej Bootstrap Table perlu dimuat turun terus daripada kod sumber. Versi terkini Bootstrap Table nampaknya 1.9.0.
Penjelasan kod terperinci
Sudah tentu, apabila komponen itu dirujuk, penggunaannya mudah, tetapi ia melibatkan banyak butiran yang perlu kita bincangkan kemudian Mari kita lihat cara menggunakannya dahulu.
1. Rujuk komponen yang berkaitan pada halaman cshtml dan tentukan jadual kosong.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>BootStrap Table使用</title>
@*1、Jquery組件引用*@
<script src="~/Scripts/jquery-1.10.2.js"></script>
@*2、bootstrap組件引用*@
<script src="~/Content/bootstrap/bootstrap.js"></script>
<link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
@*3、bootstrap table組件以及中文包的引用*@
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
<link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
@*4、頁面Js文件的引用*@
<script src="~/Scripts/Home/Index.js"></script>
</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
<div class="panel panel-default">
<div class="panel-heading">查詢條件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="txt_search_departmentname">部門名稱</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_departmentname">
</div>
<label class="control-label col-sm-1" for="txt_search_statu">狀態(tài)</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_statu">
</div>
<div class="col-sm-4" style="text-align:left;">
<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查詢</button>
</div>
</div>
</form>
</div>
</div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
</button>
</div>
<table id="tb_departments"></table>
</div>
</body>
</html>Selepas memperkenalkan fail yang diperlukan, perkara yang paling penting bagi kami ialah menentukan jadual kosong, seperti di atas
2. Permulaan Js
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的點擊事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: '/Home/GetDepartment', //請求后臺的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設(shè)置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
pageNumber:1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數(shù)（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務(wù)端，所以，個人感覺意義不大
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數(shù)
clickToSelect: true, //是否啟用點擊選中行
height: 500, //行高，如果沒有設(shè)置height屬性，表格自動根據(jù)記錄條數(shù)覺得表格高度
uniqueId: "ID", //每一行的唯一標識，一般為主鍵列
showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
columns: [{
checkbox: true
}, {
field: 'Name',
title: '部門名稱'
}, {
field: 'ParentName',
title: '上級部門'
}, {
field: 'Level',
title: '部門級別'
}, {
field: 'Desc',
title: '描述'
}, ]
});
};
//得到查詢的參數(shù)
oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
limit: params.limit, //頁面大小
offset: params.offset, //頁碼
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化頁面上面的按鈕事件
};
return oInit;
};Permulaan jadual juga sangat mudah, cuma tentukan parameter yang berkaitan. Beberapa parameter yang difikirkan penting oleh penulis blog di atas telah diulas, dan beberapa parameter yang diperlukan untuk memulakan Jadual juga telah ditandakan dengan (* Jika jadual anda juga mempunyai terlalu banyak keperluan halaman, secara langsung Ia boleh diselesaikan dengan parameter yang diperlukan. Begitu juga, sebenarnya terdapat banyak parameter yang perlu ditetapkan dalam parameter lajur, seperti pengisihan lajur, penjajaran, lebar, dsb. Blogger ini berpendapat ia agak mudah dan tidak melibatkan fungsi jadual. Mereka hanya boleh melihat API dan menyelesaikannya.
3、在Controller里面對應(yīng)的方法
public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu)
{
var lstRes = new List<Department>();
for (var i = 0; i < 50; i++)
{
var oModel = new Department();
oModel.ID = Guid.NewGuid().ToString();
oModel.Name = "銷售部" + i ;
oModel.Level = i.ToString();
oModel.Desc = "暫無描述信息";
lstRes.Add(oModel);
}
var total = lstRes.Count;
var rows = lstRes.Skip(offset).Take(limit).ToList();
return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
}這里有一點需要注意：如果是服務(wù)端分頁，返回的結(jié)果必須包含total、rows兩個參數(shù)。漏寫或錯寫都會導(dǎo)致表格無法顯示數(shù)據(jù)。相反，如果是客戶端分頁，這里要返回一個集合對象到前端。
4、效果及說明
還是貼幾張效果圖出來：
推薦學(xué)習(xí)：《bootstrap使用教程》
Atas ialah kandungan terperinci Apakah bentuk pemalam yang digunakan oleh bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara Mengesahkan Tarikh Bootstrap
Apr 07, 2025 pm 03:06 PM
Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.
Cara mendapatkan bar carian bootstrap
Apr 07, 2025 pm 03:33 PM
Cara menggunakan Bootstrap untuk mendapatkan nilai bar carian: Menentukan ID atau nama bar carian. Gunakan JavaScript untuk mendapatkan elemen DOM. Mendapat nilai elemen. Lakukan tindakan yang diperlukan.
Cara melihat tarikh bootstrap
Apr 07, 2025 pm 03:03 PM
Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
10 alat terkini untuk pemaju web
May 07, 2025 pm 04:48 PM
Reka bentuk pembangunan web adalah bidang kerjaya yang menjanjikan. Walau bagaimanapun, industri ini juga menghadapi banyak cabaran. Memandangkan lebih banyak perniagaan dan jenama beralih ke pasaran dalam talian, pemaju web mempunyai peluang untuk menunjukkan kemahiran mereka dan berjaya dalam kerjaya mereka. Walau bagaimanapun, apabila permintaan untuk pembangunan web terus berkembang, bilangan pemaju juga semakin meningkat, mengakibatkan persaingan yang semakin sengit. Tetapi ia menarik bahawa jika anda mempunyai bakat dan kehendak, anda sentiasa dapat mencari cara baru untuk membuat reka bentuk dan idea yang unik. Sebagai pemaju web, anda mungkin perlu terus mencari alat dan sumber baru. Alat dan sumber baru ini bukan sahaja menjadikan pekerjaan anda lebih mudah, tetapi juga meningkatkan kualiti kerja anda, dengan itu membantu anda memenangi lebih banyak perniagaan dan pelanggan. Trend pembangunan web sentiasa berubah.
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
