layui框架学习（39：数据表格

本文主要学习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