layui-table组件使用记录

梁白开33

已于 2023-10-09 09:45:15 修改

阅读量572

点赞数

分类专栏：笔记文章标签： javascript layui

于 2023-10-09 09:44:15 首次发布

本文链接：https://blog.csdn.net/S2181834/article/details/133693883

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近做的项目用到的layui插件中的table组件，通过研究layui文档后开始使用，在此记录一下。

文章目录

项目需求

绘制表格，展示需要的字段，列宽度自适应，当列内字段长于列宽时换行展示。
构建一个单选下拉框，下拉框里放置需要展示的字段，选择某一个时将下拉框中其他列隐藏掉。
选择下拉框某一个字段时将数据按照其倒叙排序。
表格内字段的数值按照既定的范围绘制不同的颜色。

需求实现

引用layui插件
在layui文档下载最新插件，解压后将“layui”文件夹复制到项目lib文件夹下，然后在前端html文件中调用此文件夹

<link href="../../lib/layui/css/layui.css" rel="stylesheet">
    <script src="../../lib/layui/layui.js"></script>
</link>

使用table组件，展示需要的字段并且列宽自适应，数值颜色自定义
html代码

<table class="layui-hide" id="roadTable"></table>

var table=layui.table;
var cols=[];
	cols.push({ type: 'checkbox',  width: 24,style:' color:white; '}),
	cols.push({ type: 'numbers', title: '序',  width: 38,style:' color:white; '}),
 
	cols.push({field: 'code', title: '编号',width: 70,  style:' color:white; ' }),
	cols.push({field: 'name', title: '名称', style:' color:white;'});
    var e = ['pm25','pm10','no','no2','nox','co']//这保存的是下拉框中的字段
    /*这一步循环是为了将下拉框中的字段放入表格的列中，并且将下拉框选中的字段展示，而其余字段隐藏。
    current_selected_monitor_qindex 表示选中的字段
     getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex,d[e]) 这个方法是当前列每一行的数值根据既定的范围绘制不同的颜色，返回的是颜色16进制代码。
    */
    
    e.forEach(function(e) {
		var title=e=='pm25'?'PM₂.₅':e=='pm10'?'PM₁₀':e=='no'?'NO':e=='no2'?'NO₂':e=='nox'?'NOₓ':e=='co'?'CO':"";
		cols.push({field:e,title:title,width: 80,style:'color:white;text-align: center;',hide:!(e==current_selected_monitor_qindex),templet: function(d){ if(d[e]==undefined||d[e]=="null"||d[e]==null) {return '<span style= "color:#0dd4f7;">/</>';} else {return '<span style= "color:'+ getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex,d[e]) +';">'+d[e]+'</>'}}})
	})
	var colls=[];
	colls.push(cols);
	table.render({
		elem: '#roadTable' //指定原始表格元素选择器（推荐id选择器）
		,id:'roadTable'
		,height: 420 //容器高度
		,width:440
		,cellMinWidth: 'auto'
		,data:data   //表格数据
		,page: {layout: [ 'count', 'prev', 'page', 'next'],groups: 3, curr: 1, limit: 50}  //表示分页，layout：自定义分页功能区域排版，这里几个代码分别表示 数据总数、前一页、 分页、后一页。groups：连续出现的页码数量，curr:初始化当前页码,limit：每页显示的条数。
		,skin:'line'  //表格边框风格。可选值：grid（全边框）|line（只有行边框）|row（只有列边框）|nob（无边框）
		,cols:colls  //需要展示的列	
	});

实现全局排序功能
由于组件提供的initSort只是对当前页内数据进行排序，项目需要的功能是全局排序，故而需要自定义排序算法，重载表格时使用排序后的数据。

/*排序
param{
	data:要排序的数组
	field：排序的列
	type：排序类型 ,asc正序，desc倒叙
}
return 排序后数组
*/
function dataSort(data, field, type) {
	switch (type) {
	  case 'asc':
		data.sort(function compare(a, b) {
		  if (a[field] < b[field]) {
			return -1;
		  } else if (a[field] > b[field]) {
			return 1;
		  } else {
			return 0;
		  }
		});
		break;
	  case 'desc':
		data.sort(function compare(a, b) {
		  if (a[field] > b[field]) {
			return -1;
		  } else if (a[field] < b[field]) {
			return 1;
		  } else {
			return 0;
		  }
		});
		break;
	}
	return data;
  }
/*
下拉框指标值更改调用方法
思路：如果table有数据则直接调用，显示所选指标值列，隐藏其他指标值列，并且按照所选指标值降序排序显示
*/
$("#qindex_selection_part").change(function() {
	current_selected_monitor_qindex = $("#qindex_selection_part").val()
	if(table!=null || table !=undefined){
		var hideCols=[];
		//current_qindex_list 表示下拉框列表
		current_qindex_list.forEach(item=>{
			current_selected_monitor_qindex==item?hideCols.push({field:item,hide:false}):hideCols.push({field:item,hide:true})
		})
		var data_sort=dataSort(tableData,current_selected_monitor_qindex,'desc')
		table.reload('roadTable',{  
			data:data_sort,
			// initSort:{   //这个只能做到当前页排序不能做到全局排序故而抛弃
			// 	field: current_selected_monitor_qindex, // 按 id 字段排序
			// 	type: 'desc' // 降序排序
			// }
		})
		table.hideCol("roadTable",hideCols)  //隐藏列
	}else{
		reloadData(1)  //这个是获取数据定义table的方法
	}
	 
});