溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Metronic高級表格是Metonic框架中自行實現的表格，其底層是Datatables，本教程將主要使用Vue實現交互部分，使用Bootstrap做樣式庫，jQuery做部分用戶交互（彈窗）。
使用到的庫：Vue 2.0，Bootstrap3、jQuery2、font-awesome4，均可在CDN下載
需要注意的是，Vue最好使用開發版本
一、需求和原型設計
產品目標是一個圖書管理表格，書籍字段：書籍名稱、分類、價格、更新時間。
需求：
① 書籍信息的增刪改
② 分頁功能，并且能自行選擇頁容量
③ 能展示 根據任一字段進行關鍵字匹配后的條目
④ 能自動保存本次操作的數據
原型：
原型說明：
① 頁碼區提供 上一頁、頁碼列表、下一頁 按鈕
② 點擊修改時，上部表單內容為原始數據，“添加”按鈕變為“修改”，此時點擊修改，才將數據保存生效；如果此時點擊重新填寫則是放棄修改。
③ 點擊刪除時彈框提示是否刪除
二、準備工作
① 搭建運行環境
不建議使用瀏覽器直接打開網頁，建議搭建一個Web環境來進行測試。
建議使用WAMP、XAMPP等集成環境，安裝簡便易于操作
② 引入各類庫
<link rel="stylesheet"> <link rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="/static/vue.js"></script>
注意vue.js的路徑，下載到本地進行引入（此處使用的是web絕對路徑'/static/vue.js'）
③ 進行最簡單的Vue測試
<div id="content">
{{msg}}
</div>
<script>
window.onload = function () {
var vm = new Vue({
el:'#content',
data: {
msg:'hello vue'
}
});
}
</script>
值得注意的是，el選項不能為‘body'或‘html'，否則會提示警告信息并且不能正常渲染。
生產版本的vue則不會產生警告信息，并且不能正常渲染。
三、數據輸入（添加、修改）
按照原型圖：
寫出表單：
<form action="" class="col-md-4 col-md-offset-4 form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label" >書名: </label>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="請輸入書名">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" >類別: </label>
<div class="col-md-9" >
<select class="form-control">
<option value="0">科技</option>
<option value="1">文化</option>
<option value="2">經濟</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" >價格: </label>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="請輸入價格">
</div>
</div>
<div class="form-group text-right">
<input type="button" class="btn btn-primary" value="添加">
<input type="reset" class="btn btn-default" value="重新填寫">
</div>
</form>
值得關注的是：
① 'form-control' 這個class樣式會獨占一行。要使label和input在一行，利用bootstrap的柵格化布局即可，經過調整得出3：9的布局是比較合適的。
② 'form-horizontal' 樣式作用于form元素可以美化表格。它可以讓每個form-group之間留出間隙，變得不那么緊湊；還可以使label的內容居中。
③ ‘col-md-4 col-md-offset-4' 可以使一個元素居中，并且寬度是‘col-md-4'
四、展示
① 表頭
<div class="form-horizontal">
<div class="form-group col-md-6 ">
<label class="col-md-2 control-label" >每頁</label>
<div class="col-md-3">
<select class="form-control">
<option value="5">5條</option>
<option value="10">10條</option>
<option value="15">15條</option>
<option value="20">20條</option>
</select>
</div>
</div>
<div class="form-group col-md-6">
<label class="col-md-3 col-md-offset-3 control-label" >搜索: </label>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="請輸入關鍵字">
</div>
</div>
</div>
這部分較簡單，這里依然使用到了‘form-horizontal'來調整布局
② 主體
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<td width="50">序號</td>
<td>書名</td>
<td>類別</td>
<td>價格(元)</td>
<td>更新時間</td>
<td width="140">操作</td>
</tr>
</thead>
<tbody >
<tr>
<td>1</td>
<td>標準日本語</td>
<td>文化</td>
<td>¥ 31.00</td>
<td>2017年04月16日14:26:43</td>
<td>
<button class="btn btn-info btn-xs">
<i class="fa fa-pencil"></i>
修改
</button>
<button class="btn btn-danger btn-xs">
<i class="fa fa-trash"></i>
刪除
</button>
</td>
</tr>
</tbody>
</table>
① ‘table-bordered‘ 添加單元格的邊框
② 'table-hover‘ 鼠標懸停一行有樣式
③ 'table-striped' 斑馬線效果
五、刪除
刪除彈窗，原型圖沒給出，所以自行發揮想象力。
模態框：
<div id="general_dialog" class="modal fade bs-example-modal-sm" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" >×</button>
<h5 class="modal-title">提示</h5>
</div>
<div class="modal-body">
您確認要刪除xxx嗎?
</div>
<div class="modal-footer text-right">
<button class="btn btn-default" data-dismiss="modal">取消</button>
<button class="btn btn-danger" data-dismiss="modal">刪除</button>
</div>
</div>
</div>
</div>
這樣寫，初始是不會出來的，在刪除按鈕元素上添加：
data-toggle="modal" data-target="#general_dialog"
那么點擊按鈕的時候，就會彈出來（此處需要引入bootstrap.js哦）
① ‘fade‘ 表示模態框是淡入淡出的
② 'bs-example-modal-sm' 是指模態框的大小是'sm‘
③ 'ב是一個實體標記，代表是 ×
五步完成后，樣子是：
（額這個錄屏的工具貌似吧table-striped的效果抹去了。。。）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
