通过easyui实现动态控制表格字段显示、导出表格数据

Java程序员-小白2023-08-14 15:16

前言

学过layui前端框架的都知道，layui默认帮我们实现了控制表格字段显示以及数据的导出功能。

1、控制表格字段显示

2、数据导出

3、导出为pdf：导出按钮的右边那个按钮就是打印pdf的

那么，easyui要怎么实现这些功能呢？这篇文章就要介绍一下怎么通过前端实现表格数据导出以及控制字段显示的效果。

一、easyui数据导出

其实和layui一样，easyui已经帮我们实现了数据导出的功能，不过需要额外引入 datagrid-export.js 这个JS文件。

如图，把 datagrid-export.js 下载到本地，复制到springboot项目的 resources/static/js/easyui 目录下，然后在页面引入。

然后通过一句代码就可以完成表格数据的导出

$(表格的选择器).datagrid("toExcel", 导出的文件名);

例如：

javascript 复制代码 
$('#member_list').datagrid("toExcel", "帮派成员.xls");

在这里贴出已经实现了导出功能的页面代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="/css/themes/icon.css"/>
		<link rel="stylesheet" href="/css/themes/default/easyui.css" />
		<title>帮派管理>>帮派成员列表</title>
		<script src="/js/public/jquery.min.js"></script>
		<script src="/js/easyui/jquery.easyui.min.js"></script>
		<script src="/js/easyui/datagrid-export.js"></script>
		<script src="/js/easyui/easyui-lang-zh_CN.js"></script>
	</head>
	
	<body>
		<form id="form">
			<table style="border-spacing:5px;">
				<tr>
					<td><input id="gang_id" /></td>
					<td><input id="_name_" /></td>
					<td><input id="job_id" /></td>
					<td><input id="role_id" /></td>
					<td><input id="school_id" /></td>

					<td><a id="search">搜索</a></td>
					<td><a id="clear">清空</a></td>
				</tr>
			</table>
		</form>

		<div id="member_dialog" style="display:none;">
			<form id="member_form">
				<table style="border-spacing:5px;">
					<tr>
						<td>成员ID</td>
						<td><input id="id" name="id" /></td>
						
						<td>昵&emsp;&emsp;称</td>
						<td><input id="name" name="name" /></td>

						<td>等&emsp;&emsp;级</td>
						<td><input id="grade" name="grade" /></td>
					</tr>
					
					<tr>
						<td>门&emsp;&emsp;派</td>
						<td><input id="schoolId" name="schoolId" /></td>
						
						<td>角色造型</td>
						<td><input id="roleId" name="roleId" /></td>
					</tr>

					<tr>
						<td>本周帮贡</td>
						<td><input id="thisWeek" name="thisWeek" /></td>

						<td>现有帮贡</td>
						<td><input id="current" name="current" /></td>
						
						<td>历史帮贡</td>
						<td><input id="history" name="history" /></td>
					</tr>

					<tr>
						<td>所属帮派</td>
						<td><input id="gangId" name="gangId" /></td>

						<td>担任职务</td>
						<td><input id="jobId" name="jobId" /></td>
					</tr>
				</table>

				<table style="border-spacing:5px;">
					<tr>
						<td>入帮时间</td>
						<td><input id="enterTime" name="enterTime" /></td>
						
						<td>离线时间</td>
						<td><input id="lastOnline" name="lastOnline" /></td>
					</tr>
				</table>
			</form>
		</div>
		
		<table id="member_list"></table>

		<script src="/js/public/util.js"></script>
		<script src="/js/public/public.js"></script>
		<script src="/js/gang/gang_member_list.js"></script>
	</body>
</html>
javascript 复制代码 
let requestUrl;
let height = 550;
let image_size = 40;

function addHandler() {
	let gangId = $("#gang_id").combobox("getValue");

	if (gangId) {
		$("#gangId").combobox("setValue", gangId);
	}

	requestUrl = "/gang_member/insert";

	$("#member_dialog").dialog("open");
}

function editHandler() {
	let rowData = $("#member_list").datagrid("getSelected");
	
	if (rowData) {
		requestUrl = "/gang_member/updateById";

		$("#id").textbox("setValue", rowData.id);
		$("#name").textbox("setValue", rowData.name);
		$("#jobId").combobox("setValue", rowData.jobId);
		$("#gangId").combobox("setValue", rowData.gangId);
		$("#roleId").combobox("setValue", rowData.roleId);
		$("#grade").numberspinner("setValue", rowData.grade);
		$("#schoolId").combobox("setValue", rowData.schoolId);
		$("#current").numberspinner("setValue", rowData.current);
		$("#history").numberspinner("setValue", rowData.history);
		$('#enterTime').datebox("setValue", rowData.enterTime);
		$('#lastOnline').datebox("setValue", rowData.lastOnline);
		$("#thisWeek").numberspinner("setValue", rowData.thisWeek);

		$("#member_dialog").dialog("open");
	} else {
		alertMsg("请选择要修改的记录！", "warning");
	}
}

function deleteHandler() {
	let rowData = $("#member_list").datagrid("getSelected");
	
	if (rowData) {
		$.messager.confirm('系统提示', '是否确认删除该帮派成员？', function(bool) {
			if (bool) {
				get("/gang_member/deleteById", {
					id: rowData.id
				}, function(response) {
					showMsg(response.message);

					$("#member_list").datagrid("reload");
				}, error);
			}
		});
	} else {
		alertMsg("请选择要删除的记录！", "warning");
	}
}

/**
 * 保存为pdf需要提供此方法
 */
function toPdf() {
	let body = $("#member_list").datagrid("toArray");

	let docDefinition = {
		content: [{
			table: {
				body: body,
				headerRows: 1,
				widths: ["*", "*", "*", "*", "auto", "*"]
			}
		}]
	};

	pdfMake.createPdf(docDefinition).open();
}

$(document).ready(function() {
	// 帮派
	$("#gang_id").combobox({
		url: "/gang/selectAll",
		valueField: "id",
		textField: "name",
		width: 150,
		panelHeight: "auto",
		prompt: "-选择帮派-"
	});

	// 角色名
	$("#_name_").textbox({
		width: 150,
		prompt: "输入角色名模糊查询"
	});

	$("#job_id").combobox({
		url: "/gang_job/selectAll",
		valueField: "id",
		textField: "name",
		width: 150,
		panelHeight: "auto",
		prompt: "输入帮派职务"
	});

	// 门派
	$("#school_id").combobox({
		url: "/school/selectAll",
		valueField: "id",
		textField: "name",
		width: 150,
		prompt: "-选择门派-",
		panelHeight: "auto",
		formatter: function(row) {
			return "<img width='20' src='" + row.image + "' />&nbsp;" + row.name;
		}
	});

	// 角色造型
	$("#role_id").combobox({
		url: "/role_modeling/selectAll",
		valueField: "id",
		textField: "name",
		width: 150,
		panelHeight: "auto",
		groupField: "phyle",
		prompt: "-请选择角色造型-",
		groupFormatter: function(group) {
			get("/phyle/selectById", {
				id: group
			}, function (res) {
				$("#_phyle_" + group).html(res.name);
			}, error);

			return "<span class='blue' id='_phyle_" + group + "'></span>";
		},
		formatter: function(row) {
			return "<img width='20' src='" + row.image + "' />&nbsp;" + row.name;
		}
	});

	// 搜索按钮
	$("#search").linkbutton({
		iconCls: "icon-search"
	}).click(function() {
		let name = $("#_name_").textbox("getValue");
		let jobId = $("#job_id").combobox("getValue");
		let roleId = $("#role_id").combobox("getValue");
		let gangId = $("#gang_id").combobox("getValue");
		let schoolId = $("#school_id").combobox("getValue");

		$("#member_list").datagrid('load', {
			name: name,
			jobId: jobId,
			roleId: roleId,
			gangId: gangId,
			schoolId: schoolId
		});
	});

	// 清空按钮
	$("#clear").linkbutton({
		iconCls: "icon-delete"
	}).click(function() {
		$("#form").form("clear");
	});



	$("#id").textbox({
		width: 100,
		required: true
	});
	
	$("#name").textbox({
		width: 100,
		required: true
	});
	
	$("#schoolId").combobox({
        url: "/school/selectAll",
		valueField: "id",
		textField: "name",
		width: 100,
		required: true,
		panelHeight: "auto",
		formatter: function(row) {
			return "<img width='20' src='" + row.image + "' />&nbsp;" + row.name;
		},
		onSelect: function(record){
	        if(record) {
	        	let url = "/role_modeling/selectByPhyle?phyle=" + record.phyle;

	        	$('#roleId').combobox("reload", url);
	        }
	    }
	});
	
	$("#roleId").combobox({
        url: "/role_modeling/selectAll",
        valueField: "id",
		textField: "name",
		width: 100,
		required: true,
		panelHeight: "auto",
		formatter: function(row) {
			get("/role_modeling/selectImageById", {
				id: row.id
			}, function(response) {
				$("#_modeling_" + row.id).attr("src", response.data);
			}, error);
			
			return "<img width='20' id='_modeling_" + row.id + "' />&nbsp;" + row.name;
		}
    });
	
	$("#grade").numberspinner({
        min: 0,
        width: 100,
        max: 115,
        editable: true,
        required: true
    });
	
	$("#jobId").combobox({
        url: "/gang_job/selectAll",
        valueField: "id",
		textField: "name",
		width: 100,
		required: true,
		panelHeight: "auto"
	});
	
    $("#thisWeek").numberspinner({
        min: 0,
        width: 100,
        required: true
    });
    
    $("#current").numberspinner({
        min: 0,
        width: 100,
        required: true
    });
    
    $("#history").numberspinner({
        min: 0,
        width: 100,
        required: true
    });

	$("#gangId").combobox({
		url: "/gang/selectAll",
		valueField: "id",
		textField: "name",
		width: 100,
		required: true,
		panelHeight: "auto"
	});
    
    $("#enterTime").datebox({
    	width: 185,
        required: true
    });
    
    $("#lastOnline").datebox({
    	width: 185,
        required: true
    });
    
	$("#member_dialog").dialog({
		title: "成员信息",
		modal: true,
		closed: true,
		closable: true,
		draggable: false,
		buttons: [{
			iconCls: "icon-save",
			text: "保存",
			handler: function() {
				let selector = "#member_form";

				checkForm(selector, function () {
					let data = $(selector).serialize();

					post(requestUrl, data, function(response) {
						showMsg(response.message);

						$(selector).form("clear");
						$("#member_dialog").dialog("close");
						$("#member_list").datagrid("close");
					}, error);
				});
			}
		}, {
			iconCls: "icon-cancel",
			text: "取消",
			handler: function() {
				$("#member_dialog").dialog("close");
				$("#member_form").form("clear");
			}
		}]
	});
	
	$("#member_list").datagrid({
		url: "/gang_member/selectByPage",
		striped: true,
		height: height,
		multiSort: true,
		remoteSort: true,
		fitColumns: true,
		singleSelect: true,
		pagination: true,
		pageList: pageList,
		pageSize: pageList[0],
		loadFilter: function(result) {
			if (result.code === 200) {
				return result.data;
			} else {
				return null;
			}
		},
		toolbar: [{
			iconCls: "icon-add",
			text: "添加",
			handler: function() {
				addHandler();
			}
		}, "-", {
			iconCls: "icon-edit",
			text: "修改",
			handler: function() {
				editHandler();
			}
		}, "-", {
			iconCls: "icon-delete",
			text: "删除",
			handler: function() {
				deleteHandler();
			}
		}, "-", {
			iconCls: "icon-pdf",
			text: "导出为pdf",
			handler: function() {
				$('#member_list').datagrid("print", "DataGrid");
			}
		}, "-", {
			iconCls: "icon-save",
			text: "保存为excell",
			handler: function() {
				$('#member_list').datagrid("toExcel", "帮派成员.xls");
			}
		}],
		columns: [[
			{field: "id", title: "角色ID", align:"center", width:100, sortable: true},
			{field: "roleId", title: "角色造型", align: "center", width: 80
				, formatter: function(value, rowData, rowIndex) {
					get("/role_modeling/selectById", {
						id: value
					}, function(result) {
						$("#role_" + rowIndex).attr("src", result.image)
							.attr("title", result.name);
					}, error);

					return "<img height='" + image_size + "' id='role_" + rowIndex + "' />";
				}
			},
			{field: "name", title: "帮派成员", align:"center", width: 100},
			{field: "grade", title: "等级", align:"center", width: 100, sortable: true},
			{field: "schoolId", title: "门派", align:"center", width: 100
				, formatter: function(value, rowData, rowIndex) {
					get("/school/selectById", {
						id: value
					}, function(result) {
						$("#school_" + rowData.id).attr("src", result.image)
							.attr("title", result.name);
					}, error);
					
					return "<img height='" + image_size + "' id='school_" + rowData.id + "' />";
				}
			},
			{field: "jobId", title: "职务", align:"center", width: 100, sortable: true
				, formatter: function(value, rowData, rowIndex) {
					get("/gang_job/selectById", {
						id: value
					}, function(res) {
						$("#job_" + rowData.id).html(res.name);
					}, error);
					
					return "<div id='job_" + rowData.id + "'></div>";
				}
			},
			{field: "thisWeek", title: "本周帮贡", align:"center", width: 100, sortable: true},
			{field: "current", title: "现有帮贡", align:"center", width: 100, sortable: true},
			{field: "history", title: "历史帮贡", align:"center", width: 100, sortable: true},
			{field: "lastUpdateTime", title: "最后一次修改", align:"center", width: 120}
		]]
	});

});

二、easyui控制表格字段显示

实现控制easyui表格datagrid的字段显示只需要一个方法。

javascript 复制代码 
let columnMenu;

/**
 * 创建表格的右键菜单
 * @param selector 表格dom对象的选择器
 */
function createColumnMenu(selector) {
	let datagrid = $(selector);
	let checked = "icon-checked";
	let unchecked = "icon-unchecked";

	columnMenu = $("<div/>").appendTo("body");

	columnMenu.menu({
		onClick: function(item){
			if (item.iconCls === checked){
				datagrid.datagrid("hideColumn", item.name);

				columnMenu.menu("setIcon", {
					target: item.target,
					iconCls: unchecked
				});
			} else {
				datagrid.datagrid("showColumn", item.name);

				columnMenu.menu("setIcon", {
					target: item.target,
					iconCls: checked
				});
			}
		}
	});

	let fields = datagrid.datagrid("getColumnFields");

	for(let i = 0; i< fields.length; i++){
		let field = fields[i];
		let column = datagrid.datagrid("getColumnOption", field);

		columnMenu.menu("appendItem", {
			text: column.title,
			name: field,
			iconCls: column.hidden ? unchecked : checked
		});
	}
}

然后在页面渲染表格的js代码中加入以下代码片段

javascript 复制代码 
onHeaderContextMenu: function(e) {
    e.preventDefault();

    if (!columnMenu){
        createColumnMenu(表格dom对象的选择器);
    }
    columnMenu.menu("show", {
        left: e.pageX,
        top: e.pageY
    });
},

比如，在上面给出的页面上添加这个功能之后

javascript 复制代码 
let requestUrl;
let height = 550;
let image_size = 40;

function addHandler() {
	let gangId = $("#gang_id").combobox("getValue");

	if (gangId) {
		$("#gangId").combobox("setValue", gangId);
	}

	requestUrl = "/gang_member/insert";

	$("#member_dialog").dialog("open");
}

function editHandler() {
	let rowData = $("#member_list").datagrid("getSelected");
	
	if (rowData) {
		requestUrl = "/gang_member/updateById";

		$("#id").textbox("setValue", rowData.id);
		$("#name").textbox("setValue", rowData.name);
		$("#jobId").combobox("setValue", rowData.jobId);
		$("#gangId").combobox("setValue", rowData.gangId);
		$("#roleId").combobox("setValue", rowData.roleId);
		$("#grade").numberspinner("setValue", rowData.grade);
		$("#schoolId").combobox("setValue", rowData.schoolId);
		$("#current").numberspinner("setValue", rowData.current);
		$("#history").numberspinner("setValue", rowData.history);
		$('#enterTime').datebox("setValue", rowData.enterTime);
		$('#lastOnline').datebox("setValue", rowData.lastOnline);
		$("#thisWeek").numberspinner("setValue", rowData.thisWeek);

		$("#member_dialog").dialog("open");
	} else {
		alertMsg("请选择要修改的记录！", "warning");
	}
}

function deleteHandler() {
	let rowData = $("#member_list").datagrid("getSelected");
	
	if (rowData) {
		$.messager.confirm('系统提示', '是否确认删除该帮派成员？', function(bool) {
			if (bool) {
				get("/gang_member/deleteById", {
					id: rowData.id
				}, function(response) {
					showMsg(response.message);

					$("#member_list").datagrid("reload");
				}, error);
			}
		});
	} else {
		alertMsg("请选择要删除的记录！", "warning");
	}
}

/**
 * 保存为pdf需要提供此方法
 */
function toPdf() {
	let body = $("#member_list").datagrid("toArray");

	let docDefinition = {
		content: [{
			table: {
				body: body,
				headerRows: 1,
				widths: ["*", "*", "*", "*", "auto", "*"]
			}
		}]
	};

	pdfMake.createPdf(docDefinition).open();
}

$(document).ready(function() {
	// 帮派
	$("#gang_id").combobox({
		url: "/gang/selectAll",
		valueField: "id",
		textField: "name",
		width: 150,
		panelHeight: "auto",
		prompt: "-选择帮派-"
	});

	// 角色名
	$("#_name_").textbox({
		width: 150,
		prompt: "输入角色名模糊查询"
	});

	$("#job_id").combobox({
		url: "/gang_job/selectAll",
		valueField: "id",
		textField: "name",
		width: 150,
		panelHeight: "auto",
		prompt: "输入帮派职务"
	});

	// 门派
	$("#school_id").combobox({
		url: "/school/selectAll",
		valueField: "id",
		textField: "name",
		width: 150,
		prompt: "-选择门派-",
		panelHeight: "auto",
		formatter: function(row) {
			return "<img width='20' src='" + row.image + "' />&nbsp;" + row.name;
		}
	});

	// 角色造型
	$("#role_id").combobox({
		url: "/role_modeling/selectAll",
		valueField: "id",
		textField: "name",
		width: 150,
		panelHeight: "auto",
		groupField: "phyle",
		prompt: "-请选择角色造型-",
		groupFormatter: function(group) {
			get("/phyle/selectById", {
				id: group
			}, function (res) {
				$("#_phyle_" + group).html(res.name);
			}, error);

			return "<span class='blue' id='_phyle_" + group + "'></span>";
		},
		formatter: function(row) {
			return "<img width='20' src='" + row.image + "' />&nbsp;" + row.name;
		}
	});

	// 搜索按钮
	$("#search").linkbutton({
		iconCls: "icon-search"
	}).click(function() {
		let name = $("#_name_").textbox("getValue");
		let jobId = $("#job_id").combobox("getValue");
		let roleId = $("#role_id").combobox("getValue");
		let gangId = $("#gang_id").combobox("getValue");
		let schoolId = $("#school_id").combobox("getValue");

		$("#member_list").datagrid('load', {
			name: name,
			jobId: jobId,
			roleId: roleId,
			gangId: gangId,
			schoolId: schoolId
		});
	});

	// 清空按钮
	$("#clear").linkbutton({
		iconCls: "icon-delete"
	}).click(function() {
		$("#form").form("clear");
	});



	$("#id").textbox({
		width: 100,
		required: true
	});
	
	$("#name").textbox({
		width: 100,
		required: true
	});
	
	$("#schoolId").combobox({
        url: "/school/selectAll",
		valueField: "id",
		textField: "name",
		width: 100,
		required: true,
		panelHeight: "auto",
		formatter: function(row) {
			return "<img width='20' src='" + row.image + "' />&nbsp;" + row.name;
		},
		onSelect: function(record){
	        if(record) {
	        	let url = "/role_modeling/selectByPhyle?phyle=" + record.phyle;

	        	$('#roleId').combobox("reload", url);
	        }
	    }
	});
	
	$("#roleId").combobox({
        url: "/role_modeling/selectAll",
        valueField: "id",
		textField: "name",
		width: 100,
		required: true,
		panelHeight: "auto",
		formatter: function(row) {
			get("/role_modeling/selectImageById", {
				id: row.id
			}, function(response) {
				$("#_modeling_" + row.id).attr("src", response.data);
			}, error);
			
			return "<img width='20' id='_modeling_" + row.id + "' />&nbsp;" + row.name;
		}
    });
	
	$("#grade").numberspinner({
        min: 0,
        width: 100,
        max: 115,
        editable: true,
        required: true
    });
	
	$("#jobId").combobox({
        url: "/gang_job/selectAll",
        valueField: "id",
		textField: "name",
		width: 100,
		required: true,
		panelHeight: "auto"
	});
	
    $("#thisWeek").numberspinner({
        min: 0,
        width: 100,
        required: true
    });
    
    $("#current").numberspinner({
        min: 0,
        width: 100,
        required: true
    });
    
    $("#history").numberspinner({
        min: 0,
        width: 100,
        required: true
    });

	$("#gangId").combobox({
		url: "/gang/selectAll",
		valueField: "id",
		textField: "name",
		width: 100,
		required: true,
		panelHeight: "auto"
	});
    
    $("#enterTime").datebox({
    	width: 185,
        required: true
    });
    
    $("#lastOnline").datebox({
    	width: 185,
        required: true
    });
    
	$("#member_dialog").dialog({
		title: "成员信息",
		modal: true,
		closed: true,
		closable: true,
		draggable: false,
		buttons: [{
			iconCls: "icon-save",
			text: "保存",
			handler: function() {
				let selector = "#member_form";

				checkForm(selector, function () {
					let data = $(selector).serialize();

					post(requestUrl, data, function(response) {
						showMsg(response.message);

						$(selector).form("clear");
						$("#member_dialog").dialog("close");
						$("#member_list").datagrid("close");
					}, error);
				});
			}
		}, {
			iconCls: "icon-cancel",
			text: "取消",
			handler: function() {
				$("#member_dialog").dialog("close");
				$("#member_form").form("clear");
			}
		}]
	});
	
	$("#member_list").datagrid({
		url: "/gang_member/selectByPage",
		striped: true,
		height: height,
		multiSort: true,
		remoteSort: true,
		fitColumns: true,
		singleSelect: true,
		pagination: true,
		pageList: pageList,
		pageSize: pageList[0],
		loadFilter: function(result) {
			if (result.code === 200) {
				return result.data;
			} else {
				return null;
			}
		},
		onHeaderContextMenu: function(e) {
			e.preventDefault();

			if (!columnMenu){
				createColumnMenu("#member_list");
			}
			columnMenu.menu("show", {
				left: e.pageX,
				top: e.pageY
			});
		},
		toolbar: [{
			iconCls: "icon-add",
			text: "添加",
			handler: function() {
				addHandler();
			}
		}, "-", {
			iconCls: "icon-edit",
			text: "修改",
			handler: function() {
				editHandler();
			}
		}, "-", {
			iconCls: "icon-delete",
			text: "删除",
			handler: function() {
				deleteHandler();
			}
		}, "-", {
			iconCls: "icon-pdf",
			text: "导出为pdf",
			handler: function() {
				$('#member_list').datagrid("print", "DataGrid");
			}
		}, "-", {
			iconCls: "icon-save",
			text: "保存为excell",
			handler: function() {
				$('#member_list').datagrid("toExcel", "帮派成员.xls");
			}
		}],
		columns: [[
			{field: "id", title: "角色ID", align:"center", width:100, sortable: true},
			{field: "roleId", title: "角色造型", align: "center", width: 80
				, formatter: function(value, rowData, rowIndex) {
					get("/role_modeling/selectById", {
						id: value
					}, function(result) {
						$("#role_" + rowIndex).attr("src", result.image)
							.attr("title", result.name);
					}, error);

					return "<img height='" + image_size + "' id='role_" + rowIndex + "' />";
				}
			},
			{field: "name", title: "帮派成员", align:"center", width: 100},
			{field: "grade", title: "等级", align:"center", width: 100, sortable: true},
			{field: "schoolId", title: "门派", align:"center", width: 100
				, formatter: function(value, rowData, rowIndex) {
					get("/school/selectById", {
						id: value
					}, function(result) {
						$("#school_" + rowData.id).attr("src", result.image)
							.attr("title", result.name);
					}, error);
					
					return "<img height='" + image_size + "' id='school_" + rowData.id + "' />";
				}
			},
			{field: "jobId", title: "职务", align:"center", width: 100, sortable: true
				, formatter: function(value, rowData, rowIndex) {
					get("/gang_job/selectById", {
						id: value
					}, function(res) {
						$("#job_" + rowData.id).html(res.name);
					}, error);
					
					return "<div id='job_" + rowData.id + "'></div>";
				}
			},
			{field: "thisWeek", title: "本周帮贡", align:"center", width: 100, sortable: true},
			{field: "current", title: "现有帮贡", align:"center", width: 100, sortable: true},
			{field: "history", title: "历史帮贡", align:"center", width: 100, sortable: true},
			{field: "lastUpdateTime", title: "最后一次修改", align:"center", width: 120}
		]]
	});

});

右键单击表格的标题，通过点击菜单对应的表格中的字段名可以控制字段显示/隐藏。

文章中使用的导出js文件可以通过以下网盘连接获取：

easyui常用的js文件https://pan.baidu.com/s/1lez6R9DbdCeoDv_-45KNPQ?pwd=dxe1

或者通过以下gitee项目

mhxysyhttps://gitee.com/he-yunlin/mhxysy.git

好了，文章就分享到这里了，看完不要忘了点赞+收藏哦~

相关推荐
也无晴也无风雨38 分钟前
深入剖析输入URL按下回车，浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中，ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心，方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别？
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间（禁用日期面板、控制开始时间不能超过结束时间的时分秒）实现方案
前端·javascript·elementui
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03Windows10安装PCL1.14.0及点云配准04C++——超强级病毒代码05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07硬件预取之空间预取08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09Coze扣子平台完整体验和实践（附国内和国际版对比）10【SCS-CN】SCS-CN模型中CN值的确定