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，然后对文件进行操作，那么上传的文件要怎么才能下载呢，如下：
Ztoy网络商铺多用户版
下载
在原版的基础上做了一下修正：增加1st在线支付功能与论坛用户数据结合，vip也可与论坛相关，增加互动性vip会员的全面修正评论没有提交正文的问题特价商品的调用连接问题删掉了2个木马文件去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正定单不能删除问题VIP出错问题主题添加问题商家注册页导航连接问题添加了导航FLASH源文
在表格中显示和下载。
第二就是表格的问题了：
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使用教程栏目。
