专栏首页菜鸟致敬弱弱地写了一篇前端教程

弱弱地写了一篇前端教程

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

一、框架选择:

本文主要用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回调函数、后端逻辑相互配合来做

本文分享自微信公众号 - Python与MySQL(Python_Rick)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • MySQL 创建数据表

    创建MySQL数据表需要以下信息: 表名 表字段名 定义每个表字段 语法 以下为创建MySQL数据表的SQL通用语法: CREATE TABLE table_n...

    Rare0716
  • 线性跟驰模型车头间距

    Rare0716
  • Python|堆排序

    外排序 :由于数据太大,因此把数据放在磁盘中,而排序通过磁盘和内存的数据传输才能进行;

    Rare0716
  • Oracle 12c因bug导致ORA-04031问题处理过程 | 云和恩墨技术通讯精选

    为了及时共享行业案例,通告共性问题,达成知识共享和提前预防,我们整理和编辑了《云和恩墨技术通讯》(8月刊),通过对过去一段时间的知识回顾和故障归纳,以期提供有价...

    数据和云
  • Java基础——数据类型

    Java语言提供了八种基本类型。六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型。

    羊羽shine
  • Java 实现给定一个数, 获取大于这个数并且最小的2 的幂次方的数

    一个会写诗的程序员
  • SQL优化案例-使用with as优化Subquery Unnesting(七)

    使用 no_unnest hint可以让执行计划产生filter,即不展开,但一般情况下使用unnest hint无法消除filter。

    沃趣科技
  • 通过celery提高crontab配置效率

    今天在接入备份任务配置的时候也是一波三折,解决了业务元数据的问题,也逐步熟悉了业务,对于现有的备份情况会越来越有把握。

    jeanron100
  • Confluence 6 配置白名单 原

    Confluence 管理员可以通过添加 URLs 到白名单选择出入的链接和使用 RSS 宏,HTML 包含宏和小工具中的内容。

    HoneyMoose
  • 索引长度过长 ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes

    1.发现问题   今天在修改innodb表的某个列的长度时,报如下错误: [html] view plain copy print? alter tab...

    用户1214487

扫码关注云+社区

领取腾讯云代金券