layui 关于table 导入方法
<!--导入数据操作层-->
<div class="layui-form-item">
<div class="layui-form-label">导入操作</div>
<div class="layui-form-block">
<div class="layui-upload-drag" style="display:none" id="ImportExcel">
<i class="layui-icon"></i><p>点击上传,或将文件拖拽到此处</p><div class="layui-hide" id="uploadDemoView"> </div> </div>
<table class="layui-hide" id="ImportTable" lay-filter="ImportTable"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="ImportExcel">导入</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
</div>
</div>
<script>
layui.config({
base: '/Content/libs/layuiExts/',
}).extend({
excel: 'excel',
});
layui.use(['table', 'layer', 'excel', 'upload', 'form'], function () {
var table = layui.table
layer = layui.layer,
excel = layui.excel,
upload = layui.upload,
form = layui.form;
table.render({
elem: '#ImportCarrierNumTable',
toolbar: '#tableToolbar',
title: '数据表',
loading: false,
cols: [[
{ field: 'importStatus', title: '导入状态' },
{ field: 'carrierNumber', title: '列名', unresize: true, sort: true },
]]
});
//表格工具栏
table.on('toolbar(ImportCarrierNumTable)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'ImportExcel':
$("#ImportExcel").remove();
$("body").append('<div class="layui-upload-drag" style="display:none" id="ImportExcel"><i class="layui-icon"></i><p>点击上传,或将文件拖拽到此处</p><div class="layui-hide" id="uploadDemoView"> </div> </div>');
layer.open({
type: 1,
shade: false,
area: ['350px', '260px'],
title: '导入Excel',
content: $("#ImportExcel"),
cancel: function () {
layer.close();
$("#ImportExcel").remove();
},
success: function (layero, index) { ImportExcel();
},
});
break;
};
});
//导入方法
function ImportExcel() {
var uploadRender;
let uploadAction = {
elem: '#ImportExcel',
title: '请选择Excel文件',
accept: 'file', //普通文件
exts: 'xls|excel|xlsx', //导入表格
auto: false,
choose: function (obj) {// 选择文件回调
if (uploadRender != null && uploadRender != undefined && uploadRender != "") {
uploadRender = upload.render()
//uploadRender.config.elem.next()[0].value = '';
//uploadRender = undefined;
}
var files = obj.pushFile();
try {
var fileArr = Object.values(files);
for (var index in files) {
if (files.hasOwnProperty(index)) {
delete files[index];
}
}
uploadExcel(fileArr)
$("#ImportExcel").remove();
} catch (e) {
layer.alert(e.message);
}
//var fileArr = Object.values(files);// 注意这里的数据需要是数组,所以需要转换一下
////console.debug(fileArr)
//// 用完就清理掉,避免多次选中相同文件时出现问题
//for (var index in files) {
// if (files.hasOwnProperty(index)) {
// delete files[index];
// }
//}
//uploadExcel(fileArr);// // 如果只需要最新选择的文件,可以这样写: uploadExcel([files.pop()])
},
error: function () {
//关闭所有弹出层
layer.closeAll(); //疯狂模式,关闭所有层
}
};
uploadRender = upload.render(uploadAction);
};
function uploadExcel(files) {
try {
console.log(files);
let excelObj;
// 方式一:先读取数据,后梳理数据
excel.importExcel(files, {}, function (data) {
console.log(data);
let filed;
for (let obj in data[0]) {
excelObj = data[0][obj];
for (let i in excelObj[0]) {
console.log(excelObj[0][i]);
if (excelObj[0][i].indexOf("承运单号") >= 0) {
filed = i
}
}
}
if (filed == null || filed == undefined || filed == "") {
layer.confirm('缺少【需要得列名】列', {
btn: ['确认']
}, function (index, layero) {
$("#ImportExcel").remove();
layer.closeAll();
});
return;
}
excelObj = excel.filterImportData(data, {
'carrierNumber': filed
});
for (let obj in data[0]) {
let shree = excelObj[0][obj];
shree.splice(0, 1);
table.reload('ImportCarrierNumTable', {
data: shree
});
}
files = undefined;
layer.closeAll();
});
} catch (e) {
files = undefined;
layer.alert(e.message);
}
};
form.render();
form.render('select');
});
</script>
layui 关于table 导入方法的更多相关文章
- mysql source命令超大文件导入方法总结
本文章来给各位朋友介绍利用mysql source命令超大文件导入方法总结,下面收集了两种解决办法,一种是把数据库分文件导出然后再导入,另一种是修改my.ini配置文件,下面我一一给各位朋友介绍. 导 ...
- LayUI之table数据表格获取行、行高亮等相关操作
前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
- layui教程---table
layui.config({ base: "${ctx}/static/js/" }).use(['form', 'layer', 'jquery', 'common','elem ...
- Layui的本地存储方法-Layui.data的基本使用
本地存储是对 localStorage 和 sessionStorage 的友好封装,可更方便地管理本地数据. localStorage 持久化存储:layui.data(table, setting ...
- mysql 文件导入方法总结
数据导入3三种方法 一.phpMyAdmin 限制大小:2M 1.创建数据库 2.导入.sql或.sql.zip文件 大数据导入方法一:http://jingyan.baidu.com/article ...
- mediawiki数据库的下载地址及导入方法
mediawiki导入数据库 数据库下载:http://zh.wikipedia.org/wiki/Wikipedia:%E6%95%B0%E6%8D%AE%E5%BA%93%E4%B8%8B%E8% ...
- Exporter - 实现默认的导入方法用于模块
Exporter - 实现默认的导入方法用于模块 简介: In module YourModule.pm: package YourModule; require Exporter; @ISA = q ...
- SAP ABAP规划 使用LOOP READ TABLE该方法取代双LOOP内部表的方法
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWlueXVlemhhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- JavaScript后台代码操作HTML TABLE的方法
原文:JavaScript后台代码操作HTML TABLE的方法 var rowNum = 0,fileNum = 0; //行号与列号 var oNewRow; //定义插入行对象 var oNew ...
- vivado License导入方法与资源获取
前言 以下安装说明基于已经正确安装vivado 笔者操作环境:linux vivado版本:2015.2 vivado License导入方法: 点击菜单栏[Help],选择[Manage Licen ...
随机推荐
- 远程连接到轻量应用服务器PG数据库
不建议这样做,但是开发时方便需要.进入正题. PG是不支持远程连接的,需要连接直接该参数. 在其data目录里,有二个配置文件: pg_hba.conf:配置数据库的访问权限 postgresql.c ...
- luaL_ref如何使用
// main.lua中有个全局函数function gf() print("hello world")end// c++中处理void callgf(){ lua_getglob ...
- Postwoman教程
1.安装 打开git或cmder,输入如下命令: cd d:/GitDemo/ git clone https://github.com/liyasthomas/postwoman cd postwo ...
- 详细介绍MessageQueueSelector
一.MessageQueueSelector 详解 MessageQueueSelector 是 RocketMQ 提供的一个接口,用于自定义消息发送时的队列选择策略. 通过实现该接口, 开发者可以控 ...
- 开发 MCP Proxy(代理)也可以用 Solon AI MCP 哟!
MCP 有三种通讯方式: 通道 说明 备注 stdio 本地进程内通讯 现有 sse http 远程 http 通讯 现有 streamable http 远程 http 通讯 (MCP 官方刚通过决 ...
- 小模型工具调用能力激活:以Qwen2.5 0.5B为例的Prompt工程实践
在之前的分析中,我们深入探讨了cline prompt的设计理念(Cline技术分析:prompt如何驱动大模型对本地文件实现自主变更),揭示了其在激发语言模型能力方面的潜力.现在,我们将这些理论付诸 ...
- Windows 实用工具(新机、全新系统、重装系统必备)
Windows 实用工具 https://www.lanzoub.com/b0ziu7owh 密码:akoc HEU_KMS_Activator Windows 激活工具. 下载链接: Github: ...
- 2K star!三分钟搭建企业级后台系统,这款开源Java框架绝了!
2K star!三分钟搭建企业级后台系统,这款开源Java框架绝了! "LikeAdmin Java是基于Spring Boot + Mybatis Plus + Vue 3的快速开发平台, ...
- js技术之“自定义包含方案”
调用 // 用于判断包含 function diaoyong(arr, str){ // 初始化 var sizes = ['L','XL','S','M']; for (var i = 0; i & ...
- vue3 基础-Vuex 全局数据状态管理
针对页面间, 组件间的数据共享问题, Vue 提供一个数据管理框架 Vuex, 早期主要是用于 Vue2 , 而现在用 Vue3 也是可以正常使用, 但在 Composition API 下则会感到这 ...