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 读后台cookie代码
Sep 15 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
javascript常见用法总结
May 22 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
Vue.js表单控件实践
Oct 27 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
详解vuex的简单todolist例子
Jul 14 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/10/09 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
php实现上传图片文件代码
2015/07/19 PHP
php中关于换行的实例写法
2019/09/26 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
PHP PDO操作总结
2014/11/17 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
Python yield使用方法示例
2013/12/04 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python机器学习实现决策树
2019/11/11 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
教学个人的自我评价分享
2014/02/16 职场文书
设计顾问服务计划书
2014/05/04 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
驻村工作简报
2015/07/20 职场文书
护理自荐信
2019/05/14 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python