Layui静态表格.时间线

于 2023-04-17 10:53:09 发布
阅读量393 收藏 1
点赞数
分类专栏： JavaScript 文章标签： layui html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34820433/article/details/130195304
版权
学习要点：
1. 静态表格
2. 徽章
本节课我们来开始了解 Layui 自带的静态表格和时间线的用法。

一．静态表格

1. 静态表格只需要定义一个头部 class 即可完成； 
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>蜡笔小新</td>
<td>xiaoxin@163.com</td>
</tr>
...
</tbody>
</table>

2. 静态表格支持一些基础属性，可以定义不同风格 / 尺寸的样式；
属性名
属性值
备注
lay-even
无
开启隔行背景
lay-skin="value"
line ( 行边框风格 )
row ( 列边框风格 )
nob ( 无边框风格 )
若使用默认风格不设置该属性即可
lay-size ="value"
sm ( 小尺寸 )
lg ( 大尺寸 )
同上 
<table class="layui-table" lay-even lay-size="lg" lay-skin="nob">

二．时间线

1. 时间线是一种将时间抽象到二维平面，垂直呈现一段过去的故事？
2. 这个说法比较抽象，直接看官网手册的例子就懂了； 
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-icon-circle layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">10 月 25 日</h3>
<p>这里就随意安排了。</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-icon-circle layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">10 月 22 日</h3>
<p>这里就随意安排了。</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-icon-circle layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">到底了</h3>
</div>
</li>
</ul>

龙华军
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
23.Laravel集合的常用方法
05-24 763
collection = collect(['name'=>'Mr.Lee', 'gender'=>'男']);PS：相关的还有 every()、except()、only()、firstWhere()、last()等方法；$collection = collect([['男'=>1], ['女'=>1], ['男'=>3]]);'details'=>['gender'=>'男', 'age'=>100]]);['name'=>'Mr.Lee', 'gender'=>'男'],
博客
22.Laravel集合的使用
05-24 666
处理数据集合的方法，可链式调用；7. 如果三十多个方法都没有你要的，还可以自定义方法，比如说所有英文大写；6. 这里我们把最常用的演示一遍，剩下的所有，可以自行参考手册方法列表；4. 除了数据库对象返回的数据集合之外，我们还可以自行创建数据集合；PS：下一节，我们会花一节课，把最常用的方法再运行一遍加深印象；2. 比如，我们从数据库得到的数据列表，它就是一种集合；3. 数据集合，提供了大量的方法方便我们进行各种操作；本节课我们来开始学习数据集合的创建和使用方法。//创建一个数据集合。
博客
21.模型的访问器和修改器
05-18 592
3. 可以设置字段输出的类型，比如设置一个布尔型，输出时就是 true 和 false；PS：注意，如果 gender 之前已经有访问器修改过，上面的方法会得到修改过的结果；3. 我们也可以创建一个虚拟字段，用已有的数据字段进行整合，不过要进行数据追加；//访问器，前固定 get，后固定 Attribute，Gender 是字段名。2. 比如，我们在输出性别时，在性别左右加上括号，或给邮件转换为大写；1. 修改器，相对于访问器，是在写入的时候拦截，进行修改再写入；//修改器，写入数据时，将邮箱转换为大写。
博客
20.模型的作用域
05-18 420
PS：我们可以将性别为男这个片段，封装成一个单独的方法，然后统一在这个模型下调用；PS：而在控制器端，并不需要做任何设置，即可自动添加 status=1 的条件；6. 当然，如果这个全局只是针对某个模块，并不需要创建一个全局类，直接闭包即可；5. 上面的方法比较死板，适合简单粗暴，如果想要灵活多变，支持传递参数；2. 而这个条件，可能只是在这个模型对应的数据表使用，别的表并不使用；5. 此时，还不能实现全局，因为需要在模型设置个开关，让其富有灵活性；
博客
19.批量赋值和软删除
05-17 724
11. 如果开启了软删除，还需要强行真实的永久删除，可以使用 forceDelete()方法；5. 当开启了软删除功能，之前的删除操作，都会变成更新操作，给 deleted_at 赋值；9. 如果要对这个数据进行软删除的判断，是否是被软删除的，可以使用 trashed()；6. 而当我们开启了软删除的功能后，此时通过正常的数据获取列表，会自动隐藏；1. 什么叫软删除？它相对于真实的删除，而并非真正的删除，只是隐藏了；//获取某个被软删除的数据(即使不是软删除的也可以搜索到)
博客
18.模型的增删改
05-16 319
1. 新增方法如下，注意：默认模型接管 created_at 和 updated_at；6. 如果你是通过主键 id 删除，那使用 destroy(id)方法，免去查询操作；PS：必须在模型中定义批量赋值的可填充字段，否则无法生效；防止用户不小心设置新值；4. 使用 create()方法实现新增，但需要在模型端设置批量赋值的许可；2. 更新，只要是查找到一条数据的情况下使用 save()就是更新；本节课我们来开始学习数据库的模型的增删改的操作。5. 使用 delete()方法，可以删除数据；
博客
17.模型的定义
05-16 390
12. 默认读取 database.php 配置的数据库连接，也可以在模型端局部更改；3. 而调用的时候，我们也知道表名要遵循它默认规则，修改为复数，或特定；1. 之前在查询构造器部分，把常用的数据库操作基本讲完，模型大体相同；4. 虽然安装了插件，但模型还是没有代码提示，可以通过安装插件解决；5. 其它查询方法基本和查询构造器一样，如果有不一样，参考错误提示；4. 系统假定你的主键为 id，如果你要修改默认主键，可以特定；2. 比如，我们要查询所有数据，直接使用模型::all()即可；
博客
16.构造器的增删改
05-15 418
'username'=>'李黑', 'password'=>'654321', 'details'=>'123']7. 更新数据时，可以使用自增 increment()和自减 decrement()方法；5. 使用 updateOrInsert()方法，可以先进行查找修改，如不存在，则新增；2. 使用 insertOrIgnore()方法，可以忽略重复插入数据的错误；3. 使用 insertGetId()方法，获取新增后的自增 ID；//参数 2：修改的内容(新增的内容)//忽略重复新增数据的错误。
博客
17.模型的定义
05-15 394
12. 默认读取 database.php 配置的数据库连接，也可以在模型端局部更改；3. 而调用的时候，我们也知道表名要遵循它默认规则，修改为复数，或特定；1. 之前在查询构造器部分，把常用的数据库操作基本讲完，模型大体相同；4. 虽然安装了插件，但模型还是没有代码提示，可以通过安装插件解决；5. 其它查询方法基本和查询构造器一样，如果有不一样，参考错误提示；4. 系统假定你的主键为 id，如果你要修改默认主键，可以特定；2. 比如，我们要查询所有数据，直接使用模型::all()即可；
博客
15.构造器的 join 查询
05-14 349
3. 使用 crossjoin 交叉连接查询，会生成笛卡尔积，再用 distinct()取消重复；4. 如果你想要实现闭包查询，和 where 类似，只不过要用 on 和 orOn 方法；1. 使用 join 实现内联接的多表查询，比如三张表进行 inner join 查询；6. 使用 union()或 unionAll()方法实现两个查询的合并操作；PS：on()方法后面如果想要再增加筛选条件，可以追加 where()；5. 使用 joinSub 实现子连接查询，将对应的内容合并在一起输出；
博客
14.构造器的排序分组.子查询
05-14 248
/whereRaw 这句也可以替代为：whereColumn('books.user_id','users.id');//支持符号支持数组多个字段格式['create_time','>', 'update_time']5. 使用 skip()和 take()限制结果集，或使用 offset()和 limit()；2. 也可以使用 where(字段,function())闭包，来实现一个子查询；//支持符号'create_time','>', 'update_time'
博客
13.构造器的 where 派生查询
05-13 592
PS：三个参数支持大于小于之类的操作 orWhereDate('create_time','>', '2018-12-11')PS：这里还支持相关四种：whereYear/whereMonth/whereDay/whereTime，支持 or 前缀；->where('username', 'like', '%小%');//where() + orWhere 实现 or 条件查询。$query->where('gender', '女')->orWhere('gender', '女')
博客
12.构造器的查询表达式
05-13 954
users = DB::table('users')->where('username', 'like', '%小%')->get();3. DB::raw()方法可以在 select()内部实现原生表达式，否则解析错误；2. addSelect()方法，可以在你基础的查询构造器上再增加想要显示的字段；//如果条件都是等于，查看 SQL 语句用->toSql()替换->get()1. where()查询，即条件查询，完整形式需要字段表达式和值三个；['gender', '=', '男']
博客
11.构造器的查询.分块.聚合
05-12 933
2. 构造器查询提供了：count()、max()、min()、avg()和 sum()聚合查询；3. 构造器查询两个判断记录是否存在的方法：exists()和 doesntexists()方法；1. table()方法引入相应的表，get()方法可以查询当前表的所有数据；3. value(字段名)方法，可以获取到第一条数据的指定字段的值；4. find(id)方法，可以获取指定 id 的一条数据；2. first()方法，可以获取到第一条数据；//切割分块执行，每次读取 3 条，id 排序；
博客
10.数据库配置入门
05-12 1268
11. 前缀可以在 database.php 修改添加：laravel_，最终变为：laravel_users；2. 数据库的配置在 config/database.php，如果是本地可以直接配置.env 文件；//这种写法去掉了外围的数组下标 0。13. 可能会加 es，可能会加 ies，也可能是 child 编程 children 之类的；8. 使用 Eloquent ORM 模型来操作数据库，使用命令在 Http 目录下创建模型；10. 而我们真实的数据库表为：laravel_user，为何会这样？
博客
09.表单伪造和 CSRF 保护
05-11 566
3. 表单页以 post 发送，路由也使用 post 接受，以下表单提交会出现 419 错误；2. 先在 TaskController 创建两个方法，一个表单页，一个接受表单数据路由；5. 表单可以实现 POST 提交方式，那其它提交方式该如何实现呢？4. 这是为了避免被跨站请求伪造攻击，框架提供了 CSRF 令牌保护，请求时验证；用户名：本节课我们来开始学习表单伪造和 CSRF 保护的功能。
博客
08.资源嵌套.浅嵌套.自定义
05-11 469
return '编辑博文下的评论，博文 id：'.$blog_id.'，评论 id：'.$comment_id;7. 而实际上，每个 id 都是独立唯一的，并不需要父 id 和子 id 同时存在；8. 为了优化资源嵌套，通过路由方法->shallow()实现浅层嵌套方法；2. 比如开发过博客系统，留言帖子系统之类，具有类似思维，否则你懂的..；本节课我们来开始学习控制器的资源嵌套功能、浅嵌套以及资源自定义。5. 以上需求，可以通过嵌套资源路由来实现这个功能；return '评论 id.'.$id;
博客
07.资源控制器
05-10 875
PUT/PATCH blogs/{blog} update() blogs.update 从编辑页中接受处理。http://localhost:8000/blogs/10/edit //可以访问到 edit 方法。GET blogs/create create() blogs.create 创建页面(表单页)GET blogs/{blog}/edit edit() blogs.edit 编辑(表单页)//API 资源，并不需要 HTML 页面(create,edit)，会排除。
博客
06. 响应设置和重定向
05-10 907
/跳转到 task/url。
博客
05.回退.当前路由.单行为
05-09 847
因为继承基类后，可以使用基类的方法，比如中间件等；4. 如果你想要定义一个只执行一个方法的控制器，可以使用单行为控制器；本节课我们来开始学习路由和控制器的一些方法：回退、当前路由、单行为；1. 之前的课程，我们简单的创建和定义了控制器，并继承了控制器基类；6. 单行为控制器，路由定义就不需要指定特定的方法，指定控制器即可；7. 单行为控制器只是语义上的单行为，并没有限制创建更多方法访问；2. 可以使用回退路由，让不存在的路由自动跳转到你指定的页面去；//返回当前路由指向的方法。//返回当前路由的名称。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值