首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >弱弱地写了一篇前端教程

弱弱地写了一篇前端教程

作者头像
福贵
发布2020-02-17 14:48:24
1.6K0
发布2020-02-17 14:48:24
举报
文章被收录于专栏:菜鸟致敬菜鸟致敬

分享一篇最近学习总结的前端表格制作教程,先看下方截图,具体演示的功能虽然简单,不过很有实际意义,主要涵盖表格展示数据、删除数据、修改数据、分页、模态窗等常见功能,其中也涉及一些样式的调整,比如隔行变色,此类文章网上很多很多,我也看过不少,但是网上文章都存着一个问题:很多文章代码写的很笼统,跳跃性比较大,你可能哪怕有一个地方看不懂,不知道怎么修改,程序就运行不起来,得不到想要的表格效果和功能,而此篇文章,我会尽可能详细介绍我做的功能的每一步是怎么得来的,并且本文源码也完全开源分享,运行中如果有任何问题,也欢迎留言提一些建议

一、框架选择:

本文主要用bootstrap和bootstrap-table表格库构建演示demo,部分逻辑功能需要手写js/jquery

二、引入库:

导入库我导入的网上的cdn文件,如果需要下载,你可以根据下方版本进行下载,两个css文件,4个js文件,bootstrap-table基于bootstrap,所有要有bootstrap的css和js文件引入,同时也引入jquery

<head>
  <meta charset="UTF-8" />
  <title>表格演示Demo</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>
 </head>

三、页面布局HTML部分:

html部分只放下面两个内容即可:

表格:只放一个空的table即可

模态窗:从bootstrap官方复制粘贴模态窗组件代码,我这里代码有折叠

模态窗代码展开的话,大家就是下面的样子,基本上你就改改一些信息即可,下面的修改按钮,绑定了一个click事件,用来保存修改的数据

四、页面样式部分:看注释

<style type="text/css">
 /* 修改和删除按钮样式*/
 #delUser,#dupUser{
     background: #1caf9a;
     color: #FFFFFF;
     border: none;
     margin-left: 12px;
 }
 /* 表头背景色:蓝色*/
 #mytable tr th{background:#1c91db;color:#fff;}
 
 /* 隔行变色额*/
 #mytable tr:nth-child(even) {
     background: #f0f0f0;
 }
 </style>

五、JS部分

js部分是核心

js第一步:创建表格/参数配置

bootstrapTable方法就是根据你里面的参数创建表格的方法,直接复制粘贴下方代码,最主要你要构造列信息columns和数据data,也是最重要的传入数据,其他的如分页、每页显示条数等根据下方注释,再运行下程序根据显示效果对比,很容易明白

js第二步:构造columns和data

data数据和columns都是常见的[{},{},{}....]的数据结构

对于按钮,我们我们通过formatter字段生成

js第三步:构造删除/修改按钮

这一步构造按钮,通过拼接标签,并分别绑定两个按钮的点击事件

点击删除执行:delUser(this)

点击修改执行:updUser(this)

其中this代表当前按钮,也就是a标签,我们作为参数传入进去

function option(value, row, index) {
  var htm =
  '<button id="delUser" userId='+ value + ' onclick="delUser(this)">删除</button><button id="dupUser" onclick="updUser(this)">修改</button>'
  return htm;
 }

js第四步:删除方法

通过找删除按钮的父元素的父元素,定位到当前行,删除(隐藏)

// 删除
 function delUser(obj) {
 $(obj).parent().parent().hide();
 }

js第五步:修改方法

点击修改某行的数据的时候,先获取下填充到模态窗中,这里弹窗的出现,我们用modal("show")即可,隐藏模态窗modal("hide")

row_tr是获取当前行数,为了下一步保存数据时候知道我改的第几行,用全局变量保存了,后面其他方法可以使用

// 编辑数据
 var row_tr
 function updUser(obj){
     row_tr = obj.parentNode.parentNode.rowIndex;//获取当前行数
     console.log(row_tr)
     name = $(obj).parent().parent().find("td").eq(1).text()
     age = $(obj).parent().parent().find("td").eq(2).text()
     city = $(obj).parent().parent().find("td").eq(3).text()

     $("#info_edit").modal('show');

     $("#name").val(name);
     $("#city").val(city);
     $("#age").val(age);
 }

js第六步:保存方法

修改后我们获取下修改后的数值,在表格刚才的那行进行渲染新的数据

// 修改保存
 function save(obj){
 
     var save_name = $("name").val();
     var save_age = $("#age").val();
     var save_city = $("#city").val();
    $("#mytable tbody tr").eq(row_tr-1).find("td").eq(1).text(save_name)
     $("#mytable tbody tr").eq(row_tr-1).find("td").eq(2).text(save_age)
     $("#mytable tbody tr").eq(row_tr-1).find("td").eq(3).text(save_city)
     $("#info_edit").modal('hide');
 
 }

js第七步:删除确认弹窗

有了上面的基本功能,这里加个额外的小功能,再对功能进一步优化,比如我在删除的时候,考虑到手抖的情况,可能会不小心点到删除按钮而直接删除数据,这是我们不想看到的,则可以通过加一个删除确认弹窗来实现是否删除数据

定义一个is_delete方法,在执行删除操作的时候先调用判断一下,通过js的confirm弹窗如果确定(删除)的话则返回true,如果取消(不删除)的话返回false,以此来觉得是否真正删除数据

// 确认是否删除
 function is_delete(obj) {
     if (confirm("确认删除吗?")) {
         return true
     }
     return false
 }
 // 删除
 function delUser(obj) {
     var delete_sign = is_delete();
     if(delete_sign==true){
         $(obj).parent().parent().hide();
     }else{
         console.log("不删除")
     }
 }

以上演示的仅仅是一个基本流程,其实很多时候并不像我这样只是单独在前端进行操作,而是前后端交互配合来实现很多功能,这时候,你就要用所会的知识,一般涉及form表单请求、a链接href请求、ajax请求、ajax回调函数、后端逻辑相互配合来做

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-01-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Python与MySQL 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档