通过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

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

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

上市公司绿色发展专题：重污染行业企业名单与绿色创新数据

上市公司绿色发展专题：重污染行业企业名单与绿色创新数据

数据简介&#xff1a;上市公司&#xff0c;尤其是重污染行业上市公司实现绿色发展&#xff0c;广泛开展绿色创新&#xff0c;是我国高质量发展的必然要求&#xff0c;受到了来自学界与各级ZF的诸多关注。现有研究中对上市公司绿色发展问题的研究发现&#xff0c;重污染行业上市…
阅读更多...
Jenkins 修改默认管理员帐号

Jenkins 修改默认管理员帐号

1、新增一个新的超级管理员用户&#xff0c;并验证能正常登录 2、进入 Jenkins 用户管理目录&#xff1a; /data/software/jenkins/users 3、修改超级管理文件夹的名称为其他名称&#xff0c;如&#xff1a;mv admin_*** ifadm_*** 4、重启Jenkins容器
阅读更多...
使用RecyclerView构建灵活的列表界面

使用RecyclerView构建灵活的列表界面

使用RecyclerView构建灵活的列表界面 1. 引言 在现代移动应用中&#xff0c;列表界面是最常见的用户界面之一&#xff0c;它能够展示大量的数据&#xff0c;让用户可以浏览和操作。无论是社交媒体的动态流、商品展示、新闻列表还是任务清单&#xff0c;列表界面都扮演着不可或…
阅读更多...
SpringMVC 的基本概念（一）

SpringMVC 的基本概念（一）

1.1 关于三层架构和 MVC 1.1.1 三层架构 我们的开发架构一般都是基于两种形式&#xff0c;一种是 C/S 架构&#xff0c;也就是客户端 / 服务器&#xff0c;另一种是 B/S 架构&#xff0c;也就 是浏览器服务器。在 JavaEE 开发中&#xff0c;几乎全都是基于 B/S 架构…
阅读更多...
CNN经典网络模型之GoogleNet论文解读

CNN经典网络模型之GoogleNet论文解读

目录 1. GoogleNet 1.1 Inception模块 1.1.1 1x1卷积 1.2 辅助分类器结构 1.3 GoogleNet网络结构图 1. GoogleNet GoogleNet&#xff0c;也被称为Inception-v1&#xff0c;是由Google团队在2014年提出的一种深度卷积神经网络架构&#xff0c;专门用于图像分类和特征提取任…
阅读更多...
初识redis——分布式系统概念

初识redis——分布式系统概念

概念 Redis&#xff08;Remote Dictionary Server )&#xff0c;即远程字典服务&#xff0c;是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 最初redis用来作为消息中间件&#xff0c;现在更多…
阅读更多...
39、传输层的任务和协议

39、传输层的任务和协议

从本节内容开始&#xff0c;我们学习TCP/IP模型的传输层的知识。传输层是TCP/IP模型中的重要组成部分&#xff0c;如果没有传输层的处理&#xff0c;那么源主机发送的IP数据包到达目的主机之后&#xff0c;目的主机将不知道这个数据是哪个应用程序的数据&#xff0c;就不能很好…
阅读更多...
【uniapp】封装一个全局自定义的模态框

【uniapp】封装一个全局自定义的模态框

【需求描述】 在接口401处&#xff0c;需要实现全局提示并弹出自定义模态框的功能。考虑到uni-app内置的模态框和app原生提示框的自定义能力有限&#xff0c;我决定自行封装全局自定义的模态框&#xff0c;以此为应用程序提供更加统一且个性化的界面。 【效果图】 【封装】 主…
阅读更多...
实战项目——多功能电子时钟

实战项目——多功能电子时钟

一&#xff0c;项目要求 二&#xff0c;理论原理 通过按键来控制状态机的状态&#xff0c;在将状态值传送到各个模块进行驱动&#xff0c;在空闲状态下&#xff0c;数码管显示基础时钟&#xff0c;基础时钟是由7个计数器组合而成&#xff0c;当在ADJUST状态下可以调整时间&…
阅读更多...
热烈庆祝CSDN峰会圆满举行

热烈庆祝CSDN峰会圆满举行

阅读更多...
Nginx+Tomcat负载均衡、动静分离实例详细部署

Nginx+Tomcat负载均衡、动静分离实例详细部署

一、反向代理两种模式 四层反向代理 基于四层的iptcp/upd端口的代理 他是http块同一级&#xff0c;一般配置在http块上面。 他是需要用到stream模块的&#xff0c;一般四层里面没有自带&#xff0c;需要编译安装一下。并在stream模块里面添加upstream 服务器名称&#xff0c;…
阅读更多...
Git入门到精通——保姆级教程（涵盖GitHub、Gitee、GitLab）

Git入门到精通——保姆级教程（涵盖GitHub、Gitee、GitLab）

文章目录 前言一、Git1.Git-概述1.1.Git-概述-版本控制介绍1.2.Git-概述-分布式版本控制VS集中式版本控制1.3.Git-概述-代码托管中心1.4.Git-概述-安装和客户端的使用 2.Git-命令(常用命令)2.1.Git-命令-设置用户签名2.2.Git-命令-初始化本地库2.3.Git-命令-查看本地库状态2.4.…
阅读更多...
C++11语法笔记

C++11语法笔记

文章目录 一.类中新增的默认成员函数:移动赋值和移动构造二.lambda表达式三.包装器bind函数 一.类中新增的默认成员函数:移动赋值和移动构造 二.lambda表达式 三.包装器 bind函数
阅读更多...
PHP8定义字符串的方法-PHP8知识详解

PHP8定义字符串的方法-PHP8知识详解

字符串&#xff0c;顾名思义&#xff0c;就是将一堆字符串联在一起。字符串简单的定义方法是使用英文单引号&#xff08; &#xff09;或英文双引号&#xff08;" "&#xff09;包含字符。另外&#xff0c;还可以使用定界符定义字符串。本文还介绍了字符串的连接符。…
阅读更多...
《Java-SE-第三十一章》之网络编程

《Java-SE-第三十一章》之网络编程

前言 在你立足处深挖下去,就会有泉水涌出!别管蒙昧者们叫嚷:“下边永远是地狱!” 博客主页&#xff1a;KC老衲爱尼姑的博客主页 博主的github&#xff0c;平常所写代码皆在于此 共勉&#xff1a;talk is cheap, show me the code 作者是爪哇岛的新手&#xff0c;水平很有限&…
阅读更多...
一文读懂c++语言

一文读懂c++语言

一文读懂C语言 C的发展C的设计目标C的特性C的挑战 C的发展 C是一种通用的、高级的编程语言&#xff0c;它是C语言的扩展。C由Bjarne Stroustrup于1983年首次引入&#xff0c;并在之后的几十年中不断发展壮大。C被广泛应用于各种领域&#xff0c;包括系统开发、游戏开发、嵌入式…
阅读更多...
开启MySQL的binlog日志

开启MySQL的binlog日志

1.判断MySQL是否已经开启binlog SHOW VARIABLES LIKE log_bin; 查看MySQL的binlog模式 show global variables like "binlog%";几个关于binlog常用的命令 #查看日志开启状态 show variables like log_%; #查看所有binlog日志列表 show master logs; #查看最新一个b…
阅读更多...
mac安装open3d时候出现错误

mac安装open3d时候出现错误

在测试open3d是否正常顺利安装时&#xff0c;出现了如下错误&#xff1a; python -c "import open3d as o3d; print(o3d.__version__)" Traceback (most recent call last):File "<string>", line 1, in <module>File "/Users/huangzhe/…
阅读更多...
python——案例18：判断该元素是否在列表中

python——案例18：判断该元素是否在列表中

案例18&#xff1a;判断该元素是否在列表中test_list[10,-8,25.6,88,0,4]print("查看88是否在列表里面&#xff1a;")for i in test_list:if(i88):print("存在") print("查看88是否在列表中&#xff1a;") if(88 in test_list):print("存在…
阅读更多...
监控Kubernetes 控制面组件的关键指标

监控Kubernetes 控制面组件的关键指标

控制面组件的监控&#xff0c;包括 APIServer、Controller-manager&#xff08;简称 CM&#xff09;、Scheduler、etcd 四个组件。 1、APIServer APIServer 的核心职能是 Kubernetes 集群的 API 总入口&#xff0c;Kube-Proxy、Kubelet、Controller-Manager、Scheduler 等都需…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023