使用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 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
Javascript的无new构建实例详解
May 15 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
基于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开发需要注意的安全问题
2010/09/01 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
php实现字符串翻转的方法
2015/03/27 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
js编写简易的计算器
2020/07/29 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
Python 常用string函数详解
2016/05/30 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
蛋糕店的商业计划书范文
2014/01/27 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
供电工程专业求职信
2014/08/09 职场文书
车辆委托书范本
2014/10/05 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
暑期社会实践证明书
2014/11/17 职场文书
故宫导游词
2015/01/31 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
财产分割协议书
2016/03/22 职场文书
python APScheduler执行定时任务介绍
2022/04/19 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript