layUI-table动态表格表头

功能简述

该组件支持表头动态展示\支持layui table模块配置的一切参数\支持删除列等操作\动态表格分页参数

组件实现原理简介

底层table组件基于layui 设计,动态配置一切参数

在项目中引用

只需要引入js文件 然后调用暴露出的入口方法即可

customTable.js文件内容

layui.define(["jquery", "table", "layer","laypage"], function (exports) {
	var $ = layui.jquery;
	var table = layui.table;
	var layer = layui.layer;
	var laypage = layui.laypage;
	/**
    ************ tableConfig为table配置项其参数说明如下
    * elem  table的id   必传
    * url  table请求地址
    * height table的高度   默认为400
    * data  直接赋值数据
    * cols 设置表头。没有则按数据返回自动生成
    ************ otherConfig 为其他配置项
    * filter   table lay-filter的值  必传
    *isdelcol   是否删除列
	* isEdit  开始layui自带单元格编辑功能
    *  trBar  行工具栏id
	*  ctx  请求地址项目名字
	*  page 分页功能
    ************ ajax配置   分all(数据请求) header(表头请求) edit(表格实时编辑)delCol(删除列)
    * url  table请求地址 填写此处表示表头根据数据返回
    * ajaxData  ajax请求参数
    * type ajax请求类型
    * resData  请求返回的数据
    * isKeyValue  参数是否为键值对
    */
	var customTable = {
		tableExp: null, //表格实例
		resData: null, //返回所有数据
		tableData: [], //table展示数据
		headerData: [], //表头数据
		initData: {}, //初始化配置参数
		init: function (tableConfig, otherConfig, ajaxConfig) {
			customTable.initData = {
				tableConfig: tableConfig,
				otherConfig: otherConfig,
				ajaxConfig: ajaxConfig,
			};
			if (ajaxConfig.all.url) {
				customTable.ajaxReq(ajaxConfig.all);
				tableConfig.data = customTable.tableData;
				tableConfig.limit = 999999999;
				if (otherConfig.page && otherConfig.page.elem){
					otherConfig.page.count = customTable.resData.count;
					customTable.page(otherConfig.page);
				}
			}

			if (!tableConfig.cols) {
				customTable.tableHeadAjax(ajaxConfig.header);
				layui.each(customTable.headerData, function (i, t) {
					t.minWidth = t.title.split("").length * 14 + 62;
					t.title = '<span title="' + t.title + '">' + t.title + '</span>' + (t.candelete == 'true' ? '<i class="layui-icon layui-icon-close delLie" style="color: red;display: none"' +
						' attr-fieldId="' + t.field + '"></i>' : '');
				});

			}
			if (otherConfig.trBar){
				customTable.headerData.push({
					fixed: 'right',title: '操作', width: 150, align: 'center', toolbar: otherConfig.trBar
				});
			}
			tableConfig.cols = [customTable.headerData];
			tableConfig.done = function () {
				if ($('.layui-table-main .layui-none').length > 0){
					$('.layui-table-main .layui-none').text('暂无数据,请点击上传按钮上传文件');
				}
				if (otherConfig.isdelcol) {
					$("tr th").mouseover(function () {
						$(this).find(".delLie").show();
					}).mouseout(function () {
						$(this).find(".delLie").hide();
					});
					$('th .delLie').click(function () {
						let field = $(this).attr('attr-fieldId');
						ajaxConfig.delCol.ajaxData.columnName = field;
						$.ajax({
							url: ajaxConfig.delCol.url ,
							type: 'post',
							dataType: "json",
							contentType: 'application/json',
							data: JSON.stringify(ajaxConfig.delCol.ajaxData),
							success: function (result) {
								if (result.code == 0) {
									customTable.headerData[customTable.headerData.length - 1] = {
										fixed: 'right',title: '操作', width: 150, align: 'center', toolbar: otherConfig.trBar
									};
									for (var i = 0;i < customTable.headerData.length;i++){
										if (field == customTable.headerData[i].field){
											customTable.headerData.splice(i,1);
											break;
										}
									}
									table.reload(otherConfig.filter,{
										cols: [customTable.headerData]
									});
								} else {
									layer.alert(result.msg);
								}
							}
						});
					});
				}
			};
			customTable.tableExp = table.render(tableConfig);
			if (otherConfig.isEdit) {
				customTable.editAjax(ajaxConfig.edit,otherConfig.filter);
			}
			return customTable.tableExp;
		},
		//请求所有数据
		ajaxReq(ajaxConfig,isreload) {
			$.ajax({
				url: ajaxConfig.url,
				type: ajaxConfig.type ? ajaxConfig.type : "get",
				dataType: "json",
				async: false,
				data: ajaxConfig.ajaxData ? ajaxConfig.ajaxData : null,
				success: function (result) {
					if (result.code == 0) {
						customTable.resData = result;
						customTable.tableData = result.data;
						if (isreload && customTable.tableExp){
							table.reload(customTable.initData.otherConfig.filter,{
								data: result.data
							});
						}
					} else {
						layer.alert(result.msg);
					}
				},
			});
		},
		// 请求表头
		tableHeadAjax(ajaxConfig) {
			$.ajax({
				url: ajaxConfig.url,
				type: ajaxConfig.type ? ajaxConfig.type : "get",
				dataType: "json",
				async: false,
				data: ajaxConfig.ajaxData ? ajaxConfig.ajaxData : null,
				success: function (result) {
					if (result.code === 0) {
						customTable.headerData = result.data;
					}
				},
			});
		},
		//编辑行接口
		editAjax(ajaxConfig,filter) {
			table.on('edit(' + filter + ')', function (obj) {
				ajaxConfig.ajaxData.id = obj.data.id;
				ajaxConfig.ajaxData.columnNameArr = [obj.field];
				ajaxConfig.ajaxData.columnValueArr = [obj.value];
				var paramObject = ajaxConfig.ajaxData;
				if (!ajaxConfig.isKeyValue) {
					paramObject = JSON.stringify(paramObject);
				}
				$.ajax({
					url: ajaxConfig.url,
					type: ajaxConfig.type ? ajaxConfig.type : "post",
					dataType: "json",
					contentType: 'application/json',
					data: paramObject ? paramObject : null,
					success: function (result) {
						if (result.code !== 0) {
							layer.alert(result.msg);
						}
					},
				});
			});
			$(document).on("focus",".layui-table-edit",function(){$(this).attr("maxlength","50");});
		},
		page: function (config) {
			laypage.render({
				elem: config.elem
				,count: config.count
				,limit: 15
				,layout: [ 'prev', 'page', 'next', 'limit', 'count','refresh', 'skip']
				,limits: [15, 30, 40, 50,100]
				,jump: function(obj, first){
					customTable.initData.ajaxConfig.all.ajaxData.page = obj.curr;
					customTable.initData.ajaxConfig.all.ajaxData.limit = obj.limit;
					customTable.ajaxReq(customTable.initData.ajaxConfig.all,'1');
					//首次不执行
					if (!first){
						//do something
					}
				}
			});
		}
	};

	//输出 mymod 接口
	exports("customTable", customTable);
});