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 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
Jquery 扩展方法
May 06 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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
PHP通用检测函数集合
2006/11/25 PHP
php google或baidu分页代码
2009/11/26 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
Javascript 汉字字节判断
2009/08/01 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
JS求平均值的小例子
2013/11/29 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
python 实现插入排序算法
2012/06/05 Python
深入浅析python继承问题
2016/05/29 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
给儿子的表扬信
2014/01/15 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
应届生求职信范文
2014/06/30 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
运动会新闻稿
2015/07/17 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书