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 showModalDialog模态对话框使用说明
Dec 31 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
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
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
说说node中的可读流和可写流的区别
2018/06/01 Javascript
JS实现轮播图效果
2020/01/11 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python语法分析之字符串格式化
2019/06/13 Python
对Python函数设计规范详解
2019/07/19 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
django 外键创建注意事项说明
2020/05/20 Python
python右对齐的实例方法
2020/07/05 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
工作调动申请报告
2015/05/18 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS