layui框架学习(39:数据表格_主要基础参数)

news2025/1/23 13:06:25

  本文主要学习layui的数据表格模块中主要基础参数的意义及用法。
  基础参数toolbar设置数据表格的工具栏样式,数据表格默认不显示工具栏,其值主要包括四类:1)值为true时,仅显示工具栏及工具栏的右侧自带菜单,包括筛选列(设置显示/隐藏特定列)、导出当前表格内容(支持导出csv或xls格式文件)、打印当前表格内容;2)值为default时,显示工具栏及内置菜单模板(显示在左侧),包括新增行、编辑行和删除行,不过需配合数据表格的事件处理函数使用;3)设置工具栏模板,类似于上一篇文章中介绍的模板,table数据表格模块会将模板中的内容显示在工具栏左侧,替换内置菜单模板;4)直接赋值为模板字符串。

在这里插入图片描述在这里插入图片描述

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="newdata">新增数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="insertdata">插入数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="deldata">删除数据</button>	     
  </div>
</script>
<table id="demo" lay-filter="test"></table>
<script>
	layui.use('table', function(){
	  var table = layui.table;
	  
	  table.render({
		elem: '#demo'				
		,url: 'http://localhost:5098/ECData/DataTableList' 
		,page: true
		,width:800
		,toolbar:"#toolbarDemo"
		,cols: [[ 
		  {type:'radio'}
		  ,{type:'checkbox',LAY_CHECKED:true}
		  ,{type:'numbers'}
		  ,{type:'space'}
		  ,{field: 'id', title: 'ID',width:80}
		  ,{field: 'createTime', title: '创建时间',width:80}
		  ,{field: 'humidity', title: '湿度',width:'10%',sort:true,edit:'textarea'}
		  ,{field: 'temperature', title: '摄氏温度',width:'10%',sort:true} 
		  ,{field: 'temperature', title: '华氏温度',width:'10%',sort:true,templet:function(d){ return d.temperature*9/5+32}} 
		  ,{field: 'flameValue', title: '火焰检测值'}
		  ,{field: 'mqValue', title: '烟雾检测值',templet:"#redalert"}
		]]
	  });			  
	});
</script>

在这里插入图片描述

  基础参数defaultToolbar设置工具栏右侧的图标及显示顺序,筛选列、导出表格内容、打印表格内容对应的名称为"filter"、“exports”、“print”。其使用方式及显示效果如下所示:

 table.render({
	elem: '#demo'				
	,url: 'http://localhost:5098/ECData/DataTableList'
	,page: true
	,width:800
	,toolbar:"#toolbarDemo"
	,defaultToolbar:["print","exports"]

在这里插入图片描述

  基础参数width和height设置数据表格的宽度和高度,其中width和height不设置值时默认自适应高度和宽度,也可以赋予数值,指定固定的宽度和高度,同时高度还可以赋予类似“full-固定数值”一样的值,意思是指表格高度比父容器高度少固定数值。
  基础参数cellMinWidth设置最小列宽,也即设置列最小显示宽度。
  基础参数totalRow设置是否开启合计行区域,该属性和列属性中的totalRow属性配合使用可以计算指定列的合计值,具体可见参考文献5。

table.render({
	elem: '#demo'				
	,url: 'http://localhost:5098/ECData/DataTableList'
	,page: true
	,width:800
	,totalRow:true				
	,defaultToolbar:["print","exports"]
	,cols: [[ 
	  {type:'radio'}
	  ,{type:'checkbox',LAY_CHECKED:true}
	  ,{type:'numbers'}
	  ,{type:'space'}
	  ,{field: 'id', title: 'ID',width:80,totalRowText: '合计'}
	  ,{field: 'createTime', title: '创建时间',width:80}
	  ,{field: 'humidity', title: '湿度',width:'10%',sort:true,edit:'textarea',totalRow:true}
	  ,{field: 'temperature', title: '摄氏温度',width:'10%',sort:true,totalRow:true} 
	  ,{field: 'temperature', title: '华氏温度',width:'10%',sort:true,templet:function(d){ return d.temperature*9/5+32}} 
	  ,{field: 'flameValue', title: '火焰检测值',totalRow:true}
	  ,{field: 'mqValue', title: '烟雾检测值',templet:"#redalert"}
	]]
	 });			  

在这里插入图片描述
  基础参数loading设置是否显示加载条,默认为true,即在切换分页时,在数据表格中间位置出现加载条,该参数只适用于从url参数获取数据的情境。
  基础参数scrollPos设置重载数据或切换分页时的滚动条的位置状态,主要包括fixed(滚动条位置不变)和reset(滚动条位置恢复置顶),默认取reset。
  基础参数editTrigger设置触发表格内容编辑的事件名称,默认为click,可以切换为双击或其他事件名称。
  基础参数title设置表格名称,默认为空,表格名称不会显示在数据表格中,使用工具栏导出csv或xls文件时会将其作为文件名,但将表格内容打印到虚拟打印机上时,文件名称未采用title属性值。
  基础参数skin/even/size设置表格的外观样式,其中skin设置表格的边框风格,主要包括line (行边框)、row (列边框)、nob (无边框),even属性设置是否启用隔行背景,取值主要包括true和false,size属性设置表格尺寸,取值包括sm( 小尺寸)和lg(大尺寸)。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://www.zhimatong.com/jiaocheng/356.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/924683.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Lua基础知识

文章目录 1. Lua简介1.1 设计目的&#xff1a;1.2 特性1.3 应用场景 2. Lua脚本学习2.1 安装2.2 lua操作2.3 lua案例 学习lua主要是为了后续做高性能缓存架构所准备的基础技术。可以先了解下基础&#xff0c;在实际使用时&#xff0c;再查缺补漏。 1. Lua简介 Lua 是一种轻量小…

Elasticsearch 8.X reindex 源码剖析及提速指南

1、reindex 源码在线地址 为方便大家验证&#xff0c;这里给出 reindex github 源码地址。 https://github.com/elastic/elasticsearch/blob/001fcfb931454d760dbccff9f4d1b8d113f8708c/server/src/main/java/org/elasticsearch/index/reindex/ReindexRequest.java reindex 常见…

睿趣科技:抖音开网店要怎么找货源

在当今数字化的时代&#xff0c;电商平台的兴起为越来越多的人提供了开设网店的机会&#xff0c;而抖音作为一个充满活力的短视频平台&#xff0c;也为创业者提供了广阔的发展空间。然而&#xff0c;对于许多初次涉足电商领域的人来说&#xff0c;找到合适的货源却是一个重要的…

IIS之WEB服务器详解(下)

文章目录 前言一、如何在服务器发布自己的网站二、如何在同一服务器上发布多个网站 前言 上一篇博客我们已经在服务器上下载了 IIS-WEB 插件&#xff0c;里面有默认的网站&#xff0c;相当于做了一个简易的WEB网站。今天就来介绍如何配置自己的网站并发布&#xff0c;在WEB服务…

C# .aspx网页获取RFID读卡器HTTP协议提交的访问文件Request获得卡号、机号,Response回应驱动读卡器显示响声

本示例使用的设备&#xff1a;RFID网络WIFI无线TCP/UDP/HTTP可编程二次开发读卡器POE供电语音-淘宝网 (taobao.com) 服务端代码&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.…

leetcode59. 螺旋矩阵 II(java)

螺旋矩阵 题目描述缩进法 上期经典 题目描述 难度 - 中等 原题链接 - 螺旋矩阵 示例1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]] 示例 2&#xff1a; 输入&#xff1a;n 1 输出&#xff1a;[[1]] 提示&#xff1a; 1 < n < 20 缩进法…

Leetcode每日一题:1782. 统计点对的数目(2023.8.24 C++)

目录 1782. 统计点对的数目 题目描述&#xff1a; 实现代码与解析&#xff1a; hash 双指针 原理思路&#xff1a; 1782. 统计点对的数目 题目描述&#xff1a; 给你一个无向图&#xff0c;无向图由整数 n &#xff0c;表示图中节点的数目&#xff0c;和 edges 组成&am…

【C++初阶】list的常见使用操作

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;C航路 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1…

Opencascad(C++)-建模-创建有界直线段

文章目录 1、 前言2、用gp_Lin创建一条直线2.1 gp_Lin类成员函数2.2 创建一条直线2.3 运行结果 3、创建一条有界的直线段3.1 功能说明3.2 函数说明3.2 创建直线段的代码3.3 测试效果 1、 前言 在Opencascad开发时&#xff0c;经常会遇到创建直线的情况&#xff0c;采用gp_Line…

计算机终端核心安全配置规范

声明 本文是学习 政务计算机终端核心配置规范. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 范围 本标准提出了政务计算机终端核心配置的基本概念和要求&#xff0c;规定了核心配置的自动化实现方法&#xff0c;规范了核心配置实施流程。 本标准适…

设计模式(单例模式,工厂模式),线程池

目录 什么是设计模式? 单例模式 饿汉模式 懒汉模式 工厂模式 线程池 线程池种类 ThreadPoolExcutor的构造方法: 手动实现一个线程池 什么是设计模式? 计算机行业程序员水平层次不齐,为了让所有人都能够写出规范的代码,于是就有了设计模式,针对一些典型的场景,给出一…

嵌入式学习之linux

今天&#xff0c;主要对linux文件操作原理进行了学习&#xff0c;主要学习的内容就是对linux文件操作原理进行理解。写的代码如下&#xff1a;

[MyBatis系列④]核心配置文件

目录 1、简介 2、DTD 3、typeHandlers 3.1、默认类型处理器 3.2、自定义类型处理器 4、plugins ⭐MyBatis系列①&#xff1a;增删改查 ⭐MyBatis系列②&#xff1a;两种Dao开发方式 ⭐MyBatis系列③&#xff1a;动态SQL 1、简介 MyBatis的核心配置文件&#xff08;通常命…

【Spring Boot】数据库持久层框架MyBatis — MyBatis简介

MyBatis简介 本节首先会介绍什么是ORM、什么是MyBatis、MyBatis的特点以及核心概念&#xff0c;最后介绍MyBatis是如何启动、如何加载配置文件的&#xff1f; 1.什么是ORM ORM&#xff08;Object Relational Mapping&#xff0c;对象关系映射&#xff09;是为了解决面向对象…

抖音创作服务平台发布作品

最近分析了一下抖音创作服务平台发布作品的步骤 获取密钥等参数通过密钥等参数获取到上传视频需要的参数上传视频发布作品 需要的一些参数有a_bogus Signature crc32等 目前还没有校验a_bogus 只需要传入Cookie以及视频即可发布

C语言sscanf函数学习

sscanf()与scanf()相比&#xff0c;scanf()以键盘(stdin)为输入源&#xff0c;sscanf()以第一个参数的固定字符串为输入源&#xff1b; sscanf()的头文件是 #include <stdio.h>&#xff1b; 函数原型&#xff1a; int sscanf (char *str, char * format [, argument, ..…

纸贵科技连续三年蝉联IDC中国 FinTech 50榜单

近日&#xff0c;国际权威市场研究机构IDC公布了“2023 IDC中国FinTech 50榜单”。作为领先的区块链技术和解决方案服务商&#xff0c;纸贵科技凭借过硬的区块链技术和丰富的金融科技创新成果&#xff0c;连续第三年荣登IDC中国FinTech 50榜单。 IDC中国FinTech 50榜单是金融科…

广告电商模式

电商越来越渗透进我们的生活之中&#xff0c;网上医疗&#xff0c;网上订购电影票&#xff0c;车票等&#xff0c;未来绝不仅仅是网购这么简单&#xff0c;电商行业以后会与生活的方方面面更加精密结合在一起。因此&#xff0c;电商销售的发展是持续增长的&#xff0c;现在很多…

Oracle 查询(当天,月,年)的数据

Trunc 在oracle中&#xff0c;可利用 trunc函数 查询当天数据&#xff0c;该函数可用于截取时间或者数值&#xff0c;将该函数与 select 语句配合使用可查询时间段数据 查询当天数据 --sysdate是获取系统当前时间函数 --TRUNC函数用于截取时间或者数值&#xff0c;返回指定的…

[线程/C++(11)]线程池

文章目录 一、C实现线程池1. 头文件2. 测试部分 二、C11实现线程池1. 头文件2. 测试部分 一、C实现线程池 1. 头文件 #define _CRT_SECURE_NO_WARNINGS #pragma once #include<iostream> #include<string.h> #include<string> #include<pthread.h> #…