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

前言

学过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", 导出的文件名);

例如：

$('#member_list').datagrid("toExcel", "帮派成员.xls");

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

<!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>
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的字段显示只需要一个方法。

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代码中加入以下代码片段

onHeaderContextMenu: function(e) {
    e.preventDefault();

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

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

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项目

mhxysyicon-default.png?t=N6B9https://gitee.com/he-yunlin/mhxysy.git

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

深度学习中的优化算法

深度学习中的优化算法

文章目录 前言一、优化和深度学习1.1 优化的目标1.2 深度学习中的优化挑战1.2.1 局部最小值1.2.2 鞍点1.2.3 梯度消失 二、梯度下降2.1 一维梯度下降2.1.1 学习率 2.2 多元梯度下降2.3 自适应方法2.3.1 牛顿法2.3.2 其他自适应方法 三、随机梯度下降3.1 随机梯度更新3.2 动态学…
阅读更多...
了解Swarm 集群管理

了解Swarm 集群管理

Swarm 集群管理 简介 Docker Swarm 是 Docker 的集群管理工具。它将 Docker 主机池转变为单个虚拟 Docker 主机。 Docker Swarm 提供了标准的 Docker API&#xff0c;所有任何已经与 Docker 守护程序通信的工具都可以使用 Swarm 轻松地扩展到多个主机。 支持的工具包括但不限…
阅读更多...
ubuntu服务器配置ftp服务

ubuntu服务器配置ftp服务

需求&#xff1a;配置ftp服务用于在windows电脑上直接浏览、下载、上传ubuntu服务器上的文件&#xff0c;用于文件共享&#xff0c;方便实用 效果&#xff1a;用户打开windows资源管理器后输入ftp://xxx.xxx.xxx.xxx &#xff08;公网IP地址&#xff09;后&#xff0c;即可浏览…
阅读更多...
linux onlyOffice docker 离线部署

linux onlyOffice docker 离线部署

文章目录 前言1. 安装Docker容器2. 拉取镜像3. 验证 前言 docker 离线安装onlyoffice&#xff0c;如在线安装可直接跳过导出导入镜像步骤&#xff0c;拉取后直接运行。 1. 安装Docker容器 下载文件 wget https://download.docker.com/linux/static/stable/x86_64/docker-19…
阅读更多...
在Linux中安装MySQL

在Linux中安装MySQL

在Linux中安装MySQL 检测当前系统中是否安装MySQL数据库 命令作用rpm -qa查询当前系统中安装的所有软件rpm -qa|grep mysql查询当前系统中安装的名称带mysql的软件rpm -qa | grep mariadb查询当前系统中安装的名称带mariadb的软件 RPM ( Red-Hat Package Manager )RPM软件包管理…
阅读更多...
[golang gin框架] 45.Gin商城项目-微服务实战之后台Rbac微服务之角色权限关联

[golang gin框架] 45.Gin商城项目-微服务实战之后台Rbac微服务之角色权限关联

角色和权限的关联关系在前面文章中有讲解,见[golang gin框架] 14.Gin 商城项目-RBAC管理之角色和权限关联,角色授权,在这里通过微服务来实现角色对权限的授权操作,这里要实现的有两个功能,一个是进入授权,另一个是,授权提交操作,页面如下: 一.实现后台权限管理Rbac之角色权限关…
阅读更多...
VSCode C/C++ 分目录编译配置

VSCode C/C++ 分目录编译配置

分目录编译配置记录 launch.json文件 注释处为修改内容 {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息&#xff0c;请访问: https://go.microsoft.com/fwlink/?linkid830387"version": "0.2.0","configur…
阅读更多...
【JavaEE进阶】Spring创建与使用

【JavaEE进阶】Spring创建与使用

文章目录 一. 创建 Spring 项目1.1 创建一个Maven项目1.2 添加Spring依赖1.4. 创建一个启动类 二. 将 Bean 对象存放至 Spring 容器中三. 从 Spring 容器中读取到 Bean1. 得到Spring对象2. 通过Spring 对象getBean方法获取到 Bean对象【DI操作】 一. 创建 Spring 项目 接下来使…
阅读更多...
嵌入式开发学习（STC51-9-led点阵）

嵌入式开发学习（STC51-9-led点阵）

内容 点亮一个点&#xff1b; 显示数字&#xff1b; 显示图像&#xff1b; LED点阵简介 LED 点阵是由发光二极管排列组成的显示器件 通常应用较多的是8 * 8点阵&#xff0c;然后使用多个8 * 8点阵可组成不同分辨率的LED点阵显示屏&#xff0c;比如16 * 16点阵可以使用4个8 *…
阅读更多...
现代C++中的从头开始深度学习：【4/8】梯度下降

现代C++中的从头开始深度学习：【4/8】梯度下降

一、说明 在本系列中&#xff0c;我们将学习如何仅使用普通和现代C编写必须知道的深度学习算法&#xff0c;例如卷积、反向传播、激活函数、优化器、深度神经网络等。 在这个故事中&#xff0c;我们将通过引入梯度下降算法来介绍数据中 2D 卷积核的拟合。我们将使用卷积和上一个…
阅读更多...
Linux6.32 Kubernetes kubeadm部署

Linux6.32 Kubernetes kubeadm部署

文章目录 计算机系统5G云计算第三章 LINUX Kubernetes kubeadm部署一、kubeadm搭建 Kubernetes v1.20&#xff08;一主两从&#xff09;1.环境准备2.所有节点安装docker3.所有节点安装kubeadm&#xff0c;kubelet和kubectl4.部署K8S集群 二、kubeadm搭建 Kubernetes v1.20&…
阅读更多...
没有进度管理的项目，都是在做无用功

没有进度管理的项目，都是在做无用功

在项目管理过程中&#xff0c;最大的挑战之一是确保项目实施与计划保持一致。 项目实施过程是一个相对漫长的过程&#xff0c;其中受到许多因素的影响。如果项目实施没有按照原始项目计划进行&#xff0c;很容易导致项目偏离计划&#xff0c;最终可能导致项目停滞或失败。 当…
阅读更多...
vue+iviewUi+oss直传阿里云上传文件

vue+iviewUi+oss直传阿里云上传文件

前端实现文件上传到oss&#xff08;阿里云&#xff09;适用于vue、react、uni-app&#xff0c;获取视频第一帧图片 用户获取oss配置信息将文件上传到阿里云&#xff0c;保证了安全性和减轻服务器负担。一般文件资源很多直接上传到服务器会加重服务器负担此时可以选择上传到oss&…
阅读更多...
Django基础

Django基础

1.Django基础 路由系统视图模板静态文件和媒体文件中间件ORM&#xff08;时间&#xff09; 2.路由系统 本质上&#xff1a;URL和函数的对应关系。 2.1 传统的路由 from django.contrib import admin from django.urls import path from apps.web import viewsurlpatterns …
阅读更多...
数据结构【哈夫曼树】

数据结构【哈夫曼树】

哈夫曼树 哈夫曼树的概念哈夫曼树的构造构造算法的实现哈夫曼树应用哈夫曼编码哈夫曼编码的算法实现 哈夫曼树的概念 最优二叉树也称哈夫曼 (Huffman) 树&#xff0c;是指对于一组带有确定权值的叶子结点&#xff0c;构造的具有最小带权路径长度的二叉树。权值是指一个与特定结…
阅读更多...
【Hystrix技术指南】（6）请求合并机制原理分析

【Hystrix技术指南】（6）请求合并机制原理分析

[每日一句] 也许你度过了很糟糕的一天&#xff0c;但这并不代表你会因此度过糟糕的一生。 [背景介绍] 分布式系统的规模和复杂度不断增加&#xff0c;随着而来的是对分布式系统可用性的要求越来越高。在各种高可用设计模式中&#xff0c;【熔断、隔离、降级、限流】是经常被使…
阅读更多...
源码分析——LinkedList源码分析

源码分析——LinkedList源码分析

文章目录 1.LinkedList简介2.内部结构分析3.LinkedList源码分析3.1构造方法3.2add方法3.3根据位置取数据的方法3.4根据对象得到索引的方法3.5检查链表是否包含某对象的方法&#xff1a; 1.LinkedList简介 LinkedList是一个实现了List接口和Deque接口的双端链表。 LinkedList底…
阅读更多...
以技术驱动反欺诈，Riskified 为企业出海保驾护航

以技术驱动反欺诈，Riskified 为企业出海保驾护航

如今&#xff0c;全球对于线上消费的需求日益增长&#xff0c;各类新型支付方式也层出不穷。在国内&#xff0c;线上支付有着较为完善的法律及监管条例&#xff0c;格局基本已定型。但对于出海商家而言&#xff0c;由于不同国家和地区的支付规则和监管机制不同&#xff0c;跨境…
阅读更多...
【PostgreSQL内核学习（十一）—— OpenGauss源码学习（CopyTo）】

【PostgreSQL内核学习（十一）—— OpenGauss源码学习（CopyTo）】

可优化语句执行 概述什么是列存储&#xff1f;列存的优势 相关函数CopyToCStoreCopyToCopyStatetupleDescCStoreScanDesc CStoreBeginScanRelationSnapshotProjectionInfo GetCStoreNextBatchRunScanFillVecBatchCStoreIsEndScan CStoreEndScan 声明&#xff1a;本文的部分内容…
阅读更多...
使用docker搭建GPT服务

使用docker搭建GPT服务

不用ChatGPT账号，不用API，直接免费使用上官方原版的GPT4.0！ 这个操作主要使用的是GitHub上的一个开源项目freegpt。 通过docker把这个项目打包到本地电脑上，直接就能使用上原版GPT4.0。 第一步：下载Docker 下载网址：docker.com 根据自己的电脑系统下载对应的版本即可 下…
阅读更多...
最新文章

Copyright @ 2022~2023