layui-表格

最新推荐文章于 2024-07-22 17:54:08 发布
最新推荐文章于 2024-07-22 17:54:08 发布
阅读量3.8k 收藏
点赞数
分类专栏： Layui 文章标签： layui table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ajlgl/article/details/72517036
版权

layui-表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本表格</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>默认表格</legend>
</fieldset>

<div class="layui-form">
  <table class="layui-table">
    <colgroup>
      <col width="50">
      <col width="150">
      <col width="150">
      <col width="200">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
        <th>人物</th>
        <th>民族</th>
        <th>出场时间</th>
        <th>格言</th>
      </tr> 
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="" lay-skin="primary"></td>
        <td>贤心</td>
        <td>汉族</td>
        <td>1989-10-14</td>
        <td>人生似修行</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="" lay-skin="primary"></td>
        <td>张爱玲</td>
        <td>汉族</td>
        <td>1920-09-30</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="" lay-skin="primary"></td>
        <td>Helen Keller</td>
        <td>拉丁美裔</td>
        <td>1880-06-27</td>
        <td> Life is either a daring adventure or nothing.</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="" lay-skin="primary"></td>
        <td>岳飞</td>
        <td>汉族</td>
        <td>1103-北宋崇宁二年</td>
        <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="" lay-skin="primary"></td>
        <td>孟子</td>
        <td>华夏族（汉族）</td>
        <td>公元前-372年</td>
        <td>猿强，则国强。国强，则猿更强！ </td>
      </tr>
    </tbody>
  </table>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>行边框表格</legend>
</fieldset>  

<table class="layui-table" lay-skin="line">
  <colgroup>
    <col width="150">
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>出场时间</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>汉族</td>
      <td>1989-10-14</td>
      <td>人生似修行</td>
    </tr>
    <tr>
      <td>张爱玲</td>
      <td>汉族</td>
      <td>1920-09-30</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    <tr>
      <td>Helen Keller</td>
      <td>拉丁美裔</td>
      <td>1880-06-27</td>
      <td> Life is either a daring adventure or nothing.</td>
    </tr>
    <tr>
      <td>岳飞</td>
      <td>汉族</td>
      <td>1103-北宋崇宁二年</td>
      <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏族（汉族）</td>
      <td>公元前-372年</td>
      <td>猿强，则国强。国强，则猿更强！ </td>
    </tr>
  </tbody>
</table>   

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>列边框表格</legend>
</fieldset>  

<table class="layui-table" lay-even="" lay-skin="row">
  <colgroup>
    <col width="150">
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>出场时间</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>汉族</td>
      <td>1989-10-14</td>
      <td>人生似修行</td>
    </tr>
    <tr>
      <td>张爱玲</td>
      <td>汉族</td>
      <td>1920-09-30</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    <tr>
      <td>Helen Keller</td>
      <td>拉丁美裔</td>
      <td>1880-06-27</td>
      <td> Life is either a daring adventure or nothing.</td>
    </tr>
    <tr>
      <td>岳飞</td>
      <td>汉族</td>
      <td>1103-北宋崇宁二年</td>
      <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏族（汉族）</td>
      <td>公元前-372年</td>
      <td>猿强，则国强。国强，则猿更强！ </td>
    </tr>
  </tbody>
</table>  

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>无边框表格</legend>
</fieldset>  

<table class="layui-table" lay-even="" lay-skin="nob">
  <colgroup>
    <col width="150">
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>出场时间</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>汉族</td>
      <td>1989-10-14</td>
      <td>人生似修行</td>
    </tr>
    <tr>
      <td>张爱玲</td>
      <td>汉族</td>
      <td>1920-09-30</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    <tr>
      <td>Helen Keller</td>
      <td>拉丁美裔</td>
      <td>1880-06-27</td>
      <td> Life is either a daring adventure or nothing.</td>
    </tr>
    <tr>
      <td>岳飞</td>
      <td>汉族</td>
      <td>1103-北宋崇宁二年</td>
      <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏族（汉族）</td>
      <td>公元前-372年</td>
      <td>猿强，则国强。国强，则猿更强！ </td>
    </tr>
  </tbody>
</table>        

<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use('form', function(){
  var $ = layui.jquery, form = layui.form();

  //全选
  form.on('checkbox(allChoose)', function(data){
    var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
    child.each(function(index, item){
      item.checked = data.elem.checked;
    });
    form.render('checkbox');
  });

});
</script>
    </body>
</html>

这里写图片描述

官网表格

岽仔玖等
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui-表格穿梭-transferTable
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，...
layui-高级表格-soul-table.rar
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，...
layui使用templet格式化表格数据的方法
10-16
今天小编就为大家分享一篇layui使用templet格式化表格数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layUI表格分页插件
gao1122334的博客
06-14 819
大部分代码转自layUI社区   《嘉文》   道友的自定义分页插件 随后我增加了CheckBox选中行功能，并完善了一些《嘉文》道友没有明确指出的部分用法。 layui.define(['form','jquery', 'laypage'], function (exports) { var $ = layui.jquery, laypage = layui.laypage,
layui table表格动态增加、合并单元格
最新发布
chenchen_csdn的博客
07-22 350
现需要一个两列多行的页面布局，实现对单选按钮监听和在左侧保持合并单元格的同时新增、删除、清空tr，并将填写的内容取值json。
Layui(3) templet替代easyui的formatter解决数据格式化
郑清
12-24 8273
可参考layui官方文档解决：https://www.layui.com/doc/modules/table.html#templet 前言：相信大家在实现layui对象格式化的时候 会出现 [object Object] 这种情况，用过easyui的朋友可能都知道有一个formatter属性可以解决这一问题，那么在layui中怎么解决这一问题呢？？ 首先先抱歉，看了一下layui文档没...
colgroup
qq_30970807的博客
12-01 1246
一、实例 两个colgroup元素为表格中的三列规定了不同的对齐方式和样式（注意第一个colgroup元素横跨两列）。 ISBN Title Price 3476896 My first HTML $53 二、浏览器支持 所有主流浏览器都支持 三、使用 该标签用于对表格中的列进行
layui table
闪耀星星的窝
08-16 1551
1.off移除on绑定的事件 2.列checkbox列single属性单选 3.render时changes属性可以动态改变列 4.初始化时rowStyleFormatter可以根据值改变行样式，rowClassFormatter可以根据值改变行css样式 例子： <table class="layui-table" lay-filter="tbUsers" id="tbUsers"> <thead> <tr> <th lay-data="{
layui-表格穿梭-transferTable-源码
10-16
在给定的"layui-表格穿梭-transferTable-源码"资源中，我们主要关注的是layui框架中的一个特定组件——穿梭框（Transfer Table）。这个组件在数据管理和筛选时非常有用，尤其适用于需要在两个列表之间移动或选择项的...
layui-高级表格-soul-table功能-HTML源码
10-02
在以上代码中，我们首先引入layui和soul-table的相关资源，然后在JavaScript中使用`layui.use()`加载模块，初始化表格并应用soulTable的配置。`table.render()`方法用于定义表格结构和数据源，而`soulTable.config`...
layui-v2.5.5_layui前端模板_substanceb4u_layui-v2.5.5_wplayui-v2.5.5_
10-01
layui的核心理念是“模块化”，它将前端组件划分为多个模块，如表格、表单、按钮、图标等，每个模块都有独立的功能，可以灵活组合，满足不同场景的需求。layui-v2.5.5版本在此基础上进行了优化和更新，修复了已知...
layui表格内容溢出的解决方法
12-29
引言，我做文章管理的时候，引入的是layui的表格样式，但是里面的内容溢出无法隐藏，后来我采用了往td里面加了个<div></div> 然后设置一下样式就可以了。 <table class=layui-table> <colgroup> <col width=100> <col width=150> <col> </colgroup> <thead> <tr> <th>序号</th> <th>文章标题</th> <th>文章内容</th> <th>发布时间</th> <th>发布人</th> <th>操作</th> </tr> </t
layui数据表格 demo,静态数据库加载表头不固定 的数据展示方式；
05-10
layui数据表格 demo,静态数据库加载表头不固定 的数据展示方式；
<colgroup>的学习
08-02 2161
写一个简单的的测试 ISBN Title Price 3476896 My first HTML $53 改变中的宽度比例，则相应的td的宽度成对应比例变化
easyui layui单元格式化的区别
Cuizzkkk的博客
12-08 91
easyui layui单元格式化的区别 easyui： ,{ field : 'type', title : '账号类型', width : 100, align : 'center', formatter:function(value,row,index){ if(valu
layui学习之路——数据表格
双人余公的博客
09-23 453
layui学习之路——数据表格 之前用.net开发的网站很多功能体验不佳，比如锁定表头和数据编辑，尽管能实现，但使用起来很糟糕，尤其是数据量大的时候。最近学了一段时间layui，感觉效果还可以，但比我想象中难，不是套个框架就能用的，现在讲学习心得记录一下。 首先就是数据表格，这东西对我来说是最重要的。 html： //第一种静态表格,直接用的官方文档例子 <table lay-even class="layui-table " > <colgroup>
创建表格
php菜鸟技术天地
01-19 703
基本统计 昵称 加入时间 签名 贤心 2016-11-29 人生就像
Layui table 多表头造成多余列数据
u010219889的博客
04-14 1512
tabler.render时，在cols中添加多个数组，colspan=1（默认），造成多余列数据显示，下图： 设置 colGroup: true table.render({ elem: '#test' , cols: [[ //标题栏 { title: '长度', width: 80, colGroup: true } , { title: '数量', width: 80, colGroup: true }
layui layui-col-space
YingDaoMonkey的博客
05-22 5977
layui-col-space：设置后不起作用主要是因为他设置的是padding,也就是说是向内缩了，所以你设置背景色padding也是会添上颜色，看起来好像没有间距一样。 解决办法： <div class="layui-row layui-col-space10"> <div class="layui-col-md4"> &lt...
layui-open-上传文件
05-20
在layui中，可以使用 `upload` 组件来实现文件上传功能。以下是一个简单的示例： HTML代码: ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="test-upload-normal">选择文件 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值