技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据

简介: 技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据

[/span>extend name="Public:public"/>


[/span>block name="admin"

[/span>div class="main-content"

[/span>div class="container-fluid"


[/span>div class="container-fluid"

[/span>div class="row"


[/span>div class="panel"

[/span>div class="panel-heading"

[/span>h3 class="panel-title"


[/span>div class="panel-body"

[/span>form class="form-inline" id="searchForm" method="post" action="{:U('XmrechargeBuyerAccount/index')}"

[/span>div class="form-group" style="margin-left: 20px; margin-top: 25px"

[/span>label for="merchant_no" style="width: 100px"

[/span>input style="width: 245px" type="text" name="account" class="form-control" id="account" placeholder="请输入备注" value="{$params【'desc'】}"


[/span>div class="form-group" style="margin-left: 20px; margin-top: 25px"

[/span>label for="platform_type"

[/span>select style="width: 200px" class="selectbox form-control" id="status" name="status"

[/span>option value=""

[/span>option value="1"

[/span>option value="2"



[/span>div style="float: right;margin-top:23px"
//代码参考:https://weibo.com/u/7931859757

[/span>select class="selectbox1" onchange="changeLimit()" id="pid" name="size" style="padding: 6px 12px;background-color: #fff;border: 1px solid #ccc;border-radius: 4px;"

[/span>option grade='10' value="10"

[/span>option grade='25' value="25"

[/span>option grade='50' value="50"

[/span>option grade='100' value="100"



[/span>a href="MODULE/XmrechargeBuyerAccount/add"div style="margin-left: 10px;" class="btn btn-info"

[/span>button style="margin-left: 10px;" type="submit" class="btn btn-info"

[/span>button style="margin-left: 10px;" type="button" class="btn btn-success" onclick="batch()"

批量导入手机账号


批量禁用


批量启用


批量删除


#第一步 设置按钮,然后点击方法


#第二步设置打开窗口layui


#第三步把隐藏的div盒子显示处理,并且写好div布局


#第四步提交文件内容





[/span>div class="panel-body"

[/span>table class="table table-striped table-bordered "

[/span>thead

[/span>tr

[/span>th style="width: 14%"

[/span>th style="width: 14%"

[/span>th style="width: 14%"

[/span>th style="width: 14%"

[/span>th style="width: 16%"



[/span>tbody class="listTd"

[/span>if condition="empty($list)"

[/span>tr class="even gradeC "td colspan="10" align="center" Height</span>="50px"

[/span>else />


[/span>volist name="list" id="litem"

[/span>tr class="even gradeC "

[/span>td style="line-height: 40px;"

[/span>td style="line-height: 40px;"

[/span>td style="line-height: 40px;"

[/span>td style="line-height: 40px;"

[/span>td

[/span>a href="MODULE/XmrechargeBuyerAccount/edit?id={$litem【'id'】}"button class="btn btn-info" href style="margin-top:5px;"

<?php if($litem【'status'】 == 1){ ?>


[/span>a href="javascript:void(0)" onclick="unseleve({$litem【'id'】},2,'禁用')"button class="btn btn-danger" href style="margin-top:5px;"

<?php }else{ ?>


[/span>a href="javascript:void(0)" onclick="unseleve({$litem【'id'】},1,'启用')"button class="btn btn-info" href style="margin-top:5px;"

<?php } ?>


[/span>a href="javascript:void(0)" onclick="delAccount({$litem【'id'】})"button class="btn btn-danger" href style="margin-top:5px;"

[/span>a href="javascript:void(0)" onclick="synchronization({$litem【'id'】})" button class="btn btn-info" href style="margin-top:5px;"


相关文章
|
23天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
25 1
|
27天前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
27天前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
|
27天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
1月前
|
前端开发 JavaScript API
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
130 0
|
1月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
93 0
|
1月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
239 0
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
133 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
41 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。