hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

layui上传文件与数据表格的一些问题_WEB前端开发

2019-12-13后端开发ki4网27°c
A+ A-

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上传文件与数据表格的一些问题的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
layui上传文件与数据表格的一些问题_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>