使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能


Posted in Javascript onNovember 27, 2017

一、写在前面

1. Bootstrap是一个由 Twitter 开发和维护的前端框架,目前很受欢迎,Bootstrap中文网点击这里。

2. Vue.js 是一套构建用户界面的渐进式框架,点这里访问官网。

二、实现效果:

使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

三、页面引入bootstrap、vue资源

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" >
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="external nofollow" >
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>

这里需要注意的是,Boostrap依赖于JQuery,必须在引入Boostrap之前引入JQuery。

四、绘制表格

1.工具栏区

<div class="row mx-auto w-75">
 <div class="col-6">
  <div class="btn-group">
  <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>
  <button type="button" class="btn btn-outline-primary btn-sm" @click="saveRows">保存</button>
  </div>
  <button type="button" class="btn btn-outline-warning btn-sm" @click="delRows">删除</button>
 </div>
 <div class="col-6">
  <div class="input-group">
  <input type="text" class="form-control input-group-sm" placeholder="输入设备编号进行搜索">
  <span class="input-group-btn">
   <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
   </span>
  </div>
 </div>
 </div>

2.表格区

<div class="row mx-auto w-75">
 <div class="col-12">
  <table class="table table-hover table-success">
  <thead class="thead-default">
  <tr>
   <th><input type="checkbox"></th>
   <th>序号</th>
   <th>设备编号</th>
   <th>设备名称</th>
   <th>设备状态</th>
   <th>采购日期</th>
   <th>设备管理员</th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="(facility,index) in facilities">
   <td><input type="checkbox" :value="index" v-model="checkedRows"></td>
   <td>{{index+1}}</td>
   <td>{{facility.code}}</td>
   <td>{{facility.name}}</td>
   <td>{{facility.states}}</td>
   <td>{{facility.date}}</td>
   <td>{{facility.admin}}</td>
  </tr>
  </tbody>
  </table>
 </div>
 </div>

这里需要说明的是:

1.表格table的class Bootstrap3和Boostrap4有所不同;

2. vue.js for循环,vue1与vue2有所出入,尤其是下标index的使用。

以上两点我们在使用中需要根据自己的版本做相应调整了。

至此,展示表格数据的静态页面已经完成,接下来我们使用Vue.js使表格数据成为动态的。

五、 创建VUE对象、初始化表格数据

1.初始化数据

var datas = [
 {
  code: "A2017-001",
  name: "3800充电器",
  states: "正常",
  date: "2017-01-21",
  admin: "andy"
 },
 {
  code: "A2017-002",
  name: "Lenovo Type-c转接器",
  states: "正常",
  date: "2017-01-21",
  admin: "zero"
 }];

Tips: datas在实际的场景中应当是通过ajax的方式访问后台获取的业务数据。

2.创建vue对象

new Vue({
 el: "#vueApp",
 data: {
  checkAll: false,// 是否全选
  checkedRows: [],// 选中的行标,用于删除行
  facilities: datas,// 表格数据
  newRow:{}// 新增的行数据,用于新增行
 }
 })

ok,我们已经完成了表格数据的动态展示,下面我们来实现删除行数据功能。

六、删除行

删除按钮:

<button type="button" class="btn btn-outline-warning btn-sm" @click="delRows">删除</button>

实现删除功能:

delRows:function () {
  if (this.checkedRows.length <= 0){//是否选中判断
   alert("您未选择需要删除的数据");
   return false;
  }
  if (!confirm("您确定要删除选择的数据吗?")){//删除确认
   return false;
  }

  for(var i=0;i<this.checkedRows.length;i++){//循环获取选中的行标
   var checkedRowIndex = this.checkedRows[i];
   /**根据下标移除数组元素*/
   this.facilities = $.grep(this.facilities,function (facility,j) {
   return j != checkedRowIndex;
   });
  }
  this.checkedRows = [];//清空选中行数据
  }

实现效果:

使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

七、新增行

1.新增按钮

<button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>

2.添加模态框用于录入新增数据

<div class="modal fade" id="myModal">
 <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
   <h4 class="modal-title">新增设备信息</h4>
   <button type="button" class="close" data-dismiss="modal">×</button>
  </div>
  <div class="modal-body">
   <div class="row">
   <div class="col-3">设备编号:</div>
   <div class="col-9">
    <input class="form-control" placeholder="设备编号" v-model="newRow.code">
   </div>
   </div>
   <div class="row">
   <div class="col-3">设备名称:</div>
   <div class="col-9">
    <input class="form-control" placeholder="设备名称" v-model="newRow.name">
   </div>
   </div>
   <div class="row">
   <div class="col-3">设备状态:</div>
   <div class="col-9">
    <input class="form-control" placeholder="设备状态" v-model="newRow.states">
   </div>
   </div>
   <div class="row">
   <div class="col-3">采购日期:</div>
   <div class="col-9">
    <input class="form-control" placeholder="采购日期" v-model="newRow.date">
   </div>
   </div>
   <div class="row">
   <div class="col-3">管理员:</div>
   <div class="col-9">
    <input class="form-control" placeholder="管理员" v-model="newRow.admin">
   </div>
   </div>
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-outline-primary" data-dismiss="modal" @click="addRow">确认</button>
  </div>
  </div>
 </div>
 </div>

3.实现新增逻辑

addRow: function () {
  this.facilities.push(this.newRow);//新行数据追加至表格数据数组中
  this.newRow = {};//新行数据置空
  }

使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

好了,动态展示、新增和删除功能就讲完了,后边有空我们再来讨论页面上未实现的全选、快速检索等功能。

附1:完整js

<script>
 var datas = [
 {
  code: "A2017-001",
  name: "3800充电器",
  states: "正常",
  date: "2017-01-21",
  admin: "andy"
 },
 {
  code: "A2017-002",
  name: "Lenovo Type-c转接器",
  states: "正常",
  date: "2017-01-21",
  admin: "zero"
 }];
 new Vue({
 el: "#vueApp",
 data: {
  checkAll: false,
  checkedRows: [],
  facilities: datas,
  newRow:{}
 },
 methods: {
  addRow: function () {
  this.facilities.push(this.newRow);
  this.newRow = {};
  },
  saveRows:function () {//保存表格数据
  },
  delRows:function () {
  if (this.checkedRows.length <= 0){
   alert("您未选择需要删除的数据");
   return false;
  }
  if (!confirm("您确定要删除选择的数据吗?")){
   return false;
  }
  for(var i=0;i<this.checkedRows.length;i++){
   var checkedRowIndex = this.checkedRows[i];
   this.facilities = $.grep(this.facilities,function (facility,j) {
   return j != checkedRowIndex;
   });
  }
  this.checkedRows = [];
  }
 }
 });
</script>

页面源码已共享至GitHub, 点击这里 可查看下载,欢迎探讨。

总结

以上所述是小编给大家介绍的使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
基于vue2.0实现简单轮播图
Nov 27 #Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 #Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 #Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 #Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 #Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 #Javascript
在vue中实现简单页面逆传值的方法
Nov 27 #Javascript
You might like
php中apc缓存使用示例
2013/12/25 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
关于redux-saga中take使用方法详解
2018/02/27 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Python中字典的基本知识初步介绍
2015/05/21 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
python图形用户接口实例详解
2019/12/16 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Python生成器generator原理及用法解析
2020/07/20 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
英语辞职信怎么写
2015/02/28 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle