浅谈layui上传文件和数据表格中的一些问题

layui是一款我比较喜欢的框架,它的界面风格和颜色搭配都是让人比较舒服的,所以我非常喜欢使用layui。

接下来就是在工作中使用layui遇到了一些比较细节的问题:

第一:layui上传文件的问题,

第二:layui 表格的问题。

首先第一个问题,就是layui上传文件的问题,首先我们来看layui是如何上传文件的:

function UpdateFile() {
  layui.use('upload', function () {
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
 elem: '#upload' //绑定元素
 , url: '/ExcelTemplate'//上传接口
 , method: 'POST'
 , type: "file"
 , accept: 'file'
 , before: function (obj) {
  layer.load(); //上传loading
 }
 , done: function (res) {
  //上传完毕回调
  if (res) {
layer.closeAll('loading');
var d = dialog({
 title: '提示',
 content: '上传模板成功',
 width: 200,
 ok: function () { self.location.reload(); },
});
d.show();
  } else {
layer.closeAll('loading');
var d = dialog({
 title: '提示',
 content: '上传模板失败',
 width: 200,
 ok: function () { },
});
d.show();
  }
 }
 , error: function () {
  layer.closeAll('loading');
 }
});
  });
 }

当然你需要在你的页面上定义一个按钮,然后触发点击事件,elem: '#upload' 就是用来与你的上传按钮做绑定了,接下来就是文件类型还有用post来传输。

然后我们需要在后台用一个参数去接收文件。

[HttpPost("")]
  public IActionResult UploadTemplate(IFormFile file)
  {
long dateTime = DateTime.Now.ToFileTimeUtc();
string[] template = file.FileName.Split(new char[] { '\\' },
 StringSplitOptions.RemoveEmptyEntries);
 
string fileName = Path.Combine(hostingEnvironment.WebRootPath, "Upload",
 "ExcelTemplate", dateTime + "_" + template[template.Length - 1]);
 
if (System.IO.File.Exists(fileName))
{
 System.IO.File.Delete(fileName);
}

try
{
 using (FileStream fs = new FileStream(fileName, FileMode.Create))
 {
  file.CopyTo(fs);
  fs.Flush();
  return Ok(true);
 }
}
catch (Exception)
{
 return BadRequest("上传模板失败!");
}
  }

这里是用IFormFile 去接收文件,参数名最好是file,然后对文件进行操作,那么上传的文件要怎么才能下载呢,如下:

<script type="text/html" id="down">
<a href="~/Upload/ExcelTemplate/{{d.name}}" download="{{d.name}}"
 class="layui-table-link">下载</a>
</script>

在表格中显示和下载。

第二就是表格的问题了:

layui.use(['table', 'laypage'], function () {
var laypage = layui.laypage;
var table = layui.table,
 form = layui.form;
table.render({
 elem: '#PaymentDayList'
 , url: '/PaymentDay'
 , method: "get"
 , height: "auto"
 , width: "auto"
 , cellMinWidth: 80
 , limit: 10
 , curr: 1
 , request: {
  pageName: 'pageIndex'
 }
 , page: {
  layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
  , groups: 5 //只显示 1 个连续页码
  , first: false //不显示首页
  , last: false //不显示尾页

 }
 , limits: [10, 20, 50, 100, 500, 1000]
 , cols: [[

  { type: "checkbox", fixed: "left" },
  { type: 'numbers', title: '序号' },
  { field: 'name', title: '账期名称', sort: true, width: 200 },
  { field: 'settleMentInterval', title: '结算周期', sort: true, width: 100 },
  { field: 'startTime', title: '账期起始时间', sort: true, width: 150 },
  { field: 'endTime', title: '账期终止时间', sort: true, width: 150 },
  { field: 'warnDay', title: '到期提醒日', sort: true, width: 150 },
  { field: 'userName', title: '商保专员', sort: false, width: 100 },
  { field: 'addTime', title: '创建时间', sort: true, width: 200 },
  { field: 'isEnabled', title: '启用', templet: '#checkboxTpl', width: 100 },
  { field: 'status', title: '状态', sort: false, width: 100 },
  { field: 'scope', title: '适用范围', sort: false, width: 100 },

 ]]
});
$('#Select').on('click', function () {
 table.reload("PaymentDayList", {
  page: {
curr: 1
  }
  , where: {
name: $("#name").val(),
startTime: $("#startTime").val(),
endTime: $("#endTime").val(),
status: $("#type option:selected").val()
  }
 });
});
form.on('checkbox(lockDemo)', function (obj) {

 var isEnable;
 obj.elem.checked == true ? isEnable = "启用" : isEnable = "未启用";
 $.ajax({
  url: '/PaymentDay/Enabled/' + obj.value + "/" + isEnable,
  type: 'get',
  success: function (result) {
if (result.code == 200) {
}
else {
 var d = dialog({
  title: '提示',
  content: '操作失败!',
  ok: function () { },
 });
 d.show();
}
  }

 });
});
  });

这时候有人可能留意到了有一个启用的checkbox,其中点击checkbox会发送get请求到控制器。从而完成与后台的交互。那么如果我们想要点击了checkbox按钮之后,我们选中这一条数据的时候不能删除这条数据怎么办呢?

我们就需要遍历一下这个页面的所有checkbox了,如下:

var table = layui.table;
var checkStatus = table.checkStatus('PaymentDayList'), data = checkStatus.data;

if (data.length == 1) {
 var check = document.getElementsByName("lock");
 for (i = 0; i < check.length; i++) {
  if (check[i].value == data[0].id) {
if (check[i].checked) {
 var d = dialog({
  title: '提示',
  content: "启用了的账期不能修改",
  okValue: '确定',
  ok: function () {
  }

 }).width(200);
 d.show();
 return;
}

  }

 }

这样就可以确定哪个是选中的了。


推荐文章
layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

layui table组件常见用法总结

table是layui最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头

浅谈layui中table的sort排序

今天来谈谈tablesort的那点事。预告一下,目的是做到前台排序还有服务器排序区分开,目前的table的分页实际是比较“乱”的,相信很多用的有一段时间的特别是做server排序的同学都会多多少少遇到

layui怎么设置时间选择框?

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()

layui和easyui的区别是什么?

layuilayui是一款采用自身模块规范编写的前端UI框架,它遵循原生的HTML/CSS/JS书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到API都非常适合界面的快速开发。事实

浅谈layui弹出层(open)的属性

layui.open属性如:打开一个弹出层核心方法varindex=layer.open({ type:2, title:title, maxmin:true, offset:'100px', are

layui如何获取table某一行的值?

layui中可以使用table.checkStatus('ID')方法获取table某一行的值,其中ID为基础参数。【自动化渲染】……【方法渲染】table.render({//其它参数省略 id:'

layui兼不兼容ie8?

layui兼不兼容ie8?layui兼容ie8,layui兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。layui(谐音:类UI)是一款采用自身模块规范

layui和layer的区别是什么?

layui是之前layerlaydate等独立组件的超集合;layui是一个完整的前端框架,和Bootstrap是同一类事务;引入了layui之后layer就不用单独引入了。layer至今仍作为lay

layui 开源吗?

layui开源吗?layui是免费开源的。layui是一款开源和免费的前端UI框架,可随意使用;不过为了维持发展,在其生态下,也会推出一些基于layui的收费产品,比如:layuiAdmin和layI

layui怎么隐藏表格行?

layui数据表格隐藏列在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。table.render({ elem:'#test'

详解layui后台框架的搭建

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui有什么功能?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

浅谈layui中使用函数layui.define的方法

前言:1、如果你深刻理解并合理运用layui.define,那么本篇对你来说有点浪费时间了。2、如果你对于“Javascript模块化开发”听都没听过,更别说还要理解它。那么建议可以先在网络上找找什么

layui是基于vue的吗?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

laypage组件常见用法总结

laypage的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。核心方法:laypage.render(options)来设置基础参数。一、laypage的常用基

layui表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

layui的优缺点是什么?

layui是一款采用自身模块规范编写的前端UI框架,它遵循原生的HTML/CSS/JS书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到API都非常适合界面的快速开发。事实上layu

前端layui框架快速上手

一、介绍在使用layui之前,我们先要了解一下layui是什么?我觉得用作者贤心的一句话来概括就好了:为后端程序员设计的前端框架。更加详细的描述是:这是一个封装了各种css和js、Ajax等等的前端框

浅谈Layui的时间选择框

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()