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 ...
随机推荐
- 『Plotly实战指南』--直方图绘制与应用
在数据科学的世界里,直方图是一种不可或缺的可视化工具,它以其简洁而直观的方式,揭示了数据的内在规律,为数据分析和决策提供了有力支持. 它能够帮助我们快速识别异常值,并为统计推断提供有力支撑. 无论是对 ...
- Ubuntu v22.0安装zabbix --1
检查Nginx状态 sudo systemctl status nginx 检查Zabbix Server状态 sudo systemctl status zabbix-server Nginx配置: ...
- 从零实现富文本编辑器#3-基于Delta的线性数据结构模型
数据模型的设计是编辑器的核心基础,其直接影响了选区模型.DOM模型.状态管理等模块的设计.例如在quill中的选区模型是index + len的表达,而slate中则是anchor + focus的表 ...
- 全局搜索——Lucene.Net与盘古分词的实现思路
一.Lucene.Net 1.Lucene.Net介绍: Lucene.Net是一个C#开发的开源全文索引库(自带的有索引管理.分词.查询) Lucene.Net.Index 提供索引管理,词组排序. ...
- 【BUG】未能加载文件或程序集“System.Runtime.CompilerServices.Unsafe, Version=4.0.4.1, Culture=neutral, PublicKeyT
参考:无法加载文件或程序集System.Runtime.CompilerServices.Unsafe. 问题 我的环境: Visual Studio 2019 出错代码: MSBuildWorksp ...
- 正点原子ALPHA开发板使用4.3寸触摸屏LCD驱动实验显示不正常
显示问题 裸机开发时,驱动教程的PDF里给了4.3寸LCD屏幕的设置参数.如下图所示: 但是按照这个设置,编写设备树dts文件,下载到开发板里,却出现了显示异常,具体来说就是帧率不对,图和字都是歪斜的 ...
- Python 3.14 新特性盘点,更新了些什么?
Python 3.14.0 稳定版将于 2025 年 10 月正式发布,目前已进入 beta 测试阶段.这意味着在往后的几个月里,3.14 的新功能已冻结,不再合入新功能(除了修复问题和完善文档). ...
- 递归神经网络 RNN 原理(上)
前篇对于 RNN 前奏, 或者说是 NLP 的基础, 语言模型 (Language Model) 有了一点认识. LM 的应用场景为 在词库中, 搜索出 符合当前给定 句子的 下一个单词, 的所有可能 ...
- JS高级用法:像大神一样玩转JavaScript
@charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...
- 深挖diff算法:揭开代码版本控制神器的神秘面纱
@charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...