Vue.js仿Metronic高级表格(一)静态设计


Posted in Javascript onApril 17, 2017

Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables,本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库,jQuery做部分用户交互(弹窗)。

使用到的库:Vue 2.0,Bootstrap3、jQuery2、font-awesome4,均可在CDN下载

需要注意的是,Vue最好使用开发版本

一、需求和原型设计

产品目标是一个图书管理表格,书籍字段:书籍名称、分类、价格、更新时间。

需求:

① 书籍信息的增删改

② 分页功能,并且能自行选择页容量

③ 能展示 根据任一字段进行关键字匹配后的条目

④ 能自动保存本次操作的数据

原型:

Vue.js仿Metronic高级表格(一)静态设计

原型说明:

① 页码区提供 上一页、页码列表、下一页 按钮

② 点击修改时,上部表单内容为原始数据,“添加”按钮变为“修改”,此时点击修改,才将数据保存生效;如果此时点击重新填写则是放弃修改。

③ 点击删除时弹框提示是否删除

二、准备工作

① 搭建运行环境

不建议使用浏览器直接打开网页,建议搭建一个Web环境来进行测试。

建议使用WAMP、XAMPP等集成环境,安装简便易于操作

② 引入各类库

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" 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则不会产生警告信息,并且不能正常渲染

三、数据输入(添加、修改)

按照原型图:

Vue.js仿Metronic高级表格(一)静态设计Vue.js仿Metronic高级表格(一)静态设计

写出表单:

<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'

四、展示

① 表头

Vue.js仿Metronic高级表格(一)静态设计

Vue.js仿Metronic高级表格(一)静态设计

<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'来调整布局

② 主体

Vue.js仿Metronic高级表格(一)静态设计

Vue.js仿Metronic高级表格(一)静态设计

<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' 斑马线效果

五、删除

删除弹窗,原型图没给出,所以自行发挥想象力。

Vue.js仿Metronic高级表格(一)静态设计

模态框:

<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> 
    <h4 class="modal-title">提示</h4> 
   </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‘

③ 'ב是一个实体标记,代表是 ×

五步完成后,样子是:

Vue.js仿Metronic高级表格(一)静态设计

(额这个录屏的工具貌似吧table-striped的效果抹去了。。。)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
Div Select挡住的解决办法
Aug 07 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
详解webpack 多入口配置
Jun 16 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 Javascript
react.js CMS 删除功能的实现方法
Apr 17 #Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 #Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 #Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 #jQuery
Vue分页组件实例代码
Apr 17 #Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 #Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 #Javascript
You might like
使用无限生命期Session的方法
2006/10/09 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
微信小程序实现留言板
2018/10/31 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
35个Python编程小技巧
2014/04/01 Python
Python实现批量下载文件
2015/05/17 Python
Python实现高效求解素数代码实例
2015/06/30 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
python线程join方法原理解析
2020/02/11 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
大学毕业生通用求职信
2013/09/28 职场文书
专升本个人自我评价
2013/12/22 职场文书
英文感谢信格式
2015/01/21 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸