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使用教程栏目。

以上就是layui上传文件与数据表格的一些问题的详细内容，更多内容请关注技术你好其它相关文章！